From 2334de2bde105534f82086d1da14875dbf1045a2 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 16 Jan 2025 01:21:42 +0900
Subject: [PATCH] [DevOverlay] Enable new UI when PPR testing is enabled

---
 .github/workflows/build_and_test.yml          |   6 +-
 .../webpack/plugins/define-env-plugin.ts      |   6 +-
 .../_experimental/app/error-boundary.tsx      |  28 +-
 .../_experimental/app/react-dev-overlay.tsx   |  55 ++--
 .../components/code-frame/code-frame.tsx      |   4 +-
 .../dev-tools-indicator.tsx                   |   7 +-
 .../internal/next-logo.tsx                    |   3 +-
 .../internal/components/terminal/terminal.tsx |   4 +-
 .../_experimental/pages/error-boundary.tsx    |  10 +-
 .../_experimental/pages/react-dev-overlay.tsx |  63 ++--
 .../internal/container/RuntimeError/index.tsx |   2 +-
 .../acceptance-app/ReactRefreshLogBox.test.ts |  36 ++-
 .../acceptance/ReactRefreshLogBox.test.ts     |  24 +-
 .../capture-console-error-owner-stack.test.ts | 272 +++++++++---------
 .../capture-console-error.test.ts             | 262 +++++++++--------
 .../app-dir/dynamic-error-trace/index.test.ts |   5 +-
 .../error-ignored-frames.test.ts              | 270 ++++++++---------
 .../invalid-element-type.test.ts              |  24 +-
 .../owner-stack-invalid-element-type.test.ts  |  36 ++-
 ...owner-stack-react-missing-key-prop.test.ts |  24 +-
 .../react-missing-key-prop.test.ts            |  16 +-
 .../app-dir/owner-stack/owner-stack.test.ts   | 199 ++++++++-----
 .../prerender-indicator.test.ts               |  54 ++--
 ...r-component-next-dynamic-ssr-false.test.ts |  48 +++-
 .../app-dir/ssr-in-rsc/ssr-in-rsc.test.ts     |  32 ++-
 .../error-on-next-codemod-comment.test.ts     |  47 ++-
 .../non-root-project-monorepo.test.ts         |  22 +-
 .../use-cache-unknown-cache-kind.test.ts      |  43 ++-
 .../use-cache-without-dynamic-io.test.ts      |  95 ++++--
 test/lib/next-test-utils.ts                   |  91 +++++-
 30 files changed, 1134 insertions(+), 654 deletions(-)

diff --git a/.github/workflows/build_and_test.yml b/.github/workflows/build_and_test.yml
index f750f6c673c65..0936964a0749f 100644
--- a/.github/workflows/build_and_test.yml
+++ b/.github/workflows/build_and_test.yml
@@ -578,7 +578,7 @@ jobs:
     uses: ./.github/workflows/build_reusable.yml
     with:
       nodeVersion: 18.18.2
-      afterBuild: __NEXT_EXPERIMENTAL_PPR=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
+      afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" node run-tests.js --timings -c ${TEST_CONCURRENCY} --type integration
       stepName: 'test-ppr-integration'
     secrets: inherit
 
@@ -593,7 +593,7 @@ jobs:
         group: [1/6, 2/6, 3/6, 4/6, 5/6, 6/6]
     uses: ./.github/workflows/build_reusable.yml
     with:
-      afterBuild: __NEXT_EXPERIMENTAL_PPR=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
+      afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=dev node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type development
       stepName: 'test-ppr-dev-${{ matrix.group }}'
     secrets: inherit
 
@@ -608,7 +608,7 @@ jobs:
         group: [1/7, 2/7, 3/7, 4/7, 5/7, 6/7, 7/7]
     uses: ./.github/workflows/build_reusable.yml
     with:
-      afterBuild: __NEXT_EXPERIMENTAL_PPR=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
+      afterBuild: __NEXT_EXPERIMENTAL_PPR=true __NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY=true NEXT_EXTERNAL_TESTS_FILTERS="test/ppr-tests-manifest.json" NEXT_TEST_MODE=start node run-tests.js --timings -g ${{ matrix.group }} -c ${TEST_CONCURRENCY} --type production
       stepName: 'test-ppr-prod-${{ matrix.group }}'
     secrets: inherit
 
diff --git a/packages/next/src/build/webpack/plugins/define-env-plugin.ts b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
index 417df966c57a0..f15fb1c4b0c83 100644
--- a/packages/next/src/build/webpack/plugins/define-env-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/define-env-plugin.ts
@@ -286,7 +286,11 @@ export function getDefineEnv({
         }
       : undefined),
     'process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY':
-      config.experimental.newDevOverlay ?? false,
+      // When `__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY` is set on CI,
+      // we need to pass it here so it can be enabled.
+      process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true' ||
+      config.experimental.newDevOverlay ||
+      false,
   }
 
   const userDefines = config.compiler?.define ?? {}
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx
index 804918cda20ab..799d73a03892a 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx
@@ -3,13 +3,14 @@ import type { GlobalErrorComponent } from '../../../error-boundary'
 import { PureComponent } from 'react'
 import { RuntimeErrorHandler } from '../../../errors/runtime-error-handler'
 
