From e279a4ae94f684d9fd07ad2a3f99605d360794b8 Mon Sep 17 00:00:00 2001
From: eps1lon <sebastian.silbermann@vercel.com>
Date: Mon, 9 Dec 2024 22:43:09 +0100
Subject: [PATCH] Add internal `toDisplayRedbox` and `toDisplayCollapsedRedbox`
 inline snapshot matchers

These are meant to replace `assertHasRedbox` over time.
We want that every redbox insertion in the future asserts on the full error (message, stack, codeframe) in both browser
and terminal.

We'll slowly expand usage of these matchers until all use cases are covered at which point the old, granular helpers are removed.

The end goal is full confidence in our error display without sacrificing DX for people focused on the error message itself.

The downside of inline snapshot matcher that we can't have fine-grained TODO comments.
But that's only a concern for the few working on working on the error display infra.
The goal here is to encourage using these helpers so the priorities of the few working on error infra is lowest.

The most annoying fact is the need for forking assertions between Turbopack and Webpack.
All the more reason for us to fix the off-by-one column issues between Turbopack and Webpack.
---
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  10 +-
 .../acceptance/ReactRefreshLogBox.test.ts     |  40 +-
 .../ReactRefreshLogBox.test.ts.snap           |  14 -
 .../capture-console-error-owner-stack.test.ts | 398 ++++++------------
 .../capture-console-error.test.ts             | 389 ++++++-----------
 .../dynamic-io-dev-errors.test.ts             | 181 +++++---
 .../server-source-maps.test.ts                |  38 +-
 test/jest-setup-after-env.ts                  |   1 +
 test/lib/add-redbox-matchers.ts               | 192 +++++++++
 test/lib/next-test-utils.ts                   |  59 ++-
 11 files changed, 731 insertions(+), 593 deletions(-)
 create mode 100644 test/lib/add-redbox-matchers.ts

diff --git a/package.json b/package.json
index 472598b73e998..1eac4071ff568 100644
--- a/package.json
+++ b/package.json
@@ -154,6 +154,7 @@
     "eslint-v8": "npm:eslint@^8.57.0",
     "event-stream": "4.0.1",
     "execa": "2.0.3",
+    "expect": "29.7.0",
     "expect-type": "0.14.2",
     "express": "4.17.0",
     "faker": "5.5.3",
@@ -176,6 +177,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-extended": "4.0.2",
     "jest-junit": "16.0.0",
+    "jest-snapshot": "30.0.0-alpha.6",
     "json5": "2.2.3",
     "kleur": "^4.1.0",
     "ky": "0.19.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae4fec670be7f..389265023b973 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -291,6 +291,9 @@ importers:
       execa:
         specifier: 2.0.3
         version: 2.0.3
+      expect:
+        specifier: 29.7.0
+        version: 29.7.0
       expect-type:
         specifier: 0.14.2
         version: 0.14.2
@@ -357,6 +360,9 @@ importers:
       jest-junit:
         specifier: 16.0.0
         version: 16.0.0
+      jest-snapshot:
+        specifier: 30.0.0-alpha.6
+        version: 30.0.0-alpha.6
       json5:
         specifier: 2.2.3
         version: 2.2.3
@@ -19825,7 +19831,7 @@ snapshots:
 
   '@types/jest@29.5.5':
     dependencies:
-      expect: 29.5.0
+      expect: 29.7.0
       pretty-format: 29.5.0
 
   '@types/jscodeshift@0.11.0':
@@ -25458,7 +25464,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.22.5
       '@babel/parser': 7.22.5
-      '@istanbuljs/schema': 0.1.2
+      '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 7.6.3
     transitivePeerDependencies:
diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts
index 54d9230e84b7d..f43066175640c 100644
--- a/test/development/acceptance/ReactRefreshLogBox.test.ts
+++ b/test/development/acceptance/ReactRefreshLogBox.test.ts
@@ -3,13 +3,13 @@ import { createSandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import {
   describeVariants as describe,
-  getRedboxCallStack,
   toggleCollapseCallStackFrames,
 } from 'next-test-utils'
 import path from 'path'
 import { outdent } from 'outdent'
 
-describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
+describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', (mode) => {
+  const isTurbopack = mode === 'turbo'
   const { next } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     skipStart: true,
@@ -786,10 +786,38 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
         ],
       ])
     )
