[DevOverlay] Enable new UI when PPR testing is enabled

vercel · Jan 21, 2025 · b435757 · b435757
1 parent e207dfa
commit b435757
Show file tree

Hide file tree

Showing 26 changed files with 1,074 additions and 604 deletions.
diff --git a/packages/next/src/build/webpack/plugins/define-env-plugin.ts b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
@@ -290,7 +290,9 @@ export function getDefineEnv({
         }
       : undefined),
     'process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY':
-      config.experimental.newDevOverlay ?? false,
+      config.experimental.newDevOverlay ||
+      // Enable the new dev overlay when PPR is enabled for testing.
+      process.env.__NEXT_EXPERIMENTAL_PPR === 'true',
   }
 
   const userDefines = config.compiler?.define ?? {}

diff --git a/.../components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx b/.../components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx
@@ -36,9 +36,7 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
         .map((line, a) =>
           ~(a = line.indexOf('|'))
             ? line.substring(0, a) +
-              line
-                .substring(a + 1)
-                .replace(`^\\ {${miniLeadingSpacesLength}}`, '')
+              line.substring(a).replace(`^\\ {${miniLeadingSpacesLength}}`, '')
             : line
         )
         .join('\n')

diff --git a/...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -126,6 +126,7 @@ const DevToolsPopover = ({
 
   return (
     <Toast
+      data-nextjs-toast
       style={{
         boxShadow: 'none',
         zIndex: 2147483647,
@@ -174,6 +175,7 @@ const DevToolsPopover = ({
                 onClick={hide}
               />
               <IndicatorRow
+                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}
                 label="Route"
                 value={isStaticRoute ? 'Static' : 'Dynamic'}
               />
@@ -205,14 +207,15 @@ const IndicatorRow = ({
   label,
   value,
   onClick,
+  ...props
 }: {
   label: string
   value: React.ReactNode
   onClick?: () => void
-}) => {
+} & React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>) => {
   const Wrapper = onClick ? 'button' : 'div'
   return (
-    <Wrapper data-nextjs-dev-tools-row onClick={onClick}>
+    <Wrapper data-nextjs-dev-tools-row onClick={onClick} {...props}>
       <span data-nextjs-dev-tools-row-label>{label}</span>
       <span data-nextjs-dev-tools-row-value>{value}</span>
     </Wrapper>

diff --git a/...erlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx b/...erlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx
@@ -233,7 +233,8 @@ export const NextLogo = ({
                 aria-label="Open issues overlay"
                 onClick={onIssuesClick}
               >
-                {issueCount} {issueCount === 1 ? 'Issue' : 'Issues'}
+                <span data-issues-count>{issueCount}</span>{' '}
+                {issueCount === 1 ? 'Issue' : 'Issues'}
               </button>
               <button
                 data-issues-close
@@ -342,8 +343,8 @@ function Cross() {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z"
         fill="#EAEAEA"
       />

diff --git a/...ient/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx b/...ient/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx
@@ -100,8 +100,8 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
         >
           <span>
             <FileIcon />
-            {getFrameSource(stackFrame)} @{' '}
-            <HotlinkedText text={stackFrame.methodName} />
+            {getFrameSource(stackFrame)}
+            {/* TODO: Unlike the CodeFrame component, the `methodName` is unavailable. */}
           </span>
           <ExternalIcon width={16} height={16} />
         </p>

diff --git a/...es/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx b/...es/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx
@@ -20,41 +20,50 @@ interface ReactDevOverlayProps {
 }
 
 export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
-  const { isMounted, state, onComponentError, hasRuntimeErrors } =
-    usePagesReactDevOverlay()
-
-  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(hasRuntimeErrors)
+  const {
+    isMounted,
+    state,
+    onComponentError,
+    hasRuntimeErrors,
+    hasBuildError,
+  } = usePagesReactDevOverlay()
 
   const { readyErrors } = useErrorHook({
     errors: state.errors,
     isAppDir: false,
   })
 
+  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)
+
   return (
     <>
       <DevToolsErrorBoundary isMounted={isMounted} onError={onComponentError}>
         {children ?? null}
       </DevToolsErrorBoundary>
 
-      <ShadowPortal>
-        <CssReset />
-        <Base />
-        <Colors />
-        <ComponentStyles />
-
-        <DevToolsIndicator
-          state={state}
-          readyErrorsLength={readyErrors.length}
-          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-        />
-
-        <ErrorOverlay
-          state={state}
-          readyErrors={readyErrors}
-          isErrorOverlayOpen={isErrorOverlayOpen}
-          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-        />
-      </ShadowPortal>
+      {isMounted && (
+        <ShadowPortal>
+          <CssReset />
+          <Base />
+          <Colors />
+          <ComponentStyles />
+
+          <DevToolsIndicator
+            state={state}
+            readyErrorsLength={readyErrors.length}
+            setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+          />
+
+          {(hasRuntimeErrors || hasBuildError) && (
+            <ErrorOverlay
+              state={state}
+              readyErrors={readyErrors}
+              isErrorOverlayOpen={isErrorOverlayOpen}
+              setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+            />
+          )}
+        </ShadowPortal>
+      )}
     </>
   )
 }
diff --git a/...es/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/...es/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
@@ -33,7 +33,7 @@ export function RuntimeError({ error }: RuntimeErrorProps) {
           ? []
           : filteredFrames.slice(0, firstFirstPartyFrameIndex),
       trailingCallStackFrames: filteredFrames.slice(
-        firstFirstPartyFrameIndex + 1
+        firstFirstPartyFrameIndex < 0 ? 0 : firstFirstPartyFrameIndex
       ),
     }
   }, [error.frames, isIgnoredExpanded])

diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
@@ -799,7 +799,12 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     const stackFrames = (
       await Promise.all(stackFrameElements.map((f) => f.innerText()))
     ).filter(Boolean)
-    expect(stackFrames).toEqual([])
+    expect(stackFrames).toEqual([
+      outdent`
+        Page
+        app/page.js (4:11)
+      `,
+    ])
   })
 
   test('Call stack for server error', async () => {
@@ -831,7 +836,12 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     const stackFrames = (
       await Promise.all(stackFrameElements.map((f) => f.innerText()))
     ).filter(Boolean)
-    expect(stackFrames).toEqual([])
+    expect(stackFrames).toEqual([
+      outdent`
+        Page
+        app/page.js (2:9)
+      `,
+    ])
   })
 
   test('should hide unrelated frames in stack trace with unknown anonymous calls', async () => {
@@ -876,12 +886,20 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       // TODO: investigate the column number is off by 1 between turbo and webpack
       process.env.TURBOPACK
         ? [
+            outdent`
+                <anonymous>
+                app/page.js (4:13)
+              `,
             outdent`
                 Page
                 app/page.js (5:6)
               `,
           ]
         : [
+            outdent`
+                eval
+                app/page.js (4:13)
+              `,
             outdent`
                 Page
                 app/page.js (5:5)
@@ -923,8 +941,8 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       stackFrameElements.map((f) => f.innerText())
     )
 
-    // No following rest of displayed stack frames by default
-    expect(stackFrames.length).toBe(0)
+    // No ignore-listed frames to be displayed by default
+    expect(stackFrames.length).toBe(1)
   })
 
   test('Server component errors should open up in fullscreen', async () => {
@@ -1211,13 +1229,15 @@ export default function Home() {
 
     if (isTurbopack) {
       // FIXME: display the sourcemapped stack frames
-      expect(stackFrames).toMatchInlineSnapshot(
-        `"at [project]/app/page.js [app-client] (ecmascript) (app/page.js (2:1))"`
-      )
+      expect(stackFrames).toMatchInlineSnapshot(`
+       "at [project]/app/utils.ts [app-client] (ecmascript) (app/utils.ts (1:7))
+       at [project]/app/page.js [app-client] (ecmascript) (app/page.js (2:1))"
+      `)
     } else {
       // FIXME: Webpack stack frames are not source mapped
       expect(stackFrames).toMatchInlineSnapshot(`
-        "at ./app/utils.ts ()
+        "at eval (app/utils.ts (1:7))
+        at ./app/utils.ts ()
         at options.factory ()
         at __webpack_require__ ()
         at fn ()

diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts
@@ -793,10 +793,19 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
     await session.assertHasRedbox()
 
     const stack = await getStackFramesContent(browser)
-    expect(stack).toMatchInlineSnapshot(`
-     "at Array.map ()
-     at Page (pages/index.js (2:13))"
-    `)
+    if (process.env.TURBOPACK) {
+      expect(stack).toMatchInlineSnapshot(`
+       "at <unknown> (pages/index.js (3:11))
+       at Array.map ()
+       at Page (pages/index.js (2:13))"
+      `)
+    } else {
+      expect(stack).toMatchInlineSnapshot(`
+       "at eval (pages/index.js (3:11))
+       at Array.map ()
+       at Page (pages/index.js (2:13))"
+      `)
+    }
   })
 
   test('should collapse nodejs internal stack frames from stack trace', async () => {
@@ -824,9 +833,10 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
     await session.assertHasRedbox()
 
     const stack = await getStackFramesContent(browser)
-    expect(stack).toMatchInlineSnapshot(
-      `"at getServerSideProps (pages/index.js (8:3))"`
-    )
+    expect(stack).toMatchInlineSnapshot(`
+     "at createURL (pages/index.js (4:3))
+     at getServerSideProps (pages/index.js (8:3))"
+    `)
 
     await toggleCollapseCallStackFrames(browser)
     const stackCollapsed = await getStackFramesContent(browser)