-type DevToolsErrorBoundaryProps = {
+type DevOverlayErrorBoundaryProps = {
   children: React.ReactNode
-  onError: (value: boolean) => void
+  devOverlay: React.ReactNode
   globalError: [GlobalErrorComponent, React.ReactNode]
+  onError: (value: boolean) => void
 }
 
-type DevToolsErrorBoundaryState = {
+type DevOverlayErrorBoundaryState = {
   isReactError: boolean
   reactError: unknown
 }
@@ -37,9 +38,9 @@ function ErroredHtml({
   )
 }
 
-export class DevToolsErrorBoundary extends PureComponent<
-  DevToolsErrorBoundaryProps,
-  DevToolsErrorBoundaryState
+export class DevOverlayErrorBoundary extends PureComponent<
+  DevOverlayErrorBoundaryProps,
+  DevOverlayErrorBoundaryState
 > {
   state = { isReactError: false, reactError: null }
 
@@ -61,13 +62,18 @@ export class DevToolsErrorBoundary extends PureComponent<
   }
 
   render() {
+    const { children, globalError, devOverlay } = this.props
+    const { isReactError, reactError } = this.state
+
     const fallback = (
-      <ErroredHtml
-        globalError={this.props.globalError}
-        error={this.state.reactError}
-      />
+      <ErroredHtml globalError={globalError} error={reactError} />
     )
 
-    return this.state.isReactError ? fallback : this.props.children
+    return (
+      <>
+        {isReactError ? fallback : children}
+        {devOverlay}
+      </>
+    )
   }
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx
index 589d0a56a157b..fbcac3085401d 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx
@@ -2,7 +2,7 @@ import type { OverlayState } from '../../shared'
 import type { GlobalErrorComponent } from '../../../error-boundary'
 
 import { useState } from 'react'
-import { DevToolsErrorBoundary } from './error-boundary'
+import { DevOverlayErrorBoundary } from './error-boundary'
 import { ShadowPortal } from '../internal/components/shadow-portal'
 import { Base } from '../internal/styles/base'
 import { ComponentStyles } from '../internal/styles/component-styles'
@@ -24,34 +24,35 @@ export default function ReactDevOverlay({
   const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(false)
   const { readyErrors } = useErrorHook({ errors: state.errors, isAppDir: true })
 
-  return (
-    <>
-      <DevToolsErrorBoundary
-        onError={setIsErrorOverlayOpen}
-        globalError={globalError}
-      >
-        {children}
-      </DevToolsErrorBoundary>
+  const devOverlay = (
+    <ShadowPortal>
+      <CssReset />
+      <Base />
+      <Colors />
+      <ComponentStyles />
 
-      <ShadowPortal>
-        <CssReset />
-        <Base />
-        <Colors />
-        <ComponentStyles />
+      <DevToolsIndicator
+        state={state}
+        readyErrorsLength={readyErrors.length}
+        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+      />
 
-        <DevToolsIndicator
-          state={state}
-          readyErrorsLength={readyErrors.length}
-          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-        />
+      <ErrorOverlay
+        state={state}
+        readyErrors={readyErrors}
+        isErrorOverlayOpen={isErrorOverlayOpen}
+        setIsErrorOverlayOpen={setIsErrorOverlayOpen}
+      />
+    </ShadowPortal>
+  )
 
-        <ErrorOverlay
-          state={state}
-          readyErrors={readyErrors}
-          isErrorOverlayOpen={isErrorOverlayOpen}
-          setIsErrorOverlayOpen={setIsErrorOverlayOpen}
-        />
-      </ShadowPortal>
-    </>
+  return (
+    <DevOverlayErrorBoundary
+      devOverlay={devOverlay}
+      globalError={globalError}
+      onError={setIsErrorOverlayOpen}
+    >
+      {children}
+    </DevOverlayErrorBoundary>
   )
 }
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx
index ee870c4b0bc4f..e26a42e109526 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx
+++ b/packages/next/src/client/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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
index e238741f80d85..a281ee3f099f9 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_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/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx
index d669d16b5b237..125168b061061 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx
@@ -301,7 +301,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-collapse
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx
index 9b9948924e8d2..0125641b8f5dc 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.tsx
+++ b/packages/next/src/client/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/packages/next/src/client/components/react-dev-overlay/_experimental/pages/error-boundary.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/pages/error-boundary.tsx
index 8eda7feccdfae..92ef7b7db7013 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/pages/error-boundary.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/pages/error-boundary.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react'
 
-type DevToolsErrorBoundaryProps = {
+type DevOverlayErrorBoundaryProps = {
   children?: React.ReactNode
   onError: (error: Error, componentStack: string | null) => void
   isMounted?: boolean
 }
-type DevToolsErrorBoundaryState = { error: Error | null }
+type DevOverlayErrorBoundaryState = { error: Error | null }
 
-export class DevToolsErrorBoundary extends React.PureComponent<
-  DevToolsErrorBoundaryProps,
-  DevToolsErrorBoundaryState
+export class DevOverlayErrorBoundary extends React.PureComponent<
+  DevOverlayErrorBoundaryProps,
+  DevOverlayErrorBoundaryState
 > {
   state = { error: null }
 
diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx
index 7cf676c91ff18..72246638322a2 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx
@@ -6,7 +6,7 @@ import { Base } from '../internal/styles/base'
 import { ComponentStyles } from '../internal/styles/component-styles'
 import { CssReset } from '../internal/styles/css-reset'
 
-import { DevToolsErrorBoundary } from './error-boundary'
+import { DevOverlayErrorBoundary } from './error-boundary'
 import { usePagesReactDevOverlay } from '../../pages/hooks'
 import { Colors } from '../internal/styles/colors'
 import { ErrorOverlay } from '../internal/components/errors/error-overlay/error-overlay'
@@ -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}>
+      <DevOverlayErrorBoundary 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>
+      </DevOverlayErrorBoundary>
+
+      {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/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx b/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
index d1dfabbbac359..cb4b88b5bd1ff 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx
+++ b/packages/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
index ef1623a5671b0..ab425f3519000 100644
--- 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
index 643a7b54f23d6..66f748ce99405 100644
--- 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)
diff --git a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts
index d4f3395677ec5..196b009b1e247 100644
--- a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts
+++ b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts
@@ -42,45 +42,49 @@ describe('app-dir - capture-console-error-owner-stack', () => {
     // TODO(veil): Inconsistent cursor position for the "Page" frame
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "button
-        <anonymous> (0:0)
-        Page
-        app/browser/event/page.js (5:5)",
-          "count": 1,
-          "description": "trigger an console <error>",
-          "source": "app/browser/event/page.js (7:17) @ onClick
-
-           5 |     <button
-           6 |       onClick={() => {
-        >  7 |         console.error('trigger an console <%s>', 'error')
-             |                 ^
-           8 |       }}
-           9 |     >
-          10 |       click to error",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "onClick
+       app/browser/event/page.js (7:17)
+       button
+       <anonymous> (0:0)
+       Page
+       app/browser/event/page.js (5:5)",
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ onClick
+
+          5 |     <button
+          6 |       onClick={() => {
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^
+          8 |       }}
+          9 |     >
+         10 |       click to error",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "button
-        <anonymous> (0:0)
-        Page
-        app/browser/event/page.js (5:6)",
-          "count": 1,
-          "description": "trigger an console <error>",
-          "source": "app/browser/event/page.js (7:17) @ onClick
-
-           5 |     <button
-           6 |       onClick={() => {
-        >  7 |         console.error('trigger an console <%s>', 'error')
-             |                 ^
-           8 |       }}
-           9 |     >
-          10 |       click to error",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "onClick
+       app/browser/event/page.js (7:17)
+       button
+       <anonymous> (0:0)
+       Page
+       app/browser/event/page.js (5:6)",
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ onClick
+
+          5 |     <button
+          6 |       onClick={() => {
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^
+          8 |       }}
+          9 |     >
+         10 |       click to error",
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -92,21 +96,22 @@ describe('app-dir - capture-console-error-owner-stack', () => {
 
     const result = await getRedboxResult(browser)
     expect(result).toMatchInlineSnapshot(`
-       {
-         "callStacks": "",
-         "count": 1,
-         "description": "trigger an console.error in render",
-         "source": "app/browser/render/page.js (4:11) @ Page
-
-         2 |
-         3 | export default function Page() {
-       > 4 |   console.error('trigger an console.error in render')
-           |           ^
-         5 |   return <p>render</p>
-         6 | }
-         7 |",
-         "title": "Console Error",
-       }
+     {
+       "callStacks": "Page
+     app/browser/render/page.js (4:11)",
+       "count": 1,
+       "description": "trigger an console.error in render",
+       "source": "app/browser/render/page.js (4:11) @ Page
+
+       2 |
+       3 | export default function Page() {
+     > 4 |   console.error('trigger an console.error in render')
+         |           ^
+       5 |   return <p>render</p>
+       6 | }
+       7 |",
+       "title": "Console Error",
+     }
     `)
   })
 
@@ -117,21 +122,22 @@ describe('app-dir - capture-console-error-owner-stack', () => {
 
     const result = await getRedboxResult(browser)
     expect(result).toMatchInlineSnapshot(`
-      {
-        "callStacks": "",
-        "count": 1,
-        "description": "trigger an console.error in render",
-        "source": "app/browser/render/page.js (4:11) @ Page
-
-        2 |
-        3 | export default function Page() {
-      > 4 |   console.error('trigger an console.error in render')
-          |           ^
-        5 |   return <p>render</p>
-        6 | }
-        7 |",
-        "title": "Console Error",
-      }
+     {
+       "callStacks": "Page
+     app/browser/render/page.js (4:11)",
+       "count": 1,
+       "description": "trigger an console.error in render",
+       "source": "app/browser/render/page.js (4:11) @ Page
+
+       2 |
+       3 | export default function Page() {
+     > 4 |   console.error('trigger an console.error in render')
+         |           ^
+       5 |   return <p>render</p>
+       6 | }
+       7 |",
+       "title": "Console Error",
+     }
     `)
   })
 
@@ -142,21 +148,22 @@ describe('app-dir - capture-console-error-owner-stack', () => {
 
     const result = await getRedboxResult(browser)
     expect(result).toMatchInlineSnapshot(`
-       {
-         "callStacks": "",
-         "count": 1,
-         "description": "ssr console error:client",
-         "source": "app/ssr/page.js (4:11) @ Page
-
-         2 |
-         3 | export default function Page() {
-       > 4 |   console.error(
-           |           ^
-         5 |     'ssr console error:' + (typeof window === 'undefined' ? 'server' : 'client')
-         6 |   )
-         7 |   return <p>ssr</p>",
-         "title": "Console Error",
-       }
+     {
+       "callStacks": "Page
+     app/ssr/page.js (4:11)",
+       "count": 1,
+       "description": "ssr console error:client",
+       "source": "app/ssr/page.js (4:11) @ Page
+
+       2 |
+       3 | export default function Page() {
+     > 4 |   console.error(
+         |           ^
+       5 |     'ssr console error:' + (typeof window === 'undefined' ? 'server' : 'client')
+       6 |   )
+       7 |   return <p>ssr</p>",
+       "title": "Console Error",
+     }
     `)
   })
 
@@ -168,21 +175,22 @@ describe('app-dir - capture-console-error-owner-stack', () => {
     const result = await getRedboxResult(browser)
 
     expect(result).toMatchInlineSnapshot(`
-      {
-        "callStacks": "",
-        "count": 1,
-        "description": "Error: page error",
-        "source": "app/ssr-error-instance/page.js (4:17) @ Page
-
-        2 |
-        3 | export default function Page() {
-      > 4 |   console.error(new Error('page error'))
-          |                 ^
-        5 |   return <p>ssr</p>
-        6 | }
-        7 |",
-        "title": "Console Error",
-      }
+     {
+       "callStacks": "Page
+     app/ssr-error-instance/page.js (4:17)",
+       "count": 1,
+       "description": "Error: page error",
+       "source": "app/ssr-error-instance/page.js (4:17) @ Page
+
+       2 |
+       3 | export default function Page() {
+     > 4 |   console.error(new Error('page error'))
+         |                 ^
+       5 |   return <p>ssr</p>
+       6 | }
+       7 |",
+       "title": "Console Error",
+     }
     `)
   })
 
@@ -195,43 +203,47 @@ describe('app-dir - capture-console-error-owner-stack', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "JSON.parse
-        <anonymous> (0:0)
-        Page
-        <anonymous> (0:0)",
-          "count": 1,
-          "description": "[ Server ] Error: boom",
-          "source": "app/rsc/page.js (2:17) @ Page
-
-          1 | export default function Page() {
-        > 2 |   console.error(new Error('boom'))
-            |                 ^
-          3 |   return <p>rsc</p>
-          4 | }
-          5 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/rsc/page.js (2:17)
+       JSON.parse
+       <anonymous> (0:0)
+       Page
+       <anonymous> (0:0)",
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+
+         1 | export default function Page() {
+       > 2 |   console.error(new Error('boom'))
+           |                 ^
+         3 |   return <p>rsc</p>
+         4 | }
+         5 |",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "JSON.parse
-        <anonymous> (0:0)
-        Page
-        <anonymous> (0:0)",
-          "count": 1,
-          "description": "[ Server ] Error: boom",
-          "source": "app/rsc/page.js (2:17) @ Page
-
-          1 | export default function Page() {
-        > 2 |   console.error(new Error('boom'))
-            |                 ^
-          3 |   return <p>rsc</p>
-          4 | }
-          5 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/rsc/page.js (2:17)
+       JSON.parse
+       <anonymous> (0:0)
+       Page
+       <anonymous> (0:0)",
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+
+         1 | export default function Page() {
+       > 2 |   console.error(new Error('boom'))
+           |                 ^
+         3 |   return <p>rsc</p>
+         4 | }
+         5 |",
+         "title": "Console Error",
+       }
       `)
     }
   })
diff --git a/test/development/app-dir/capture-console-error/capture-console-error.test.ts b/test/development/app-dir/capture-console-error/capture-console-error.test.ts
index 35c6cc68462e0..915a4816d7db8 100644
--- a/test/development/app-dir/capture-console-error/capture-console-error.test.ts
+++ b/test/development/app-dir/capture-console-error/capture-console-error.test.ts
@@ -51,26 +51,28 @@ describe('app-dir - capture-console-error', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 1,
-          "description": "trigger an console <error>",
-          "source": "app/browser/event/page.js (7:17) @ onClick
-
-           5 |     <button
-           6 |       onClick={() => {
-        >  7 |         console.error('trigger an console <%s>', 'error')
-             |                 ^
-           8 |       }}
-           9 |     >
-          10 |       click to error",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "onClick
+       app/browser/event/page.js (7:17)",
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ onClick
+
+          5 |     <button
+          6 |       onClick={() => {
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^
+          8 |       }}
+          9 |     >
+         10 |       click to error",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
        {
-         "callStacks": "",
+         "callStacks": "onClick
+       app/browser/event/page.js (7:17)",
          "count": 1,
          "description": "trigger an console <error>",
          "source": "app/browser/event/page.js (7:17) @ onClick
@@ -97,26 +99,28 @@ describe('app-dir - capture-console-error', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "trigger an console.error in render",
-          "source": "app/browser/render/page.js (4:11) @ Page
-
-          2 |
-          3 | export default function Page() {
-        > 4 |   console.error('trigger an console.error in render')
-            |           ^
-          5 |   return <p>render</p>
-          6 | }
-          7 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/browser/render/page.js (4:11)",
+         "count": 2,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ Page
+
+         2 |
+         3 | export default function Page() {
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^
+         5 |   return <p>render</p>
+         6 | }
+         7 |",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
        {
-         "callStacks": "",
+         "callStacks": "Page
+       app/browser/render/page.js (4:11)",
          "count": 2,
          "description": "trigger an console.error in render",
          "source": "app/browser/render/page.js (4:11) @ Page
@@ -143,26 +147,28 @@ describe('app-dir - capture-console-error', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "trigger an console.error in render",
-          "source": "app/browser/render/page.js (4:11) @ Page
-
-          2 |
-          3 | export default function Page() {
-        > 4 |   console.error('trigger an console.error in render')
-            |           ^
-          5 |   return <p>render</p>
-          6 | }
-          7 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/browser/render/page.js (4:11)",
+         "count": 2,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ Page
+
+         2 |
+         3 | export default function Page() {
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^
+         5 |   return <p>render</p>
+         6 | }
+         7 |",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
        {
-         "callStacks": "",
+         "callStacks": "Page
+       app/browser/render/page.js (4:11)",
          "count": 2,
          "description": "trigger an console.error in render",
          "source": "app/browser/render/page.js (4:11) @ Page
@@ -189,26 +195,28 @@ describe('app-dir - capture-console-error', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "ssr console error:client",
-          "source": "app/ssr/page.js (4:11) @ Page
-
-          2 |
-          3 | export default function Page() {
-        > 4 |   console.error(
-            |           ^
-          5 |     'ssr console error:' + (typeof window === 'undefined' ? 'server' : 'client')
-          6 |   )
-          7 |   return <p>ssr</p>",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/ssr/page.js (4:11)",
+         "count": 2,
+         "description": "ssr console error:client",
+         "source": "app/ssr/page.js (4:11) @ Page
+
+         2 |
+         3 | export default function Page() {
+       > 4 |   console.error(
+           |           ^
+         5 |     'ssr console error:' + (typeof window === 'undefined' ? 'server' : 'client')
+         6 |   )
+         7 |   return <p>ssr</p>",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
        {
-         "callStacks": "",
+         "callStacks": "Page
+       app/ssr/page.js (4:11)",
          "count": 2,
          "description": "ssr console error:client",
          "source": "app/ssr/page.js (4:11) @ Page
@@ -235,39 +243,41 @@ describe('app-dir - capture-console-error', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "Error: page error",
-          "source": "app/ssr-error-instance/page.js (4:17) @ Page
-
-          2 |
-          3 | export default function Page() {
-        > 4 |   console.error(new Error('page error'))
-            |                 ^
-          5 |   return <p>ssr</p>
-          6 | }
-          7 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/ssr-error-instance/page.js (4:17)",
+         "count": 2,
+         "description": "Error: page error",
+         "source": "app/ssr-error-instance/page.js (4:17) @ Page
+
+         2 |
+         3 | export default function Page() {
+       > 4 |   console.error(new Error('page error'))
+           |                 ^
+         5 |   return <p>ssr</p>
+         6 | }
+         7 |",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "Error: page error",
-          "source": "app/ssr-error-instance/page.js (4:17) @ Page
-
-          2 |
-          3 | export default function Page() {
-        > 4 |   console.error(new Error('page error'))
-            |                 ^
-          5 |   return <p>ssr</p>
-          6 | }
-          7 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/ssr-error-instance/page.js (4:17)",
+         "count": 2,
+         "description": "Error: page error",
+         "source": "app/ssr-error-instance/page.js (4:17) @ Page
+
+         2 |
+         3 | export default function Page() {
+       > 4 |   console.error(new Error('page error'))
+           |                 ^
+         5 |   return <p>ssr</p>
+         6 | }
+         7 |",
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -281,39 +291,43 @@ describe('app-dir - capture-console-error', () => {
 
     if (process.env.TURBOPACK) {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "JSON.parse
-        <anonymous> (0:0)",
-          "count": 1,
-          "description": "[ Server ] Error: boom",
-          "source": "app/rsc/page.js (2:17) @ Page
-
-          1 | export default function Page() {
-        > 2 |   console.error(new Error('boom'))
-            |                 ^
-          3 |   return <p>rsc</p>
-          4 | }
-          5 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/rsc/page.js (2:17)
+       JSON.parse
+       <anonymous> (0:0)",
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+
+         1 | export default function Page() {
+       > 2 |   console.error(new Error('boom'))
+           |                 ^
+         3 |   return <p>rsc</p>
+         4 | }
+         5 |",
+         "title": "Console Error",
+       }
       `)
     } else {
       expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "JSON.parse
-        <anonymous> (0:0)",
-          "count": 1,
-          "description": "[ Server ] Error: boom",
-          "source": "app/rsc/page.js (2:17) @ Page
-
-          1 | export default function Page() {
-        > 2 |   console.error(new Error('boom'))
-            |                 ^
-          3 |   return <p>rsc</p>
-          4 | }
-          5 |",
-          "title": "Console Error",
-        }
+       {
+         "callStacks": "Page
+       app/rsc/page.js (2:17)
+       JSON.parse
+       <anonymous> (0:0)",
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+
+         1 | export default function Page() {
+       > 2 |   console.error(new Error('boom'))
+           |                 ^
+         3 |   return <p>rsc</p>
+         4 | }
+         5 |",
+         "title": "Console Error",
+       }
       `)
     }
   })
diff --git a/test/development/app-dir/dynamic-error-trace/index.test.ts b/test/development/app-dir/dynamic-error-trace/index.test.ts
index 5606e504402a8..59192f0dba2d9 100644
--- a/test/development/app-dir/dynamic-error-trace/index.test.ts
+++ b/test/development/app-dir/dynamic-error-trace/index.test.ts
@@ -35,7 +35,10 @@ describe('app dir - dynamic error trace', () => {
 
     // TODO: Show useful stack
     const normalizedStack = normalizeStackTrace(stackFramesContent)
-    expect(normalizedStack).toMatchInlineSnapshot(`""`)
+    expect(normalizedStack).toMatchInlineSnapshot(`
+     "Foo
+     app/lib.js"
+    `)
 
     const codeframe = await getRedboxSource(browser)
     expect(codeframe).toEqual(
diff --git a/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts b/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts
index e710e96476bfd..c49d3d4250306 100644
--- a/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts
+++ b/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts
@@ -26,24 +26,26 @@ describe('error-ignored-frames', () => {
     await assertHasRedbox(browser)
 
     const defaultStack = await getStackFramesContent(browser)
-    expect(defaultStack).toMatchInlineSnapshot(`""`)
+    expect(defaultStack).toMatchInlineSnapshot(`"at Page (app/page.tsx (2:9))"`)
 
     await toggleCollapseCallStackFrames(browser)
 
     const expendedStack = await getStackFramesContent(browser)
     if (process.env.TURBOPACK) {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at resolveErrorDev ()
-        at processFullStringRow ()
-        at processFullBinaryRow ()
-        at progress ()"
+       "at Page (app/page.tsx (2:9))
+       at resolveErrorDev ()
+       at processFullStringRow ()
+       at processFullBinaryRow ()
+       at progress ()"
       `)
     } else {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at resolveErrorDev ()
-        at processFullStringRow ()
-        at processFullBinaryRow ()
-        at progress ()"
+       "at Page (app/page.tsx (2:9))
+       at resolveErrorDev ()
+       at processFullStringRow ()
+       at processFullBinaryRow ()
+       at progress ()"
       `)
     }
   })
@@ -53,38 +55,42 @@ describe('error-ignored-frames', () => {
     await assertHasRedbox(browser)
 
     const defaultStack = await getStackFramesContent(browser)
-    expect(defaultStack).toMatchInlineSnapshot(`""`)
+    expect(defaultStack).toMatchInlineSnapshot(
+      `"at Page (app/client/page.tsx (4:9))"`
+    )
 
     await toggleCollapseCallStackFrames(browser)
 
     const expendedStack = await getStackFramesContent(browser)
     if (process.env.TURBOPACK) {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at react-stack-bottom-frame ()
-        at renderWithHooks ()
-        at updateFunctionComponent ()
-        at beginWork ()
-        at runWithFiberInDEV ()
-        at performUnitOfWork ()
-        at workLoopSync ()
-        at renderRootSync ()
-        at performWorkOnRoot ()
-        at performWorkOnRootViaSchedulerTask ()
-        at MessagePort.performWorkUntilDeadline ()"
+       "at Page (app/client/page.tsx (4:9))
+       at react-stack-bottom-frame ()
+       at renderWithHooks ()
+       at updateFunctionComponent ()
+       at beginWork ()
+       at runWithFiberInDEV ()
+       at performUnitOfWork ()
+       at workLoopSync ()
+       at renderRootSync ()
+       at performWorkOnRoot ()
+       at performWorkOnRootViaSchedulerTask ()
+       at MessagePort.performWorkUntilDeadline ()"
       `)
     } else {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at react-stack-bottom-frame ()
-        at renderWithHooks ()
-        at updateFunctionComponent ()
-        at beginWork ()
-        at runWithFiberInDEV ()
-        at performUnitOfWork ()
-        at workLoopSync ()
-        at renderRootSync ()
-        at performWorkOnRoot ()
-        at performWorkOnRootViaSchedulerTask ()
-        at MessagePort.performWorkUntilDeadline ()"
+       "at Page (app/client/page.tsx (4:9))
+       at react-stack-bottom-frame ()
+       at renderWithHooks ()
+       at updateFunctionComponent ()
+       at beginWork ()
+       at runWithFiberInDEV ()
+       at performUnitOfWork ()
+       at workLoopSync ()
+       at renderRootSync ()
+       at performWorkOnRoot ()
+       at performWorkOnRootViaSchedulerTask ()
+       at MessagePort.performWorkUntilDeadline ()"
       `)
     }
   })
@@ -95,13 +101,15 @@ describe('error-ignored-frames', () => {
 
     const defaultStack = await getStackFramesContent(browser)
     if (process.env.TURBOPACK) {
-      expect(defaultStack).toMatchInlineSnapshot(
-        `"at Page (app/interleaved/page.tsx (6:35))"`
-      )
+      expect(defaultStack).toMatchInlineSnapshot(`
+       "at <unknown> (app/interleaved/page.tsx (7:11))
+       at Page (app/interleaved/page.tsx (6:35))"
+      `)
     } else {
-      expect(defaultStack).toMatchInlineSnapshot(
-        `"at Page (app/interleaved/page.tsx (6:37))"`
-      )
+      expect(defaultStack).toMatchInlineSnapshot(`
+       "at eval (app/interleaved/page.tsx (7:11))
+       at Page (app/interleaved/page.tsx (6:37))"
+      `)
     }
 
     await toggleCollapseCallStackFrames(browser)
@@ -109,35 +117,37 @@ describe('error-ignored-frames', () => {
     const expendedStack = await getStackFramesContent(browser)
     if (process.env.TURBOPACK) {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at invokeCallback ()
-        at Page (app/interleaved/page.tsx (6:35))
-        at react-stack-bottom-frame ()
-        at renderWithHooks ()
-        at updateFunctionComponent ()
-        at beginWork ()
-        at runWithFiberInDEV ()
-        at performUnitOfWork ()
-        at workLoopSync ()
-        at renderRootSync ()
-        at performWorkOnRoot ()
-        at performWorkOnRootViaSchedulerTask ()
-        at MessagePort.performWorkUntilDeadline ()"
+       "at <unknown> (app/interleaved/page.tsx (7:11))
+       at invokeCallback ()
+       at Page (app/interleaved/page.tsx (6:35))
+       at react-stack-bottom-frame ()
+       at renderWithHooks ()
+       at updateFunctionComponent ()
+       at beginWork ()
+       at runWithFiberInDEV ()
+       at performUnitOfWork ()
+       at workLoopSync ()
+       at renderRootSync ()
+       at performWorkOnRoot ()
+       at performWorkOnRootViaSchedulerTask ()
+       at MessagePort.performWorkUntilDeadline ()"
       `)
     } else {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at invokeCallback (node_modules/interleave/index.js (2:1))
-        at Page (app/interleaved/page.tsx (6:37))
-        at react-stack-bottom-frame ()
-        at renderWithHooks ()
-        at updateFunctionComponent ()
-        at beginWork ()
-        at runWithFiberInDEV ()
-        at performUnitOfWork ()
-        at workLoopSync ()
-        at renderRootSync ()
-        at performWorkOnRoot ()
-        at performWorkOnRootViaSchedulerTask ()
-        at MessagePort.performWorkUntilDeadline ()"
+       "at eval (app/interleaved/page.tsx (7:11))
+       at invokeCallback (node_modules/interleave/index.js (2:1))
+       at Page (app/interleaved/page.tsx (6:37))
+       at react-stack-bottom-frame ()
+       at renderWithHooks ()
+       at updateFunctionComponent ()
+       at beginWork ()
+       at runWithFiberInDEV ()
+       at performUnitOfWork ()
+       at workLoopSync ()
+       at renderRootSync ()
+       at performWorkOnRoot ()
+       at performWorkOnRootViaSchedulerTask ()
+       at MessagePort.performWorkUntilDeadline ()"
       `)
     }
   })
@@ -147,79 +157,83 @@ describe('error-ignored-frames', () => {
     await assertHasRedbox(browser)
 
     const defaultStack = await getStackFramesContent(browser)
-    expect(defaultStack).toMatchInlineSnapshot(`""`)
+    expect(defaultStack).toMatchInlineSnapshot(
+      `"at Page (pages/pages.tsx (2:9))"`
+    )
 
     await toggleCollapseCallStackFrames(browser)
 
     const expendedStack = await getStackFramesContent(browser)
     if (process.env.TURBOPACK) {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at react-stack-bottom-frame ()
-        at renderWithHooks ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at finishFunctionComponent ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderNode ()
-        at renderChildrenArray ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderNode ()
-        at renderChildrenArray ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at finishFunctionComponent ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()"
+       "at Page (pages/pages.tsx (2:9))
+       at react-stack-bottom-frame ()
+       at renderWithHooks ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at finishFunctionComponent ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderNode ()
+       at renderChildrenArray ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderNode ()
+       at renderChildrenArray ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at finishFunctionComponent ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()"
       `)
     } else {
       expect(expendedStack).toMatchInlineSnapshot(`
-        "at react-stack-bottom-frame ()
-        at renderWithHooks ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at finishFunctionComponent ()
-        at renderElement ()
-        at retryNode ()
-        at renderNodeDestructive ()
-        at renderNode ()
-        at renderChildrenArray ()"
+       "at Page (pages/pages.tsx (2:9))
+       at react-stack-bottom-frame ()
+       at renderWithHooks ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at finishFunctionComponent ()
+       at renderElement ()
+       at retryNode ()
+       at renderNodeDestructive ()
+       at renderNode ()
+       at renderChildrenArray ()"
       `)
     }
   })