-    const { session, browser } = sandbox
-    await session.assertHasRedbox()
-    const texts = await getRedboxCallStack(browser)
-    expect(texts).toMatchSnapshot()
+    const { browser } = sandbox
+    if (isTurbopack) {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "count": 1,
+         "description": "Error: anonymous error!",
+         "source": "pages/index.js (3:11) @ <unknown>
+       > 3 |     throw new Error("anonymous error!");
+           |           ^",
+         "stack": [
+           "Array.map <anonymous> (0:0)",
+           "Page pages/index.js (2:13)",
+         ],
+         "title": "Server Error",
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "count": 1,
+         "description": "Error: anonymous error!",
+         "source": "pages/index.js (3:11) @ eval
+       > 3 |     throw new Error("anonymous error!");
+           |           ^",
+         "stack": [
+           "Array.map <anonymous> (0:0)",
+           "map pages/index.js (2:13)",
+         ],
+         "title": "Server Error",
+       }
+      `)
+    }
   })
 
   test('should hide unrelated frames in stack trace with node:internal calls', async () => {
diff --git a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap
index 21f0656c91c63..6d1b65efe9343 100644
--- a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap
+++ b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap
@@ -54,13 +54,6 @@ exports[`ReactRefreshLogBox default module init error not shown 1`] = `
   6 |     return <h1>Default Export</h1>;"
 `;
 
-exports[`ReactRefreshLogBox default should show anonymous frames in stack trace 1`] = `
-"Array.map
-<anonymous> (0:0)
-map
-pages/index.js (2:13)"
-`;
-
 exports[`ReactRefreshLogBox default should strip whitespace correctly with newline 1`] = `
 "index.js (8:27) @ onClick
 
@@ -125,13 +118,6 @@ exports[`ReactRefreshLogBox turbo module init error not shown 1`] = `
   6 |     return <h1>Default Export</h1>;"
 `;
 