diff --git a/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts b/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts
index dc29a1d0eaa08..6d09427fff1bb 100644
--- a/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts
+++ b/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts
@@ -25,7 +25,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
 
       const stackFramesContent = await getStackFramesContent(browser)
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at BrowserOnly (app/browser/browser-only.js (8:7))"`
+        )
         expect(source).toMatchInlineSnapshot(`
           "app/browser/browser-only.js (8:7) @ BrowserOnly
 
@@ -38,7 +40,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
             11 | }"
         `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at BrowserOnly (app/browser/browser-only.js (8:8))"`
+        )
         expect(source).toMatchInlineSnapshot(`
          "app/browser/browser-only.js (8:8) @ BrowserOnly
 
@@ -61,7 +65,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
       const source = await getRedboxSource(browser)
 
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Inner (app/rsc/page.js (5:11))"`
+        )
         expect(source).toMatchInlineSnapshot(`
           "app/rsc/page.js (5:11) @ Inner
 
@@ -74,7 +80,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
             8 | export default function Page() {"
         `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Inner (app/rsc/page.js (5:11))"`
+        )
         expect(source).toMatchInlineSnapshot(`
          "app/rsc/page.js (5:11) @ Inner
 
@@ -97,7 +105,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Inner (app/ssr/page.js (7:10))"`
+        )
         expect(source).toMatchInlineSnapshot(`
           "app/ssr/page.js (7:10) @ Inner
 
@@ -110,7 +120,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
             10 | export default function Page() {"
         `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Inner (app/ssr/page.js (7:11))"`
+        )
         expect(source).toMatchInlineSnapshot(`
          "app/ssr/page.js (7:11) @ Inner
 
diff --git a/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts b/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts
index bf7602578e163..ae51026dc960f 100644
--- a/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts
+++ b/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts
@@ -26,8 +26,9 @@ const isOwnerStackEnabled =
       const stackFramesContent = await getStackFramesContent(browser)
       if (process.env.TURBOPACK) {
         expect(stackFramesContent).toMatchInlineSnapshot(`
-          "at Inner (app/browser/page.js (11:10))
-          at Page (app/browser/page.js (15:10))"
+         "at BrowserOnly (app/browser/browser-only.js (8:7))
+         at Inner (app/browser/page.js (11:10))
+         at Page (app/browser/page.js (15:10))"
         `)
         expect(source).toMatchInlineSnapshot(`
           "app/browser/browser-only.js (8:7) @ BrowserOnly
@@ -42,7 +43,8 @@ const isOwnerStackEnabled =
         `)
       } else {
         expect(stackFramesContent).toMatchInlineSnapshot(`
-         "at Inner (app/browser/page.js (11:11))
+         "at BrowserOnly (app/browser/browser-only.js (8:8))
+         at Inner (app/browser/page.js (11:11))
          at Page (app/browser/page.js (15:11))"
         `)
         expect(source).toMatchInlineSnapshot(`
@@ -67,9 +69,10 @@ const isOwnerStackEnabled =
       const source = await getRedboxSource(browser)
 
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(
-          `"at Page (app/rsc/page.js (11:8))"`
-        )
+        expect(stackFramesContent).toMatchInlineSnapshot(`
+         "at Inner (app/rsc/page.js (5:11))
+         at Page (app/rsc/page.js (11:8))"
+        `)
         expect(source).toMatchInlineSnapshot(`
           "app/rsc/page.js (5:11) @ Inner
 
@@ -82,9 +85,10 @@ const isOwnerStackEnabled =
             8 | export default function Page() {"
         `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(
-          `"at Page (app/rsc/page.js (11:8))"`
-        )
+        expect(stackFramesContent).toMatchInlineSnapshot(`
+         "at Inner (app/rsc/page.js (5:11))
+         at Page (app/rsc/page.js (11:8))"
+        `)
         expect(source).toMatchInlineSnapshot(`
          "app/rsc/page.js (5:11) @ Inner
 
@@ -107,9 +111,10 @@ const isOwnerStackEnabled =
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(
-          `"at Page (app/ssr/page.js (13:7))"`
-        )
+        expect(stackFramesContent).toMatchInlineSnapshot(`
+         "at Inner (app/ssr/page.js (7:10))
+         at Page (app/ssr/page.js (13:7))"
+        `)
         expect(source).toMatchInlineSnapshot(`
           "app/ssr/page.js (7:10) @ Inner
 
@@ -122,9 +127,10 @@ const isOwnerStackEnabled =
             10 | export default function Page() {"
         `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(
-          `"at Page (app/ssr/page.js (13:8))"`
-        )
+        expect(stackFramesContent).toMatchInlineSnapshot(`
+         "at Inner (app/ssr/page.js (7:11))
+         at Page (app/ssr/page.js (13:8))"
+        `)
         expect(source).toMatchInlineSnapshot(`
          "app/ssr/page.js (7:11) @ Inner
 
diff --git a/test/development/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts b/test/development/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts
index e68ed21f00c3a..f569643742890 100644
--- a/test/development/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts
+++ b/test/development/app-dir/owner-stack-react-missing-key-prop/owner-stack-react-missing-key-prop.test.ts
@@ -24,8 +24,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
 
       if (process.env.TURBOPACK) {
         expect(stackFramesContent).toMatchInlineSnapshot(`
-          "at span ()
-          at Page (app/rsc/page.tsx (6:13))"
+         "at span (<anonymous> (0:0))
+         at <anonymous> (app/rsc/page.tsx (7:10))
+         at Page (app/rsc/page.tsx (6:13))"
         `)
         expect(source).toMatchInlineSnapshot(`
           "app/rsc/page.tsx (7:10) @ <anonymous>
@@ -40,8 +41,9 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
         `)
       } else {
         expect(stackFramesContent).toMatchInlineSnapshot(`
-          "at span ()
-          at Page (app/rsc/page.tsx (6:13))"
+         "at span (<anonymous> (0:0))
+         at eval (app/rsc/page.tsx (7:10))
+         at Page (app/rsc/page.tsx (6:13))"
         `)
         expect(source).toMatchInlineSnapshot(`
           "app/rsc/page.tsx (7:10) @ eval
@@ -65,9 +67,10 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
       const source = await getRedboxSource(browser)
       if (process.env.TURBOPACK) {
         expect(stackFramesContent).toMatchInlineSnapshot(`
-          "at p ()
-          at Array.map ()
-          at Page (app/ssr/page.tsx (8:13))"
+         "at p (<anonymous> (0:0))
+         at <unknown> (app/ssr/page.tsx (9:9))
+         at Array.map (<anonymous> (0:0))
+         at Page (app/ssr/page.tsx (8:13))"
         `)
         expect(source).toMatchInlineSnapshot(`
           "app/ssr/page.tsx (9:9) @ <unknown>
@@ -82,9 +85,10 @@ const isOwnerStackEnabled = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
         `)
       } else {
         expect(stackFramesContent).toMatchInlineSnapshot(`
-          "at p ()
-          at Array.map ()
-          at Page (app/ssr/page.tsx (8:13))"
+         "at p (<anonymous> (0:0))
+         at eval (app/ssr/page.tsx (9:10))
+         at Array.map (<anonymous> (0:0))
+         at Page (app/ssr/page.tsx (8:13))"
         `)
         expect(source).toMatchInlineSnapshot(`
           "app/ssr/page.tsx (9:10) @ eval
diff --git a/test/development/app-dir/owner-stack-react-missing-key-prop/react-missing-key-prop.test.ts b/test/development/app-dir/owner-stack-react-missing-key-prop/react-missing-key-prop.test.ts
index 9f1fca4b1f2e0..d2c9aee2dae24 100644
--- a/test/development/app-dir/owner-stack-react-missing-key-prop/react-missing-key-prop.test.ts
+++ b/test/development/app-dir/owner-stack-react-missing-key-prop/react-missing-key-prop.test.ts
@@ -61,7 +61,9 @@ async function getStackFramesContent(browser) {
       const source = await getRedboxSource(browser)
 
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Page (app/rsc/page.tsx (5:6))"`
+        )
         expect(source).toMatchInlineSnapshot(`
          "app/rsc/page.tsx (5:6) @ Page
 
@@ -74,7 +76,9 @@ async function getStackFramesContent(browser) {
            8 |       ))}"
         `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Page (app/rsc/page.tsx (5:6))"`
+        )
         expect(source).toMatchInlineSnapshot(`
                  "app/rsc/page.tsx (5:6) @ Page
 
@@ -96,7 +100,9 @@ async function getStackFramesContent(browser) {
       const stackFramesContent = await getStackFramesContent(browser)
       const source = await getRedboxSource(browser)
       if (process.env.TURBOPACK) {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Page (app/ssr/page.tsx (7:5))"`
+        )
         expect(source).toMatchInlineSnapshot(`
                  "app/ssr/page.tsx (7:5) @ Page
 
@@ -109,7 +115,9 @@ async function getStackFramesContent(browser) {
                    10 |       ))}"
               `)
       } else {
-        expect(stackFramesContent).toMatchInlineSnapshot(`""`)
+        expect(stackFramesContent).toMatchInlineSnapshot(
+          `"at Page (app/ssr/page.tsx (7:6))"`
+        )
         expect(source).toMatchInlineSnapshot(`
                  "app/ssr/page.tsx (7:6) @ Page
 
diff --git a/test/development/app-dir/owner-stack/owner-stack.test.ts b/test/development/app-dir/owner-stack/owner-stack.test.ts
index f20dda06977d4..400a22c9052d4 100644
--- a/test/development/app-dir/owner-stack/owner-stack.test.ts
+++ b/test/development/app-dir/owner-stack/owner-stack.test.ts
@@ -49,6 +49,9 @@ describe('app-dir - owner-stack', () => {
     files: __dirname,
   })
 
+  const isNewDevOverlay =
+    process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
   it('should log stitched error for browser uncaught errors', async () => {
     const browser = await next.browser('/browser/uncaught')
 
@@ -56,53 +59,97 @@ describe('app-dir - owner-stack', () => {
 
     const stackFramesContent = await getStackFramesContent(browser)
     expect(stackFramesContent).toMatchInlineSnapshot(`
-       "at useErrorHook (app/browser/uncaught/page.js (10:3))
-       at Page (app/browser/uncaught/page.js (14:3))"
-      `)
+     "at useThrowError (app/browser/uncaught/page.js (5:11))
+     at useErrorHook (app/browser/uncaught/page.js (10:3))
+     at Page (app/browser/uncaught/page.js (14:3))"
+    `)
 
     const logs = await browser.log()
     const errorLog = logs.find((log) => {
       return log.message.includes('Error: browser error')
     }).message
 
-    if (process.env.TURBOPACK) {
-      expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
-        "%o
-        %s Error: browser error
-        at useThrowError 
-        at useErrorHook 
-        at Page 
-        at react-stack-bottom-frame 
-        at renderWithHooks 
-        at updateFunctionComponent 
-        at beginWork 
-        at runWithFiberInDEV 
-        at performUnitOfWork 
-        at workLoopSync 
-        at renderRootSync 
-        at performWorkOnRoot 
-        at performWorkOnRootViaSchedulerTask 
-        at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <ReactDevOverlay> error boundary."
+    // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+    if (isNewDevOverlay) {
+      if (process.env.TURBOPACK) {
+        expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
+          "%o
+          %s Error: browser error
+          at useThrowError 
+          at useErrorHook 
+          at Page 
+          at react-stack-bottom-frame 
+          at renderWithHooks 
+          at updateFunctionComponent 
+          at beginWork 
+          at runWithFiberInDEV 
+          at performUnitOfWork 
+          at workLoopSync 
+          at renderRootSync 
+          at performWorkOnRoot 
+          at performWorkOnRootViaSchedulerTask 
+          at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <DevOverlayErrorBoundary> error boundary."
+        `)
+      } else {
+        expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
+          "%o
+          %s Error: browser error
+          at useThrowError 
+          at useErrorHook 
+          at Page 
+          at react-stack-bottom-frame 
+          at renderWithHooks 
+          at updateFunctionComponent 
+          at beginWork 
+          at runWithFiberInDEV 
+          at performUnitOfWork 
+          at workLoopSync 
+          at renderRootSync 
+          at performWorkOnRoot 
+          at performWorkOnRootViaSchedulerTask 
+          at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <DevOverlayErrorBoundary> error boundary."
       `)
+      }
     } else {
-      expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
-        "%o
-        %s Error: browser error
-        at useThrowError 
-        at useErrorHook 
-        at Page 
-        at react-stack-bottom-frame 
-        at renderWithHooks 
-        at updateFunctionComponent 
-        at beginWork 
-        at runWithFiberInDEV 
-        at performUnitOfWork 
-        at workLoopSync 
-        at renderRootSync 
-        at performWorkOnRoot 
-        at performWorkOnRootViaSchedulerTask 
-        at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <ReactDevOverlay> error boundary."
+      if (process.env.TURBOPACK) {
+        expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
+          "%o
+          %s Error: browser error
+          at useThrowError 
+          at useErrorHook 
+          at Page 
+          at react-stack-bottom-frame 
+          at renderWithHooks 
+          at updateFunctionComponent 
+          at beginWork 
+          at runWithFiberInDEV 
+          at performUnitOfWork 
+          at workLoopSync 
+          at renderRootSync 
+          at performWorkOnRoot 
+          at performWorkOnRootViaSchedulerTask 
+          at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <ReactDevOverlay> error boundary."
+        `)
+      } else {
+        expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
+          "%o
+          %s Error: browser error
+          at useThrowError 
+          at useErrorHook 
+          at Page 
+          at react-stack-bottom-frame 
+          at renderWithHooks 
+          at updateFunctionComponent 
+          at beginWork 
+          at runWithFiberInDEV 
+          at performUnitOfWork 
+          at workLoopSync 
+          at renderRootSync 
+          at performWorkOnRoot 
+          at performWorkOnRootViaSchedulerTask 
+          at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <ReactDevOverlay> error boundary."
       `)
+      }
     }
   })
 
@@ -121,18 +168,20 @@ describe('app-dir - owner-stack', () => {
     const stackFramesContent = await getStackFramesContent(browser)
     if (isTurbopack) {
       expect(stackFramesContent).toMatchInlineSnapshot(`
-       "at useErrorHook (app/browser/caught/page.js (39:3))
+       "at useThrowError (app/browser/caught/page.js (34:11))
+       at useErrorHook (app/browser/caught/page.js (39:3))
        at Thrower (app/browser/caught/page.js (29:3))
        at Inner (app/browser/caught/page.js (23:7))
        at Page (app/browser/caught/page.js (43:10))"
       `)
     } else {
       expect(stackFramesContent).toMatchInlineSnapshot(`
-        "at useErrorHook (app/browser/caught/page.js (39:3))
-        at Thrower (app/browser/caught/page.js (29:3))
-        at Inner (app/browser/caught/page.js (23:8))
-        at Page (app/browser/caught/page.js (43:11))"
-       `)
+       "at useThrowError (app/browser/caught/page.js (34:11))
+       at useErrorHook (app/browser/caught/page.js (39:3))
+       at Thrower (app/browser/caught/page.js (29:3))
+       at Inner (app/browser/caught/page.js (23:8))
+       at Page (app/browser/caught/page.js (43:11))"
+      `)
     }
 
     expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
@@ -162,33 +211,55 @@ describe('app-dir - owner-stack', () => {
 
     const stackFramesContent = await getStackFramesContent(browser)
     expect(stackFramesContent).toMatchInlineSnapshot(`
-        "at useErrorHook (app/ssr/page.js (8:3))
-        at Page (app/ssr/page.js (12:3))"
-      `)
+     "at useThrowError (app/ssr/page.js (4:9))
+     at useErrorHook (app/ssr/page.js (8:3))
+     at Page (app/ssr/page.js (12:3))"
+    `)
 
     const logs = await browser.log()
     const errorLog = logs.find((log) => {
       return log.message.includes('Error: ssr error')
     }).message
 
-    expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
-      "%o
-      %s Error: ssr error
-      at useThrowError 
-      at useErrorHook 
-      at Page 
-      at react-stack-bottom-frame 
-      at renderWithHooks 
-      at updateFunctionComponent 
-      at beginWork 
-      at runWithFiberInDEV 
-      at performUnitOfWork 
-      at workLoopSync 
-      at renderRootSync 
-      at performWorkOnRoot 
-      at performWorkOnRootViaSchedulerTask 
-      at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <ReactDevOverlay> error boundary."
+    if (isNewDevOverlay) {
+      expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
+       "%o
+       %s Error: ssr error
+       at useThrowError 
+       at useErrorHook 
+       at Page 
+       at react-stack-bottom-frame 
+       at renderWithHooks 
+       at updateFunctionComponent 
+       at beginWork 
+       at runWithFiberInDEV 
+       at performUnitOfWork 
+       at workLoopSync 
+       at renderRootSync 
+       at performWorkOnRoot 
+       at performWorkOnRootViaSchedulerTask 
+       at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <DevOverlayErrorBoundary> error boundary."
+      `)
+    } else {
+      expect(normalizeStackTrace(errorLog)).toMatchInlineSnapshot(`
+       "%o
+       %s Error: ssr error
+       at useThrowError 
+       at useErrorHook 
+       at Page 
+       at react-stack-bottom-frame 
+       at renderWithHooks 
+       at updateFunctionComponent 
+       at beginWork 
+       at runWithFiberInDEV 
+       at performUnitOfWork 
+       at workLoopSync 
+       at renderRootSync 
+       at performWorkOnRoot 
+       at performWorkOnRootViaSchedulerTask 
+       at MessagePort.performWorkUntilDeadline  The above error occurred in the <Page> component. It was handled by the <ReactDevOverlay> error boundary."
     `)
+    }
   })
 
   it('should capture unhandled promise rejections', async () => {
diff --git a/test/development/app-dir/prerender-indicator/prerender-indicator.test.ts b/test/development/app-dir/prerender-indicator/prerender-indicator.test.ts
index 7f30c69627329..921dd3ac9d0be 100644
--- a/test/development/app-dir/prerender-indicator/prerender-indicator.test.ts
+++ b/test/development/app-dir/prerender-indicator/prerender-indicator.test.ts
@@ -1,5 +1,5 @@
 import { nextTestSetup } from 'e2e-utils'
-import { retry } from 'next-test-utils'
+import { getRouteTypeFromDevToolsIndicator, retry } from 'next-test-utils'
 import { BrowserInterface } from 'next-webdriver'
 
 describe('prerender indicator', () => {
@@ -7,7 +7,16 @@ describe('prerender indicator', () => {
     files: __dirname,
   })
 
+  const isNewDevOverlay =
+    process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
   async function hasStaticIndicator(browser: BrowserInterface) {
+    if (isNewDevOverlay) {
+      const routeType = await getRouteTypeFromDevToolsIndicator(browser)
+      console.log({ routeType })
+      return routeType === 'Static'
+    }
+
     const staticIndicatorPresent = await browser.eval(() =>
       Boolean(
         document
@@ -63,28 +72,31 @@ describe('prerender indicator', () => {
     }
   })
 
-  it('should not show the indicator if disabled in next.config', async () => {
-    await next.stop()
-
-    await next.patchFile(
-      'next.config.js',
-      `
-      module.exports = {
-        devIndicators: {
-          appIsrStatus: false
+  // TODO(jiwon): The new UI will always show the route type.
+  if (!isNewDevOverlay) {
+    it.skip('should not show the indicator if disabled in next.config', async () => {
+      await next.stop()
+
+      await next.patchFile(
+        'next.config.js',
+        `
+        module.exports = {
+          devIndicators: {
+            appIsrStatus: false
+          }
         }
-      }
-    `
-    )
+      `
+      )
 
-    try {
-      await next.start()
-      const browser = await next.browser('/')
-      expect(await hasStaticIndicator(browser)).toBe(false)
-    } finally {
-      await next.deleteFile('app/page.tsx')
-    }
-  })
+      try {
+        await next.start()
+        const browser = await next.browser('/')
+        expect(await hasStaticIndicator(browser)).toBe(false)
+      } finally {
+        await next.deleteFile('app/page.tsx')
+      }
+    })
+  }
 
   it('should not have static indicator when using force-dynamic', async () => {
     const browser = await next.browser('/force-dynamic')
diff --git a/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts b/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts
index 39418cc33f11e..464d60eddbc6f 100644
--- a/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts
+++ b/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts
@@ -5,6 +5,10 @@ import {
   getRedboxSource,
 } from 'next-test-utils'
 
+// Enabling PPR testing also enables the new dev overlay.
+const isNewDevOverlay =
+  process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
 describe('app-dir - server-component-next-dynamic-ssr-false', () => {
   const { next } = nextTestSetup({
     files: __dirname,
@@ -19,8 +23,43 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
     }
 
     expect(redbox.description).toBe('Failed to compile')
-    if (process.env.TURBOPACK) {
-      expect(redbox.source).toMatchInlineSnapshot(`
+
+    // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+    if (isNewDevOverlay) {
+      if (process.env.TURBOPACK) {
+        expect(redbox.source).toMatchInlineSnapshot(`
+       "./app/page.js (3:23)
+
+       Ecmascript file had an error
+         1 | import dynamic from 'next/dynamic'
+         2 |
+       > 3 | const DynamicClient = dynamic(() => import('./client'), { ssr: false })
+           |                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+         4 |
+         5 | export default function Page() {
+         6 |   return <DynamicClient />
+
+       \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component."
+      `)
+      } else {
+        expect(redbox.source).toMatchInlineSnapshot(`
+       "./app/page.js
+
+       Error:   x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component.
+          ,-[3:1]
+        1 | import dynamic from 'next/dynamic'
+        2 | 
+        3 | const DynamicClient = dynamic(() => import('./client'), { ssr: false })
+          :                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        4 | 
+        5 | export default function Page() {
+        6 |   return <DynamicClient />
+          \`----"
+      `)
+      }
+    } else {
+      if (process.env.TURBOPACK) {
+        expect(redbox.source).toMatchInlineSnapshot(`
         "./app/page.js:3:23
         Ecmascript file had an error
           1 | import dynamic from 'next/dynamic'
@@ -33,8 +72,8 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
 
         \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component."
       `)
-    } else {
-      expect(redbox.source).toMatchInlineSnapshot(`
+      } else {
+        expect(redbox.source).toMatchInlineSnapshot(`
         "./app/page.js
         Error:   x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component.
            ,-[3:1]
@@ -47,6 +86,7 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
          6 |   return <DynamicClient />
            \`----"
       `)
+      }
     }
   })
 })
diff --git a/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts b/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts
index 360b1b920b286..2f8f1f47ffe33 100644
--- a/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts
+++ b/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts
@@ -8,6 +8,7 @@ import {
 } from 'next-test-utils'
 
 const isReactExperimental = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
+const isNewDevOverlay = isReactExperimental
 const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18
 
 describe('react-dom/server in React Server environment', () => {
@@ -393,7 +394,35 @@ describe('react-dom/server in React Server environment', () => {
         }
       `)
     } else {
-      expect(redbox).toMatchInlineSnapshot(`
+      // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+      if (isNewDevOverlay) {
+        expect(redbox).toMatchInlineSnapshot(`
+       {
+         "description": "Failed to compile",
+         "source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
+
+       Error:   x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
+         | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
+          ,-[1:1]
+        1 | import * as ReactDOMServerNode from 'react-dom/server'
+          : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        2 | // Fine to drop once React is on ESM
+        3 | import ReactDOMServerNodeDefault from 'react-dom/server'
+          \`----
+         x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
+         | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
+          ,-[3:1]
+        1 | import * as ReactDOMServerNode from 'react-dom/server'
+        2 | // Fine to drop once React is on ESM
+        3 | import ReactDOMServerNodeDefault from 'react-dom/server'
+          : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        4 | 
+        5 | export const runtime = 'nodejs'
+          \`----",
+       }
+      `)
+      } else {
+        expect(redbox).toMatchInlineSnapshot(`
         {
           "description": "Failed to compile",
           "source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
@@ -417,6 +446,7 @@ describe('react-dom/server in React Server environment', () => {
            \`----",
         }
       `)
+      }
     }
   })
 
diff --git a/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts b/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts
index bbe993fd141aa..6cda77886c1dc 100644
--- a/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts
+++ b/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts
@@ -13,6 +13,9 @@ describe('app-dir - error-on-next-codemod-comment', () => {
     skipDeployment: true,
   })
 
+  const isNewDevOverlay =
+    process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
   if (isNextDev) {
     beforeAll(async () => {
       await next.start()
@@ -23,9 +26,12 @@ describe('app-dir - error-on-next-codemod-comment', () => {
 
       await assertHasRedbox(browser)
 
-      if (process.env.TURBOPACK) {
-        expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "./app/page.tsx:2:2
+      // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+      if (isNewDevOverlay) {
+        if (process.env.TURBOPACK) {
+          expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
+          "./app/page.tsx (2:2)
+
           Ecmascript file had an error
             1 | export default function Page() {
           > 2 |   // @next-codemod-error remove jsx of next line
@@ -37,8 +43,40 @@ describe('app-dir - error-on-next-codemod-comment', () => {
           You have an unresolved @next/codemod comment "remove jsx of next line" that needs review.
           After review, either remove the comment if you made the necessary changes or replace "@next-codemod-error" with "@next-codemod-ignore" to bypass the build error if no action at this line can be taken."
         `)
+        } else {
+          expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
+          "./app/page.tsx
+
+          Error:   x You have an unresolved @next/codemod comment "remove jsx of next line" that needs review.
+            | After review, either remove the comment if you made the necessary changes or replace "@next-codemod-error" with "@next-codemod-ignore" to bypass the build error if no action at this line can
+            | be taken.
+            | 
+             ,-[2:1]
+           1 | export default function Page() {
+           2 |   // @next-codemod-error remove jsx of next line
+             :  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+           3 |   return <p>hello world</p>
+           4 | }
+             \`----"
+        `)
+        }
       } else {
-        expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
+        if (process.env.TURBOPACK) {
+          expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
+          "./app/page.tsx:2:2
+          Ecmascript file had an error
+            1 | export default function Page() {
+          > 2 |   // @next-codemod-error remove jsx of next line
+              |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+            3 |   return <p>hello world</p>
+            4 | }
+            5 |
+
+          You have an unresolved @next/codemod comment "remove jsx of next line" that needs review.
+          After review, either remove the comment if you made the necessary changes or replace "@next-codemod-error" with "@next-codemod-ignore" to bypass the build error if no action at this line can be taken."
+        `)
+        } else {
+          expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
           "./app/page.tsx
           Error:   x You have an unresolved @next/codemod comment "remove jsx of next line" that needs review.
             | After review, either remove the comment if you made the necessary changes or replace "@next-codemod-error" with "@next-codemod-ignore" to bypass the build error if no action at this line can
@@ -52,6 +90,7 @@ describe('app-dir - error-on-next-codemod-comment', () => {
            4 | }
              \`----"
         `)
+        }
       }
     })
 
diff --git a/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts b/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts
index 58ba766a22ae2..a98bb7568eeec 100644
--- a/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts
+++ b/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts
@@ -117,6 +117,8 @@ describe('non-root-project-monorepo', () => {
           ).toMatchInlineSnapshot(`
            "<unknown>
            [project]/apps/web/app/separate-file.ts [app-rsc] (ecmascript) (rsc://React/Server/file://<full-path>/apps/web/.next/server/chunks/ssr/apps_web_XXXXXX._.js (7:7)
+           innerArrowFunction
+           app/source-maps-rsc/page.tsx (13:28)
            innerFunction
            app/source-maps-rsc/page.tsx (10:3)
            Page
@@ -134,7 +136,9 @@ describe('non-root-project-monorepo', () => {
           // TODO webpack runtime code shouldn't be included in stack trace
           expect(normalizeStackTrace(await getRedboxCallStack(browser)))
             .toMatchInlineSnapshot(`
-           "<unknown>
+           "eval
+           app/separate-file.ts (1:11)
+           <unknown>
            rsc)/./app/separate-file.ts (rsc://React/Server/file://<full-path>/apps/web/.next/server/app/source-maps-rsc/page.js
            __webpack_require__
            file://<full-path>/apps/web/.next/server/webpack-runtime.js
@@ -164,7 +168,9 @@ describe('non-root-project-monorepo', () => {
           `)
           expect(normalizeStackTrace(await getRedboxCallStack(browser)))
             .toMatchInlineSnapshot(`
-           "innerArrowFunction
+           "[project]/apps/web/app/separate-file.ts [app-client] (ecmascript)
+           app/separate-file.ts (1:7)
+           innerArrowFunction
            app/source-maps-ssr/page.tsx (15:28)
            innerFunction
            app/source-maps-ssr/page.tsx (12:3)
@@ -183,7 +189,9 @@ describe('non-root-project-monorepo', () => {
           // TODO webpack runtime code shouldn't be included in stack trace
           expect(normalizeStackTrace(await getRedboxCallStack(browser)))
             .toMatchInlineSnapshot(`
-           "./app/separate-file.ts
+           "eval
+           app/separate-file.ts (1:7)
+           ./app/separate-file.ts
            file://<full-path>/apps/web/.next/static/chunks/app/source-maps-ssr/page.js (27:1)
            options.factory
            file://<full-path>/apps/web/.next/static/chunks/webpack.js (700:31)
@@ -217,7 +225,9 @@ describe('non-root-project-monorepo', () => {
           `)
           expect(normalizeStackTrace(await getRedboxCallStack(browser)))
             .toMatchInlineSnapshot(`
-           "innerArrowFunction
+           "[project]/apps/web/app/separate-file.ts [app-client] (ecmascript)
+           app/separate-file.ts (1:7)
+           innerArrowFunction
            app/source-maps-client/page.tsx (16:28)
            innerFunction
            app/source-maps-client/page.tsx (13:3)
@@ -236,7 +246,9 @@ describe('non-root-project-monorepo', () => {
           // TODO webpack runtime code shouldn't be included in stack trace
           expect(normalizeStackTrace(await getRedboxCallStack(browser)))
             .toMatchInlineSnapshot(`
-           "./app/separate-file.ts
+           "eval
+           app/separate-file.ts (1:7)
+           ./app/separate-file.ts
            file://<full-path>/apps/web/.next/static/chunks/app/source-maps-client/page.js (27:1)
            options.factory
            file://<full-path>/apps/web/.next/static/chunks/webpack.js (712:31)
diff --git a/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts b/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts
index 35b9db51d0f78..747c32d484f65 100644
--- a/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts
+++ b/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts
@@ -29,6 +29,9 @@ describe('use-cache-unknown-cache-kind', () => {
     return
   }
 
+  const isNewDevOverlay =
+    process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
   if (isNextStart) {
     it('should fail the build with an error', async () => {
       const { cliOutput } = await next.build()
@@ -87,8 +90,39 @@ describe('use-cache-unknown-cache-kind', () => {
 
       expect(errorDescription).toBe('Failed to compile')
 
-      if (isTurbopack) {
-        expect(errorSource).toMatchInlineSnapshot(`
+      // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+      if (isNewDevOverlay) {
+        if (isTurbopack) {
+          expect(errorSource).toMatchInlineSnapshot(`
+           "./app/page.tsx (1:1)
+
+           Ecmascript file had an error
+           > 1 | 'use cache: custom'
+               | ^^^^^^^^^^^^^^^^^^^
+             2 |
+             3 | export default async function Page() {
+             4 |   return <p>hello world</p>
+
+           Unknown cache kind "custom". Please configure a cache handler for this kind in the "experimental.cacheHandlers" object in your Next.js config."
+          `)
+        } else {
+          expect(errorSource).toMatchInlineSnapshot(`
+           "./app/page.tsx
+
+           Error:   x Unknown cache kind "custom". Please configure a cache handler for this kind in the "experimental.cacheHandlers" object in your Next.js config.
+             | 
+              ,-[1:1]
+            1 | 'use cache: custom'
+              : ^^^^^^^^^^^^^^^^^^^
+            2 | 
+            3 | export default async function Page() {
+            4 |   return <p>hello world</p>
+              \`----"
+          `)
+        }
+      } else {
+        if (isTurbopack) {
+          expect(errorSource).toMatchInlineSnapshot(`
             "./app/page.tsx:1:1
             Ecmascript file had an error
             > 1 | 'use cache: custom'
@@ -99,8 +133,8 @@ describe('use-cache-unknown-cache-kind', () => {
 
             Unknown cache kind "custom". Please configure a cache handler for this kind in the "experimental.cacheHandlers" object in your Next.js config."
           `)
-      } else {
-        expect(errorSource).toMatchInlineSnapshot(`
+        } else {
+          expect(errorSource).toMatchInlineSnapshot(`
             "./app/page.tsx
             Error:   x Unknown cache kind "custom". Please configure a cache handler for this kind in the "experimental.cacheHandlers" object in your Next.js config.
               | 
@@ -112,6 +146,7 @@ describe('use-cache-unknown-cache-kind', () => {
              4 |   return <p>hello world</p>
                \`----"
           `)
+        }
       }
     })
 
diff --git a/test/e2e/app-dir/use-cache-without-dynamic-io/use-cache-without-dynamic-io.test.ts b/test/e2e/app-dir/use-cache-without-dynamic-io/use-cache-without-dynamic-io.test.ts
index 6515bbcdae6aa..bf603457c0aee 100644
--- a/test/e2e/app-dir/use-cache-without-dynamic-io/use-cache-without-dynamic-io.test.ts
+++ b/test/e2e/app-dir/use-cache-without-dynamic-io/use-cache-without-dynamic-io.test.ts
@@ -24,6 +24,9 @@ describe('use-cache-without-dynamic-io', () => {
     return
   }
 
+  const isNewDevOverlay =
+    process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
   if (isNextStart) {
     it('should fail the build with an error', async () => {
       const { cliOutput } = await next.build()
@@ -86,35 +89,71 @@ describe('use-cache-without-dynamic-io', () => {
 
       expect(errorDescription).toBe('Failed to compile')
 
-      if (isTurbopack) {
-        expect(errorSource).toMatchInlineSnapshot(`
-          "./app/page.tsx:1:1
-          Ecmascript file had an error
-          > 1 | 'use cache'
-              | ^^^^^^^^^^^
-            2 |
-            3 | export default async function Page() {
-            4 |   return <p>hello world</p>
-
-          To use "use cache", please enable the experimental feature flag "dynamicIO" in your Next.js config.
-
-          Read more: https://nextjs.org/docs/canary/app/api-reference/directives/use-cache#usage"
-        `)
+      // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+      if (isNewDevOverlay) {
+        if (isTurbopack) {
+          expect(errorSource).toMatchInlineSnapshot(`
+           "./app/page.tsx (1:1)
+
+           Ecmascript file had an error
+           > 1 | 'use cache'
+               | ^^^^^^^^^^^
+             2 |
+             3 | export default async function Page() {
+             4 |   return <p>hello world</p>
+
+           To use "use cache", please enable the experimental feature flag "dynamicIO" in your Next.js config.
+
+           Read more: https://nextjs.org/docs/canary/app/api-reference/directives/use-cache#usage"
+          `)
+        } else {
+          expect(errorSource).toMatchInlineSnapshot(`
+                    "./app/page.tsx
+
+                    Error:   x To use "use cache", please enable the experimental feature flag "dynamicIO" in your Next.js config.
+                      | 
+                      | Read more: https://nextjs.org/docs/canary/app/api-reference/directives/use-cache#usage
+                      | 
+                       ,-[1:1]
+                     1 | 'use cache'
+                       : ^^^^^^^^^^^
+                     2 | 
+                     3 | export default async function Page() {
+                     4 |   return <p>hello world</p>
+                       \`----"
+                  `)
+        }
       } else {
-        expect(errorSource).toMatchInlineSnapshot(`
-          "./app/page.tsx
-          Error:   x To use "use cache", please enable the experimental feature flag "dynamicIO" in your Next.js config.
-            | 
-            | Read more: https://nextjs.org/docs/canary/app/api-reference/directives/use-cache#usage
-            | 
-             ,-[1:1]
-           1 | 'use cache'
-             : ^^^^^^^^^^^
-           2 | 
-           3 | export default async function Page() {
-           4 |   return <p>hello world</p>
-             \`----"
-        `)
+        if (isTurbopack) {
+          expect(errorSource).toMatchInlineSnapshot(`
+                     "./app/page.tsx:1:1
+                     Ecmascript file had an error
+                     > 1 | 'use cache'
+                         | ^^^^^^^^^^^
+                       2 |
+                       3 | export default async function Page() {
+                       4 |   return <p>hello world</p>
+
+                     To use "use cache", please enable the experimental feature flag "dynamicIO" in your Next.js config.
+
+                     Read more: https://nextjs.org/docs/canary/app/api-reference/directives/use-cache#usage"
+                  `)
+        } else {
+          expect(errorSource).toMatchInlineSnapshot(`
+                    "./app/page.tsx
+                    Error:   x To use "use cache", please enable the experimental feature flag "dynamicIO" in your Next.js config.
+                      | 
+                      | Read more: https://nextjs.org/docs/canary/app/api-reference/directives/use-cache#usage
+                      | 
+                       ,-[1:1]
+                     1 | 'use cache'
+                       : ^^^^^^^^^^^
+                     2 | 
+                     3 | export default async function Page() {
+                     4 |   return <p>hello world</p>
+                       \`----"
+                  `)
+        }
       }
     })
 
diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
index 57e99192267d4..11c6b929e092c 100644
--- a/test/lib/next-test-utils.ts
+++ b/test/lib/next-test-utils.ts
@@ -36,6 +36,10 @@ export { shouldRunTurboDevTest }
 export const nextServer = server
 export const pkg = _pkg
 
+// TODO(jiwon): Remove this once we have a new dev overlay at stable.
+const isNewDevOverlay =
+  process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY === 'true'
+
 export function initNextServerScript(
   scriptPath: string,
   successRegexp: RegExp,
@@ -883,13 +887,18 @@ export async function assertNoRedbox(browser: BrowserInterface) {
 export async function hasErrorToast(
   browser: BrowserInterface
 ): Promise<boolean> {
-  return browser.eval(() => {
-    return Boolean(
-      Array.from(document.querySelectorAll('nextjs-portal')).find((p) =>
-        p.shadowRoot.querySelector('[data-nextjs-toast]')
+  return (
+    (await browser.eval(() => {
+      return Boolean(
+        [].slice.call(document.querySelectorAll('nextjs-portal')).find((p) =>
+          p.shadowRoot.querySelector(
+            // TODO(jiwon): data-nextjs-toast may not be an error indicator in new UI
+            isNewDevOverlay ? '[data-issues]' : '[data-nextjs-toast]'
+          )
+        )
       )
-    )
-  })
+    })) ?? false // When browser.eval() throws, it returns null.
+  )
 }
 
 /**
@@ -898,7 +907,13 @@ export async function hasErrorToast(
  */
 export async function openRedbox(browser: BrowserInterface): Promise<void> {
   try {
-    browser.waitForElementByCss('[data-nextjs-toast]', 5000).click()
+    //TODO(jiwon): data-nextjs-toast won't open red box in new UI.
+    if (isNewDevOverlay) {
+      await browser.waitForElementByCss('[data-error-expanded="true"]')
+      await browser.waitForElementByCss('[data-issues-open]').click()
+    } else {
+      await browser.waitForElementByCss('[data-nextjs-toast]').click()
+    }
   } catch (cause) {
     const error = new Error('No Redbox to open.', { cause })
     Error.captureStackTrace(error, openRedbox)
@@ -907,6 +922,49 @@ export async function openRedbox(browser: BrowserInterface): Promise<void> {
   await assertHasRedbox(browser)
 }
 
+export async function openDevToolsIndicatorPopover(
+  browser: BrowserInterface
+): Promise<void> {
+  try {
+    await browser.waitForElementByCss('[data-nextjs-dev-tools-button]').click()
+  } catch (cause) {
+    const error = new Error('No DevTools Indicator to open.', { cause })
+    Error.captureStackTrace(error, openDevToolsIndicatorPopover)
+    throw error
+  }
+}
+
+export async function getRouteTypeFromDevToolsIndicator(
+  browser: BrowserInterface
+): Promise<'Static' | 'Dynamic'> {
+  await openDevToolsIndicatorPopover(browser)
+
+  return browser.eval(() => {
+    const portal = [].slice
+      .call(document.querySelectorAll('nextjs-portal'))
+      .find((p) => p.shadowRoot.querySelector('[data-nextjs-toast]'))
+
+    const root = portal?.shadowRoot
+
+    // 'Route\nStatic' || 'Route\nDynamic'
+    const routeTypeText = root?.querySelector(
+      '[data-nextjs-route-type]'
+    )?.innerText
+
+    if (!routeTypeText) {
+      throw new Error('No Route Type Text Found')
+    }
+
+    // 'Static' || 'Dynamic'
+    const routeType = routeTypeText.split('\n').pop()
+    if (routeType !== 'Static' && routeType !== 'Dynamic') {
+      throw new Error(`Invalid Route Type: ${routeType}`)
+    }
+
+    return routeType as 'Static' | 'Dynamic'
+  })
+}
+
 export function getRedboxHeader(browser: BrowserInterface) {
   return browser.eval(() => {
     const portal = [].slice
@@ -917,7 +975,26 @@ export function getRedboxHeader(browser: BrowserInterface) {
   })
 }
 
+export function getRedboxFloatingHeaderText(
+  browser: BrowserInterface
+): Promise<string> {
+  return browser.eval(() => {
+    const portal = [].slice
+      .call(document.querySelectorAll('nextjs-portal'))
+      .find((p) => p.shadowRoot.querySelector('.error-overlay-floating-header'))
+    const root = portal.shadowRoot
+    return root.querySelector('.error-overlay-floating-header')?.innerText
+  })
+}
+
 export async function getRedboxTotalErrorCount(browser: BrowserInterface) {
+  // TODO(jiwon): Remove this once we have a new dev overlay at stable.
+  if (isNewDevOverlay) {
+    // N/M\nNext.js X.Y.Z -> M
+    const text = (await getRedboxFloatingHeaderText(browser)) || ''
+    return parseInt(text.match(/\/(\d+)/)?.[1])
+  }
+
   const header = (await getRedboxHeader(browser)) || ''
   return parseInt(header.match(/\d+ of (\d+) issue/)?.[1], 10)
 }