-exports[`ReactRefreshLogBox turbo should show anonymous frames in stack trace 1`] = `
-"Array.map
-<anonymous> (0:0)
-Page
-pages/index.js (2:13)"
-`;
-
 exports[`ReactRefreshLogBox turbo should strip whitespace correctly with newline 1`] = `
 "index.js (8:27) @ onClick
 
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 a8b794ff74897..e58d34813b634 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
@@ -1,33 +1,7 @@
 import { nextTestSetup } from 'e2e-utils'
-import {
-  getRedboxCallStack,
-  getRedboxDescription,
-  getRedboxTitle,
-  getRedboxSource,
-  getRedboxTotalErrorCount,
-  openRedbox,
-  hasRedboxCallStack,
-} from 'next-test-utils'
 
-async function getRedboxResult(browser: any) {
-  const title = await getRedboxTitle(browser)
-  const description = await getRedboxDescription(browser)
-  const callStacks = (await hasRedboxCallStack(browser))
-    ? await getRedboxCallStack(browser)
-    : ''
-  const count = await getRedboxTotalErrorCount(browser)
-  const source = await getRedboxSource(browser)
-  const result = {
-    title,
-    count,
-    source,
-    description,
-    callStacks,
-  }
-  return result
-}
 describe('app-dir - capture-console-error-owner-stack', () => {
-  const { next } = nextTestSetup({
+  const { isTurbopack, next } = nextTestSetup({
     files: __dirname,
   })
 
@@ -35,51 +9,35 @@ describe('app-dir - capture-console-error-owner-stack', () => {
     const browser = await next.browser('/browser/event')
     await browser.elementByCss('button').click()
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ onClick
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^",
+         "stack": [
+           "button <anonymous> (0:0)",
+           "Page app/browser/event/page.js (5:5)",
+         ],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "button
-        <anonymous> (0:0)
-        button
-        app/browser/event/page.js (5:6)",
-          "count": 1,
-          "description": "trigger an console <error>",
-          "source": "app/browser/event/page.js (7:17) @ error
-
-           5 |     <button
-           6 |       onClick={() => {
-        >  7 |         console.error('trigger an console <%s>', 'error')
-             |                 ^
-           8 |       }}
-           9 |     >
-          10 |       click to error",
-          "title": "Console Error",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ error
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^",
+         "stack": [
+           "button <anonymous> (0:0)",
+           "button app/browser/event/page.js (5:6)",
+         ],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -87,45 +45,29 @@ describe('app-dir - capture-console-error-owner-stack', () => {
   it('should capture browser console error in render and dedupe if necessary', async () => {
     const browser = await next.browser('/browser/render')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    if (process.env.TURBOPACK) {
-      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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ Page
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 1,
-          "description": "trigger an console.error in render",
-          "source": "app/browser/render/page.js (4:11) @ error
-
-          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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ error
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -133,45 +75,29 @@ describe('app-dir - capture-console-error-owner-stack', () => {
   it('should capture browser console error in render and dedupe when multi same errors logged', async () => {
     const browser = await next.browser('/browser/render')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    if (process.env.TURBOPACK) {
-      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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ Page
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 1,
-          "description": "trigger an console.error in render",
-          "source": "app/browser/render/page.js (4:11) @ error
-
-          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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ error
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -179,45 +105,29 @@ describe('app-dir - capture-console-error-owner-stack', () => {
   it('should capture server replay string error from console error', async () => {
     const browser = await next.browser('/ssr')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    if (process.env.TURBOPACK) {
-      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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "ssr console error:client",
+         "source": "app/ssr/page.js (4:11) @ Page
+       > 4 |   console.error(
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 1,
-          "description": "ssr console error:client",
-          "source": "app/ssr/page.js (4:11) @ error
-
-          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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "ssr console error:client",
+         "source": "app/ssr/page.js (4:11) @ error
+       > 4 |   console.error(
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -225,45 +135,29 @@ describe('app-dir - capture-console-error-owner-stack', () => {
   it('should capture server replay error instance from console error', async () => {
     const browser = await next.browser('/ssr-error-instance')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    if (process.env.TURBOPACK) {
-      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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "Error: page error",
+         "source": "app/ssr-error-instance/page.js (4:17) @ Page
+       > 4 |   console.error(new Error('page error'))
+           |                 ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "Error: page error",
+         "source": "app/ssr-error-instance/page.js (4:17) @ Page
+       > 4 |   console.error(new Error('page error'))
+           |                 ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -271,49 +165,35 @@ describe('app-dir - capture-console-error-owner-stack', () => {
   it('should be able to capture rsc logged error', async () => {
     const browser = await next.browser('/rsc')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+       > 2 |   console.error(new Error('boom'))
+           |                 ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+           "Page <anonymous> (0:0)",
+         ],
+         "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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+       > 2 |   console.error(new Error('boom'))
+           |                 ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+           "Page <anonymous> (0:0)",
+         ],
+         "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 07c9b62e409b0..20e3686f5b344 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
@@ -1,34 +1,7 @@
 import { nextTestSetup } from 'e2e-utils'
-import {
-  getRedboxCallStack,
-  getRedboxDescription,
-  getRedboxTitle,
-  getRedboxSource,
-  getRedboxTotalErrorCount,
-  openRedbox,
-  hasRedboxCallStack,
-} from 'next-test-utils'
-
-async function getRedboxResult(browser: any) {
-  const title = await getRedboxTitle(browser)
-  const description = await getRedboxDescription(browser)
-  const callStacks = (await hasRedboxCallStack(browser))
-    ? await getRedboxCallStack(browser)
-    : ''
-  const count = await getRedboxTotalErrorCount(browser)
-  const source = await getRedboxSource(browser)
-  const result = {
-    title,
-    count,
-    source,
-    description,
-    callStacks,
-  }
-  return result
-}
 
 describe('app-dir - capture-console-error', () => {
-  const { next } = nextTestSetup({
+  const { isTurbopack, next } = nextTestSetup({
     files: __dirname,
   })
 
@@ -43,45 +16,29 @@ describe('app-dir - capture-console-error', () => {
     const browser = await next.browser('/browser/event')
     await browser.elementByCss('button').click()
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ onClick
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 1,
-          "description": "trigger an console <error>",
-          "source": "app/browser/event/page.js (7:17) @ error
-
-           5 |     <button
-           6 |       onClick={() => {
-        >  7 |         console.error('trigger an console <%s>', 'error')
-             |                 ^
-           8 |       }}
-           9 |     >
-          10 |       click to error",
-          "title": "Console Error",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "trigger an console <error>",
+         "source": "app/browser/event/page.js (7:17) @ error
+       >  7 |         console.error('trigger an console <%s>', 'error')
+            |                 ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -89,45 +46,31 @@ describe('app-dir - capture-console-error', () => {
   it('should capture browser console error in render and dedupe if necessary', async () => {
     const browser = await next.browser('/browser/render')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ Page
+         2 |
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "trigger an console.error in render",
-          "source": "app/browser/render/page.js (4:11) @ error
-
-          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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ error
+         2 |
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -135,45 +78,31 @@ describe('app-dir - capture-console-error', () => {
   it('should capture browser console error in render and dedupe when multi same errors logged', async () => {
     const browser = await next.browser('/browser/render')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ Page
+         2 |
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "trigger an console.error in render",
-          "source": "app/browser/render/page.js (4:11) @ error
-
-          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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "trigger an console.error in render",
+         "source": "app/browser/render/page.js (4:11) @ error
+         2 |
+       > 4 |   console.error('trigger an console.error in render')
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -181,45 +110,31 @@ describe('app-dir - capture-console-error', () => {
   it('should capture server replay string error from console error', async () => {
     const browser = await next.browser('/ssr')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "ssr console error:client",
+         "source": "app/ssr/page.js (4:11) @ Page
+         2 |
+       > 4 |   console.error(
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     } else {
-      expect(result).toMatchInlineSnapshot(`
-        {
-          "callStacks": "",
-          "count": 2,
-          "description": "ssr console error:client",
-          "source": "app/ssr/page.js (4:11) @ error
-
-          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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "ssr console error:client",
+         "source": "app/ssr/page.js (4:11) @ error
+         2 |
+       > 4 |   console.error(
+           |           ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -227,45 +142,31 @@ describe('app-dir - capture-console-error', () => {
   it('should capture server replay error instance from console error', async () => {
     const browser = await next.browser('/ssr-error-instance')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "Error: page error",
+         "source": "app/ssr-error-instance/page.js (4:17) @ Page
+         2 |
+       > 4 |   console.error(new Error('page error'))
+           |                 ^",
+         "stack": [],
+         "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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 2,
+         "description": "Error: page error",
+         "source": "app/ssr-error-instance/page.js (4:17) @ Page
+         2 |
+       > 4 |   console.error(new Error('page error'))
+           |                 ^",
+         "stack": [],
+         "title": "Console Error",
+       }
       `)
     }
   })
@@ -273,45 +174,33 @@ describe('app-dir - capture-console-error', () => {
   it('should be able to capture rsc logged error', async () => {
     const browser = await next.browser('/rsc')
 
-    await openRedbox(browser)
-
-    const result = await getRedboxResult(browser)
-
-    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",
-        }
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+       > 2 |   console.error(new Error('boom'))
+           |                 ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "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",
-        }
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: boom",
+         "source": "app/rsc/page.js (2:17) @ Page
+       > 2 |   console.error(new Error('boom'))
+           |                 ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
       `)
     }
   })
diff --git a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
index 952ccda61ca7b..8fd228d9e6e22 100644
--- a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
+++ b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
@@ -1,16 +1,6 @@
 import stripAnsi from 'strip-ansi'
 import { nextTestSetup } from 'e2e-utils'
-import {
-  assertHasRedbox,
-  assertNoRedbox,
-  getRedboxCallStack,
-  getRedboxDescription,
-  hasErrorToast,
-  retry,
-  openRedbox,
-  getRedboxSource,
-  toggleCollapseCallStackFrames,
-} from 'next-test-utils'
+import { assertNoRedbox, hasErrorToast, retry } from 'next-test-utils'
 import { createSandbox } from 'development-sandbox'
 import { outdent } from 'outdent'
 
@@ -22,11 +12,35 @@ describe('Dynamic IO Dev Errors', () => {
   it('should show a red box error on the SSR render', async () => {
     const browser = await next.browser('/error')
 
-    await openRedbox(browser)
-
-    expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
-      `"[ Server ] Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
-    )
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+         "source": "app/error/page.tsx (2:23) @ Page
+       > 2 |   const random = Math.random()
+           |                       ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+         "source": "app/error/page.tsx (2:23) @ random
+       > 2 |   const random = Math.random()
+           |                       ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
+      `)
+    }
   })
 
   it('should show a red box error on client navigations', async () => {
@@ -36,11 +50,35 @@ describe('Dynamic IO Dev Errors', () => {
 
     await browser.elementByCss("[href='/error']").click()
 
-    await openRedbox(browser)
-
-    expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
-      `"[ Server ] Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
-    )
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+         "source": "app/error/page.tsx (2:23) @ Page
+       > 2 |   const random = Math.random()
+           |                       ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
+         "source": "app/error/page.tsx (2:23) @ random
+       > 2 |   const random = Math.random()
+           |                       ^",
+         "stack": [
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
+      `)
+    }
   })
 
   it('should not log unhandled rejections for persistently thrown top-level errors', async () => {
@@ -63,7 +101,11 @@ describe('Dynamic IO Dev Errors', () => {
     const outputIndex = next.cliOutput.length
     const browser = await next.browser('/no-accessed-data')
 
-    await openRedbox(browser)
+    await retry(() => {
+      expect(next.cliOutput.slice(outputIndex)).toContain(
+        'Error: Route "/no-accessed-data"'
+      )
+    })
 
     expect(stripAnsi(next.cliOutput.slice(outputIndex))).toContain(
       `\nError: Route "/no-accessed-data": ` +
@@ -80,21 +122,42 @@ describe('Dynamic IO Dev Errors', () => {
             '\n    at parallelRouterKey (..')
     )
 
-    const description = await getRedboxDescription(browser)
-
-    expect(description).toMatchInlineSnapshot(
-      `"[ Server ] Error: Route "/no-accessed-data": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense"`
-    )
-
-    // Expand the stack frames, since the first frame `Page [Server] <anonymous>` is treated as ignored.
-    // TODO: Remove the filter of anonymous frames when we have a better way to handle them.
-    await toggleCollapseCallStackFrames(browser)
-    const stack = await getRedboxCallStack(browser)
-    // TODO: use snapshot testing for stack
-    // FIXME: avoid `next` code to be mapped to source code and filter them out even when sourcemap is enabled.
-    expect(stack).toContain('Page [Server]')
-    expect(stack).toContain('Root [Server]')
-    expect(stack).toContain('<anonymous> (2:1)')
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: Route "/no-accessed-data": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense",
+         "source": undefined,
+         "stack": [
+           "Page [Server] <anonymous> (2:1)",
+           "main <anonymous> (2:1)",
+           "body <anonymous> (2:1)",
+           "html <anonymous> (2:1)",
+           "Root [Server] <anonymous> (2:1)",
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": 1,
+         "description": "[ Server ] Error: Route "/no-accessed-data": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense",
+         "source": undefined,
+         "stack": [
+           "Page [Server] <anonymous> (2:1)",
+           "main <anonymous> (2:1)",
+           "body <anonymous> (2:1)",
+           "html <anonymous> (2:1)",
+           "Root [Server] <anonymous> (2:1)",
+           "<FIXME-internal-frame>",
+           "JSON.parse <anonymous> (0:0)",
+         ],
+         "title": "Console Error",
+       }
+      `)
+    }
   })
 
   it('should clear segment errors after correcting them', async () => {
@@ -115,17 +178,39 @@ describe('Dynamic IO Dev Errors', () => {
       ])
     )
     const { browser, session } = sandbox
-    await assertHasRedbox(browser)
-    const redbox = {
-      description: await getRedboxDescription(browser),
-      source: await getRedboxSource(browser),
+    if (isTurbopack) {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": NaN,
+         "description": "Failed to compile",
+         "source": "./app/page.tsx:1:14
+       Ecmascript file had an error
+       > 1 | export const revalidate = 10
+           |              ^^^^^^^^^^",
+         "stack": [],
+         "title": null,
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayCollapsedRedbox(`
+       {
+         "count": NaN,
+         "description": "Failed to compile",
+         "source": "./app/page.tsx
+       Error:   x "revalidate" is not compatible with \`nextConfig.experimental.dynamicIO\`. Please remove it.
+          ,-[1:1]
+        1 | export const revalidate = 10
+          :              ^^^^^^^^^^
+        2 | export default function Page() {
+        3 |   return (
+        4 |     <div>Hello World</div>
+          \`----",
+         "stack": [],
+         "title": null,
+       }
+      `)
     }
 
-    expect(redbox.description).toMatchInlineSnapshot(`"Failed to compile"`)
-    expect(redbox.source).toContain(
-      '"revalidate" is not compatible with `nextConfig.experimental.dynamicIO`. Please remove it.'
-    )
-
     await session.patch(
       'app/page.tsx',
       outdent`
@@ -137,8 +222,6 @@ describe('Dynamic IO Dev Errors', () => {
     `
     )
 
-    await retry(async () => {
-      assertNoRedbox(browser)
-    })
+    await assertNoRedbox(browser)
   })
 })
diff --git a/test/e2e/app-dir/server-source-maps/server-source-maps.test.ts b/test/e2e/app-dir/server-source-maps/server-source-maps.test.ts
index ffdfcf97b58d2..f87c6381c7415 100644
--- a/test/e2e/app-dir/server-source-maps/server-source-maps.test.ts
+++ b/test/e2e/app-dir/server-source-maps/server-source-maps.test.ts
@@ -163,7 +163,7 @@ describe('app-dir - server source maps', () => {
 
   it('thrown SSR errors', async () => {
     const outputIndex = next.cliOutput.length
-    await next.render('/ssr-throw')
+    const browser = await next.browser('/ssr-throw')
 
     if (isNextDev) {
       await retry(() => {
@@ -198,6 +198,42 @@ describe('app-dir - server source maps', () => {
               "\n  digest: '"
       )
       expect(cliOutput).toMatch(/digest: '\d+'/)
+
+      if (isTurbopack) {
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "Error: Boom",
+           "source": "app/ssr-throw/Thrower.js (4:9) @ throwError
+
+           2 |
+           3 | function throwError() {
+         > 4 |   throw new Error('Boom')
+             |         ^
+           5 | }
+           6 |
+           7 | export function Thrower() {",
+           "stack": "Thrower
+         app/ssr-throw/Thrower.js (8:3)",
+         }
+        `)
+      } else {
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "Error: Boom",
+           "source": "app/ssr-throw/Thrower.js (4:9) @ throwError
+
+           2 |
+           3 | function throwError() {
+         > 4 |   throw new Error('Boom')
+             |         ^
+           5 | }
+           6 |
+           7 | export function Thrower() {",
+           "stack": "throwError
+         app/ssr-throw/Thrower.js (8:3)",
+         }
+        `)
+      }
     } else {
       // TODO: Test `next build` with `--enable-source-maps`.
     }
diff --git a/test/jest-setup-after-env.ts b/test/jest-setup-after-env.ts
index 83abab6145cf7..47bd914a24a87 100644
--- a/test/jest-setup-after-env.ts
+++ b/test/jest-setup-after-env.ts
@@ -1,6 +1,7 @@
 // @ts-ignore
 import * as matchers from 'jest-extended'
 import '@testing-library/jest-dom'
+import './lib/add-redbox-matchers'
 expect.extend(matchers)
 
 // A default max-timeout of 90 seconds is allowed
diff --git a/test/lib/add-redbox-matchers.ts b/test/lib/add-redbox-matchers.ts
new file mode 100644
index 0000000000000..6760f00110465
--- /dev/null
+++ b/test/lib/add-redbox-matchers.ts
@@ -0,0 +1,192 @@
+import type { MatcherContext } from 'expect'
+import { toMatchInlineSnapshot } from 'jest-snapshot'
+import {
+  assertHasRedbox,
+  getRedboxCallStack,
+  getRedboxDescription,
+  getRedboxSource,
+  getRedboxTitle,
+  getRedboxTotalErrorCount,
+  openRedbox,
+} from './next-test-utils'
+import type { BrowserInterface } from './browsers/base'
+
+declare global {
+  namespace jest {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- module augmentation needs to match generic params even if unused
+    interface Matchers<R> {
+      /**
+       * Inline snapshot matcher for a Redbox that's popped up by default.
+       * When a Redbox is hidden at first and requires manual display by clicking the toast,
+       * use {@link toDisplayCollapsedRedbox} instead.
+       *
+       * Unintented content in the snapshot should be reported to the Next.js DX team.
+       * <FIXME-internal-frame> in the snapshot would be unintended.
+       * Any node_modules in the snapshot would be unintended.
+       * Differences in the snapshot between Turbopack and Webpack would be unintended though is already known.
+       *
+       * @param inlineSnapshot - The snapshot to compare against.
+       */
+      toDisplayRedbox(inlineSnapshot?: string): Promise<void>
+
+      /**
+       * Inline snapshot matcher for a Redbox that's collapsed by default.
+       * When a Redbox is immediately displayed ,
+       * use {@link toDisplayRedbox} instead.
+       *
+       * Unintented content in the snapshot should be reported to the Next.js DX team.
+       * <FIXME-internal-frame> in the snapshot would be unintended.
+       * Any node_modules in the snapshot would be unintended.
+       * Differences in the snapshot between Turbopack and Webpack would be unintended though is already known.
+       *
+       * @param inlineSnapshot - The snapshot to compare against.
+       */
+      toDisplayCollapsedRedbox(inlineSnapshot?: string): Promise<void>
+    }
+  }
+}
+
+interface RedboxSnapshot {
+  title: string
+  description: string
+  source: string
+  stack: string[]
+  count: number
+}
+
+async function createRedboxSnaspshot(
+  browser: BrowserInterface
+): Promise<RedboxSnapshot> {
+  const [title, description, source, stack, count] = await Promise.all([
+    getRedboxTitle(browser),
+    getRedboxDescription(browser),
+    getRedboxSource(browser),
+    getRedboxCallStack(browser),
+    getRedboxTotalErrorCount(browser),
+  ])
+
+  // We don't need to test the codeframe logic everywhere.
+  // Here we focus on the cursor position of the top most frame
+  // From
+  //
+  // pages/index.js (3:11) @ eval
+  //
+  //   1 | export default function Page() {
+  //   2 |   [1, 2, 3].map(() => {
+  // > 3 |     throw new Error("anonymous error!");
+  //     |           ^
+  //   4 |   })
+  //   5 | }
+  //
+  // to
+  //
+  // pages/index.js (3:11) @ Page
+  // > 3 |     throw new Error("anonymous error!");
+  //     |           ^
+  let focusedSource = source
+  if (source !== null) {
+    focusedSource = ''
+    const sourceFrameLines = source.split('\n')
+    for (let i = 0; i < sourceFrameLines.length; i++) {
+      const sourceFrameLine = sourceFrameLines[i]
+      if (sourceFrameLine === '') {
+        continue
+      }
+
+      if (sourceFrameLine.startsWith('>')) {
+        // This is where the cursor will point
+        // Include the cursor and nothing below since it's just surrounding code.
+        focusedSource += '\n' + sourceFrameLine
+        focusedSource += '\n' + sourceFrameLines[i + 1]
+        break
+      }
+      const isCodeFrameLine = /^ {2}\s*\d+ \|/.test(sourceFrameLine)
+      if (!isCodeFrameLine) {
+        focusedSource += '\n' + sourceFrameLine
+      }
+    }
+  }
+
+  return { title, description, source: focusedSource?.trim(), stack, count }
+}
+
+expect.extend({
+  async toDisplayRedbox(
+    this: MatcherContext,
+    browser: BrowserInterface,
+    expectedRedboxSnapshot?: string
+  ) {
+    // Otherwise jest uses the async stack trace which makes it impossible to know the actual callsite of `toMatchSpeechInlineSnapshot`.
+    // @ts-expect-error -- Not readonly
+    this.error = new Error()
+    // Abort test on first mismatch.
+    // Subsequent actions will be based on an incorrect state otherwise and almost always fail as well.
+    // TODO: Actually, we may want to proceed. Kinda nice to also do more assertions later.
+    this.dontThrow = () => {}
+
+    try {
+      await assertHasRedbox(browser)
+    } catch {
+      // argument length is relevant.
+      // Jest will update absent snapshots but fail if you specify a snapshot even if undefined.
+      if (expectedRedboxSnapshot === undefined) {
+        return toMatchInlineSnapshot.call(this, '<no redbox found>')
+      } else {
+        return toMatchInlineSnapshot.call(
+          this,
+          '<no redbox found>',
+          expectedRedboxSnapshot
+        )
+      }
+    }
+
+    const redbox = await createRedboxSnaspshot(browser)
+
+    // argument length is relevant.
+    // Jest will update absent snapshots but fail if you specify a snapshot even if undefined.
+    if (expectedRedboxSnapshot === undefined) {
+      return toMatchInlineSnapshot.call(this, redbox)
+    } else {
+      return toMatchInlineSnapshot.call(this, redbox, expectedRedboxSnapshot)
+    }
+  },
+  async toDisplayCollapsedRedbox(
+    this: MatcherContext,
+    browser: BrowserInterface,
+    expectedRedboxSnapshot?: string
+  ) {
+    // Otherwise jest uses the async stack trace which makes it impossible to know the actual callsite of `toMatchSpeechInlineSnapshot`.
+    // @ts-expect-error -- Not readonly
+    this.error = new Error()
+    // Abort test on first mismatch.
+    // Subsequent actions will be based on an incorrect state otherwise and almost always fail as well.
+    // TODO: Actually, we may want to proceed. Kinda nice to also do more assertions later.
+    this.dontThrow = () => {}
+
+    try {
+      await openRedbox(browser)
+    } catch {
+      // argument length is relevant.
+      // Jest will update absent snapshots but fail if you specify a snapshot even if undefined.
+      if (expectedRedboxSnapshot === undefined) {
+        return toMatchInlineSnapshot.call(this, '<no redbox to open>')
+      } else {
+        return toMatchInlineSnapshot.call(
+          this,
+          '<no redbox to open>',
+          expectedRedboxSnapshot
+        )
+      }
+    }
+
+    const redbox = await createRedboxSnaspshot(browser)
+
+    // argument length is relevant.
+    // Jest will update absent snapshots but fail if you specify a snapshot even if undefined.
+    if (expectedRedboxSnapshot === undefined) {
+      return toMatchInlineSnapshot.call(this, redbox)
+    } else {
+      return toMatchInlineSnapshot.call(this, redbox, expectedRedboxSnapshot)
+    }
+  },
+})
diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
index b8b7ed2310a42..0038048825444 100644
--- a/test/lib/next-test-utils.ts
+++ b/test/lib/next-test-utils.ts
@@ -922,7 +922,9 @@ export async function getRedboxTotalErrorCount(browser: BrowserInterface) {
   return parseInt(header.match(/\d+ of (\d+) error/)?.[1], 10)
 }
 
-export function getRedboxSource(browser: BrowserInterface) {
+export function getRedboxSource(
+  browser: BrowserInterface
+): Promise<string | undefined> {
   return browser.eval(() => {
     const portal = [].slice
       .call(document.querySelectorAll('nextjs-portal'))
@@ -937,7 +939,9 @@ export function getRedboxSource(browser: BrowserInterface) {
   })
 }
 
-export function getRedboxTitle(browser: BrowserInterface) {
+export function getRedboxTitle(
+  browser: BrowserInterface
+): Promise<string | null> {
   return browser.eval(() => {
     const portal = [].slice
       .call(document.querySelectorAll('nextjs-portal'))
@@ -949,7 +953,9 @@ export function getRedboxTitle(browser: BrowserInterface) {
   })
 }
 
-export function getRedboxDescription(browser: BrowserInterface) {
+export function getRedboxDescription(
+  browser: BrowserInterface
+): Promise<string> {
   return browser.eval(() => {
     const portal = [].slice
       .call(document.querySelectorAll('nextjs-portal'))
@@ -1247,17 +1253,46 @@ export async function hasRedboxCallStack(browser: BrowserInterface) {
 
 export async function getRedboxCallStack(
   browser: BrowserInterface
-): Promise<string | null> {
-  await browser.waitForElementByCss('[data-nextjs-call-stack-frame]', 30000)
+): Promise<string[] | null> {
+  return browser.eval(() => {
+    const portal = [].slice
+      .call(document.querySelectorAll('nextjs-portal'))
+      .find((p) => p.shadowRoot.querySelector('[data-nextjs-call-stack-frame]'))
+    const root = portal?.shadowRoot
+    const frameElements = root?.querySelectorAll(
+      '[data-nextjs-call-stack-frame]'
+    )
 
-  const callStackFrameElements = await browser.elementsByCss(
-    '[data-nextjs-call-stack-frame]'
-  )
-  const callStackFrameTexts = await Promise.all(
-    callStackFrameElements.map((f) => f.innerText())
-  )
+    const stack: string[] = []
+    if (frameElements !== undefined) {
+      let foundInternalFrame = false
+      for (const frameElement of frameElements) {
+        // `innerText` will be "${methodName}\n${location}".
+        // Ideally `innerText` would be "${methodName} ${location}"
+        // so that c&p automatically does the right thing.
+        const frame = frameElement.innerText.replace('\n', ' ')
+
+        // Feel free to adjust this heuristic if it accidentally hides too much.
+        const isInternalFrame =
+          // likely https://linear.app/vercel/issue/NDX-464
+          // location starts with `./dist` e.g. "NotFoundBoundary ./dist/esm/[...]"
+          / .\/dist\//.test(frame)
+
+        if (isInternalFrame) {
+          // We only add one of these frames.
+          // If we'd add all of them, the stack would change during refactorings which is annoying.
+          if (!foundInternalFrame) {
+            stack.push('<FIXME-internal-frame>')
+          }
+          foundInternalFrame = true
+        } else {
+          stack.push(frame)
+        }
+      }
+    }
 
-  return callStackFrameTexts.join('\n').trim()
+    return stack
+  })
 }
 
 export async function getRedboxCallStackCollapsed(