[instant] Allow providing user feedback for blocking route errors by eps1lon · Pull Request #90498 · vercel/next.js

eps1lon · 2026-02-25T09:12:31Z

These errors previously had no error codes so users couldn't provide feedback.

To allow feedback, we need to ensure we generate a code and send it to the browser.

Generating a code just requires moving the error instantiation so that the transform sees the message as a literal not variable.

Currently we send errors as-is via React's Flight protocol which doesn't transport arbitrary properties on error instances. We now send the errors and a mapping from error instance to code. Since Flight transports referential equality for duplicate objects, we can use the map to restore the error codes manually.

The code is relevant for user feedback. Its absence indicates no user feedback can be provided.

eps1lon · 2026-02-25T09:12:44Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

[instant] Allow providing user feedback for blocking route errors #90498 👈 (View in Graphite)
[test] Include error code in Redbox snapshot #90497
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

nextjs-bot · 2026-02-25T09:17:48Z

Failing test suites

Commit: cde6f09 | About building and testing Next.js

pnpm test test/integration/server-side-dev-errors/test/index.test.ts (turbopack) (job)

server-side dev errors > should show server-side error for gsp page correctly (DD)
server-side dev errors > should show server-side error for gssp page correctly (DD)
server-side dev errors > should show server-side error for dynamic gssp page correctly (DD)
server-side dev errors > should show server-side error for api route correctly (DD)
server-side dev errors > should show server-side error for dynamic api route correctly (DD)

Expand output

● server-side dev errors › should show server-side error for gsp page correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-side dev errors should show server-side error for gsp page correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "missingVar is not defined",
    "environmentLabel": null,
    "label": "Runtime ReferenceError",
    "source": "pages/gsp.js (6:3) @ getStaticProps
  > 6 |   missingVar;return {

  84 |       )
  85 |
> 86 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  87 |         {
  88 |           "description": "missingVar is not defined",
  89 |           "environmentLabel": null,

  at Object.toDisplayRedbox (integration/server-side-dev-errors/test/index.test.ts:86:29)

● server-side dev errors › should show server-side error for gssp page correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-side dev errors should show server-side error for gssp page correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "missingVar is not defined",
    "environmentLabel": null,
    "label": "Runtime ReferenceError",
    "source": "pages/gssp.js (6:3) @ getServerSideProps
  > 6 |   missingVar;return {

  134 |       )
  135 |
> 136 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  137 |         {
  138 |           "description": "missingVar is not defined",
  139 |           "environmentLabel": null,

  at Object.toDisplayRedbox (integration/server-side-dev-errors/test/index.test.ts:136:29)

● server-side dev errors › should show server-side error for dynamic gssp page correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-side dev errors should show server-side error for dynamic gssp page correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "missingVar is not defined",
    "environmentLabel": null,
    "label": "Runtime ReferenceError",
    "source": "pages/blog/[slug].js (6:3) @ getServerSideProps
  > 6 |   missingVar;return {

  184 |       )
  185 |
> 186 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  187 |         {
  188 |           "description": "missingVar is not defined",
  189 |           "environmentLabel": null,

  at Object.toDisplayRedbox (integration/server-side-dev-errors/test/index.test.ts:186:29)

● server-side dev errors › should show server-side error for api route correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-side dev errors should show server-side error for api route correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "missingVar is not defined",
    "environmentLabel": null,
    "label": "Runtime ReferenceError",
    "source": "pages/api/hello.js (2:3) @ handler
  > 2 |   missingVar;res.status(200).json({ hello: 'world' })

  244 |       }
  245 |
> 246 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  247 |         {
  248 |           "description": "missingVar is not defined",
  249 |           "environmentLabel": null,

  at Object.toDisplayRedbox (integration/server-side-dev-errors/test/index.test.ts:246:29)

● server-side dev errors › should show server-side error for dynamic api route correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-side dev errors should show server-side error for dynamic api route correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "missingVar is not defined",
    "environmentLabel": null,
    "label": "Runtime ReferenceError",
    "source": "pages/api/blog/[slug].js (2:3) @ handler
  > 2 |   missingVar;res.status(200).json({ slug: req.query.slug })

  310 |       }
  311 |
> 312 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  313 |         {
  314 |           "description": "missingVar is not defined",
  315 |           "environmentLabel": null,

  at Object.toDisplayRedbox (integration/server-side-dev-errors/test/index.test.ts:312:29)

pnpm test-dev test/e2e/app-dir/instant-validation-causes/instant-validation-causes.test.ts (job)

fetch failures have good stack traces in edge runtime > when awaiting fetch using an unknown domain, stack traces are preserved (DD)

Expand output

● fetch failures have good stack traces in edge runtime › when awaiting fetch using an unknown domain, stack traces are preserved

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `fetch failures have good stack traces in edge runtime when awaiting \`fetch\` using an unknown domain, stack traces are preserved 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "fetch failed",
    "environmentLabel": null,
    "label": "Runtime TypeError",
    "source": "src/fetcher.js (6:16) @ anotherFetcher
  > 6 |   return await fetch(...args)

  46 |         // Turbopack produces incorrect mappings in the sourcemap.
  47 |         // eslint-disable-next-line jest/no-standalone-expect
> 48 |         await expect(browser).toDisplayRedbox(`
     |                               ^
  49 |          {
  50 |            "description": "fetch failed",
  51 |            "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/fetch-failures-have-good-stack-traces-in-edge-runtime/fetch-failures-have-good-stack-traces-in-edge-runtime.test.ts:48:31)

pnpm test-dev test/development/app-dir/hydration-error-count/hydration-error-count.test.ts (job)

instant validation > requires a static shell if a below a static layout page is configured as blocking > errors in dev (DD)

Expand output

● instant validation › requires a static shell if a below a static layout page is configured as blocking › errors in dev

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation requires a static shell if a below a static layout page is configured as blocking errors in dev 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1081",
    "description": "Data that blocks navigation was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this, you can either:

  44 |         const browser = await next.browser('/blocking-page-below-static')
  45 |         await browser.elementByCss('main')
> 46 |         await expect(browser).toDisplayCollapsedRedbox(`
     |                               ^
  47 |          {
  48 |            "description": "Data that blocks navigation was accessed outside of <Suspense>
  49 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts:46:31)

pnpm test-dev-turbo test/development/acceptance-app/hydration-error.test.ts (turbopack) (job)

Error overlay for hydration errors in App router > should show correct hydration error when extra attributes set on server (DD)
Error overlay for hydration errors in App router > should show correct hydration error when server renders an extra text node in an invalid place (DD)
Error overlay for hydration errors in App router > should show correct hydration error when server renders an extra whitespace in an invalid place (DD)
Error overlay for hydration errors in App router > should only show one hydration error when bad nesting happened - p under p (DD)
Error overlay for hydration errors in App router > should only show one hydration error when bad nesting happened - div under p (DD)
Error overlay for hydration errors in App router > should only show one hydration error when bad nesting happened - div > tr (DD)
Error overlay for hydration errors in App router > should show the highlighted bad nesting html snippet when bad nesting happened (DD)
Error overlay for hydration errors in App router > should show error if script is directly placed under html instead of body (DD)

Expand output

● Error overlay for hydration errors in App router › should show correct hydration error when extra attributes set on server

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when extra attributes set on server 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>

  138 |
  139 |     if (isTurbopack) {
> 140 |       await expect(browser).toDisplayCollapsedRedbox(`
      |                             ^
  141 |        {
  142 |          "componentStack": "...
  143 |            <Next.js Internal Component>

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:140:29)

● Error overlay for hydration errors in App router › should show correct hydration error when server renders an extra text node in an invalid place

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when server renders an extra text node in an invalid place 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>

  334 |     })
  335 |
> 336 |     await expect(browser).toDisplayCollapsedRedbox(`
      |                           ^
  337 |      [
  338 |        {
  339 |          "componentStack": "...

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:336:27)

● Error overlay for hydration errors in App router › should show correct hydration error when server renders an extra whitespace in an invalid place

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when server renders an extra whitespace in an invalid place 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>

  407 |     const browser = await next.browser('/extra-whitespace-invalid-place')
  408 |
> 409 |     await expect(browser).toDisplayCollapsedRedbox(`
      |                           ^
  410 |      {
  411 |        "componentStack": "...
  412 |          <Next.js Internal Component>

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:409:27)

● Error overlay for hydration errors in App router › should only show one hydration error when bad nesting happened - p under p

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should only show one hydration error when bad nesting happened - p under p 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>

  501 |     })
  502 |
> 503 |     await expect(browser).toDisplayCollapsedRedbox(`
      |                           ^
  504 |      [
  505 |        {
  506 |          "componentStack": "...

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:503:27)

● Error overlay for hydration errors in App router › should only show one hydration error when bad nesting happened - div under p

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should only show one hydration error when bad nesting happened - div under p 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>

  558 |     })
  559 |
> 560 |     await expect(browser).toDisplayCollapsedRedbox(`
      |                           ^
  561 |      [
  562 |        {
  563 |          "componentStack": "...

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:560:27)

● Error overlay for hydration errors in App router › should only show one hydration error when bad nesting happened - div > tr

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should only show one hydration error when bad nesting happened - div > tr 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>

  616 |     })
  617 |
> 618 |     await expect(browser).toDisplayCollapsedRedbox(`
      |                           ^
  619 |      [
  620 |        {
  621 |          "componentStack": "...

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:618:27)

● Error overlay for hydration errors in App router › should show the highlighted bad nesting html snippet when bad nesting happened

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show the highlighted bad nesting html snippet when bad nesting happened 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>
@@ -34,10 +35,11 @@
        "p <anonymous>",
        "Page app/(default)/bad-nesting/page.tsx (10:15)",
      ],
    },
    {
+     "code": "E394",
      "description": "<p> cannot contain a nested <p>.
  See this log for the ancestor stack trace.",
      "environmentLabel": null,
      "label": "Console Error",
      "source": "app/(default)/bad-nesting/page.tsx (5:5) @ Page

  673 |     })
  674 |
> 675 |     await expect(browser).toDisplayCollapsedRedbox(`
      |                           ^
  676 |      [
  677 |        {
  678 |          "componentStack": "...

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:675:27)

● Error overlay for hydration errors in App router › should show error if script is directly placed under html instead of body

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show error if script is directly placed under html instead of body 1`

- Snapshot  - 0
+ Received  + 3

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.",
      "environmentLabel": null,
      "label": "Console Error",
      "source": "app/(script-under-html)/layout.tsx (8:7) @ RootLayout
  >  8 |       <Script
@@ -9,10 +10,11 @@
      "stack": [
        "RootLayout app/(script-under-html)/layout.tsx (8:7)",
      ],
    },
    {
+     "code": "E394",
      "componentStack": "...
      <Next.js Internal Component>
        <Next.js Internal Component>
          <Next.js Internal Component>
            <Next.js Internal Component>
@@ -44,10 +46,11 @@
        "script <anonymous>",
        "RootLayout app/(script-under-html)/layout.tsx (8:7)",
      ],
    },
    {
+     "code": "E394",
      "description": "<html> cannot contain a nested <script>.
  See this log for the ancestor stack trace.",
      "environmentLabel": null,
      "label": "Console Error",
      "source": "app/(script-under-html)/layout.tsx (6:5) @ RootLayout

  751 |
  752 |     if (isTurbopack) {
> 753 |       await expect(browser).toDisplayCollapsedRedbox(`
      |                             ^
  754 |        [
  755 |          {
  756 |            "description": "Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.",

  at Object.toDisplayCollapsedRedbox (development/acceptance-app/hydration-error.test.ts:753:29)

pnpm test-dev test/development/app-dir/owner-stack/owner-stack.test.ts (job)

Undefined default export > should error if page component does not have default export (DD)
Undefined default export > should error if layout component does not have default export (DD)
Undefined default export > should error if not-found component does not have default export when trigger not-found boundary (DD)

Expand output

● Undefined default export › should error if page component does not have default export

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Undefined default export should error if page component does not have default export 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "The default export is not a React Component in "/specific-path/1/page"",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": null,
    "stack": [],

  13 |       const browser = await next.browser('/specific-path/1')
  14 |
> 15 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  16 |        {
  17 |          "description": "The default export is not a React Component in "/specific-path/1/page"",
  18 |          "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/undefined-default-export/undefined-default-export.test.ts:15:29)

● Undefined default export › should error if layout component does not have default export

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Undefined default export should error if layout component does not have default export 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "The default export is not a React Component in "/specific-path/2/layout"",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": null,
    "stack": [],

  27 |       const browser = await next.browser('/specific-path/2')
  28 |
> 29 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  30 |        {
  31 |          "description": "The default export is not a React Component in "/specific-path/2/layout"",
  32 |          "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/undefined-default-export/undefined-default-export.test.ts:29:29)

● Undefined default export › should error if not-found component does not have default export when trigger not-found boundary

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Undefined default export should error if not-found component does not have default export when trigger not-found boundary 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "The default export is not a React Component in "/will-not-found/not-found"",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": null,
    "stack": [],

  41 |       const browser = await next.browser('/will-not-found')
  42 |
> 43 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  44 |        {
  45 |          "description": "The default export is not a React Component in "/will-not-found/not-found"",
  46 |          "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/undefined-default-export/undefined-default-export.test.ts:43:29)

pnpm test-dev test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts (job)

use-cache-search-params > should show an error when searchParams are used inside of a cached generateMetadata (DD)
use-cache-search-params > should show an error when searchParams are used inside of a cached generateViewport (DD)

Expand output

● use-cache-search-params › should show an error when searchParams are used inside of a cached generateMetadata

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `use-cache-search-params should show an error when searchParams are used inside of a cached generateMetadata 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route /search-params-used-generate-metadata used `searchParams` inside "use cache". Accessing dynamic request data inside a cache scope is not supported. If you need some search params inside a cached function await `searchParams` outside of the cached function and pass only the required search params as arguments to the cached function. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/search-params-used-generate-metadata/page.tsx (9:17) @ generateMetadata
  >  9 |   const title = (await searchParams).title

  135 |       )
  136 |
> 137 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  138 |        {
  139 |          "description": "Route /search-params-used-generate-metadata used \`searchParams\` inside "use cache". Accessing dynamic request data inside a cache scope is not supported. If you need some search params inside a cached function await \`searchParams\` outside of the cached function and pass only the required search params as arguments to the cached function. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
  140 |          "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts:137:29)

● use-cache-search-params › should show an error when searchParams are used inside of a cached generateViewport

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `use-cache-search-params should show an error when searchParams are used inside of a cached generateViewport 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route /search-params-used-generate-viewport used `searchParams` inside "use cache". Accessing dynamic request data inside a cache scope is not supported. If you need some search params inside a cached function await `searchParams` outside of the cached function and pass only the required search params as arguments to the cached function. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/search-params-used-generate-viewport/page.tsx (9:17) @ generateViewport
  >  9 |   const color = (await searchParams).color

  155 |       )
  156 |
> 157 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  158 |        {
  159 |          "description": "Route /search-params-used-generate-viewport used \`searchParams\` inside "use cache". Accessing dynamic request data inside a cache scope is not supported. If you need some search params inside a cached function await \`searchParams\` outside of the cached function and pass only the required search params as arguments to the cached function. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
  160 |          "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts:157:29)

pnpm test-dev test/development/app-dir/server-navigation-error/server-navigation-error.test.ts (job)

server-navigation-error > middleware > should error on navigation API redirect (DD)
server-navigation-error > middleware > should error on navigation API not-found (DD)
server-navigation-error > pages router > should error on navigation API redirect (DD)
server-navigation-error > pages router > should error on navigation API notFound (DD)

Expand output

● server-navigation-error › pages router › should error on navigation API redirect

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-navigation-error pages router should error on navigation API redirect 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Next.js navigation API is not allowed to be used in Pages Router.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "pages/pages/redirect.tsx (4:11) @ Page
  > 4 |   redirect('/')

  10 |       const browser = await next.browser('/pages/redirect')
  11 |
> 12 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  13 |        {
  14 |          "description": "Next.js navigation API is not allowed to be used in Pages Router.",
  15 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/server-navigation-error/server-navigation-error.test.ts:12:29)

● server-navigation-error › pages router › should error on navigation API notFound

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-navigation-error pages router should error on navigation API notFound 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Next.js navigation API is not allowed to be used in Pages Router.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "pages/pages/not-found.tsx (4:11) @ Page
  > 4 |   notFound()

  28 |       const browser = await next.browser('/pages/not-found')
  29 |
> 30 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  31 |        {
  32 |          "description": "Next.js navigation API is not allowed to be used in Pages Router.",
  33 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/server-navigation-error/server-navigation-error.test.ts:30:29)

● server-navigation-error › middleware › should error on navigation API redirect

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-navigation-error middleware should error on navigation API redirect  1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Next.js navigation API is not allowed to be used in Middleware.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "middleware.ts (8:13) @ middleware
  >  8 |     redirect('/')

  50 |       await browser.refresh()
  51 |
> 52 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  53 |        {
  54 |          "description": "Next.js navigation API is not allowed to be used in Middleware.",
  55 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/server-navigation-error/server-navigation-error.test.ts:52:29)

● server-navigation-error › middleware › should error on navigation API not-found

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `server-navigation-error middleware should error on navigation API not-found 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Next.js navigation API is not allowed to be used in Middleware.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "middleware.ts (6:13) @ middleware
  > 6 |     notFound()

  68 |       const browser = await next.browser('/middleware/not-found')
  69 |
> 70 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  71 |        {
  72 |          "description": "Next.js navigation API is not allowed to be used in Middleware.",
  73 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/server-navigation-error/server-navigation-error.test.ts:70:29)

pnpm test-dev test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts (job)

serialize-circular-error > should serialize the object from server component in console correctly (DD)
serialize-circular-error > should serialize the object from client component in console correctly (DD)

Expand output

● serialize-circular-error › should serialize the object from server component in console correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `serialize-circular-error should serialize the object from server component in console correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "An error occurred but serializing the error message failed.",
    "environmentLabel": "Server",
    "label": "Runtime Error",
    "source": null,
    "stack": [],

   9 |     const browser = await next.browser('/')
  10 |
> 11 |     await expect(browser).toDisplayRedbox(`
     |                           ^
  12 |      {
  13 |        "description": "An error occurred but serializing the error message failed.",
  14 |        "environmentLabel": "Server",

  at Object.toDisplayRedbox (development/app-dir/serialize-circular-error/serialize-circular-error.test.ts:11:27)

● serialize-circular-error › should serialize the object from client component in console correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `serialize-circular-error should serialize the object from client component in console correctly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "[object Object]",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": null,
    "stack": [],

  28 |
  29 |     // TODO: Format arbitrary messages in Redbox
> 30 |     await expect(browser).toDisplayRedbox(`
     |                           ^
  31 |      {
  32 |        "description": "[object Object]",
  33 |        "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/serialize-circular-error/serialize-circular-error.test.ts:30:27)

pnpm test-dev-turbo test/development/acceptance-app/rsc-runtime-errors.test.ts (turbopack) (job)

ReactRefreshRegression > shows an overlay for a server-side error (DD)

Expand output

● ReactRefreshRegression › shows an overlay for a server-side error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `ReactRefreshRegression shows an overlay for a server-side error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "boom",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "pages/index.js (1:36) @ {default export}
  > 1 | export default function () { throw new Error('boom'); }

  283 |
  284 |     if (isTurbopack) {
> 285 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  286 |        {
  287 |          "description": "boom",
  288 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance/ReactRefreshRegression.test.ts:285:29)

pnpm test-dev test/development/app-dir/ssr-only-error/ssr-only-error.test.ts (job)

ReactRefreshRegression > shows an overlay for a server-side error (DD)

Expand output

● ReactRefreshRegression › shows an overlay for a server-side error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `ReactRefreshRegression shows an overlay for a server-side error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "boom",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "pages/index.js (1:36) @ default
  > 1 | export default function () { throw new Error('boom'); }

  311 |       `)
  312 |     } else {
> 313 |       await expect(browser).toDisplayRedbox(`
      |                             ^
  314 |        {
  315 |          "description": "boom",
  316 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance/ReactRefreshRegression.test.ts:313:29)

pnpm test-dev test/e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts (job)

Validations for > When rendering from a Client Component > errors if there are no children (DD)
Validations for > When rendering from a Client Component > errors if there are multiple children (DD)
Validations for > When rendering from a Client Component > warns and throws an error if the child is lazy JSX (DD)
Validations for > When rendering from a Server Component > Rendering directly > warns if the child is a synchronous server component (DD)
Validations for > When rendering from a Server Component > Rendering directly > warns and throws an error if the child is an asynchronous server component (DD)
Validations for > When rendering from a Server Component > Rendering directly > warns if the child is a lazy component (DD)
Validations for > When rendering from a Server Component > Rendering a Client Component that renders > throws an error if the child is an asynchronous server component (DD)

Expand output

● Validations for › When rendering from a Server Component › Rendering directly › warns if the child is a synchronous server component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering <Link> directly warns if the child is a synchronous server component 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Using a Server Component as a direct child of `<Link legacyBehavior>` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": "Prerender",
      "label": "Console Error",
      "source": "app/validations/rsc-that-renders-link/synchronous/page.tsx (7:7) @ Page
  >  7 |       <Link href="/about" legacyBehavior>
@@ -9,10 +10,11 @@
      "stack": [
        "Page app/validations/rsc-that-renders-link/synchronous/page.tsx (7:7)",
      ],
    },
    {
+     "code": "E394",
      "description": "`legacyBehavior` is deprecated and will be removed in a future release. A codemod is available to upgrade your components:

  npx @next/codemod@latest new-link .

  Learn more: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components",

  28 |
  29 |         if (isNextDev) {
> 30 |           await expect(browser).toDisplayCollapsedRedbox(`
     |                                 ^
  31 |            [
  32 |              {
  33 |                "description": "Using a Server Component as a direct child of \`<Link legacyBehavior>\` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's \`<a>\` tag.",

  at Object.toDisplayCollapsedRedbox (e2e/legacy-link-behavior/validations.console.test.ts:30:33)

● Validations for › When rendering from a Server Component › Rendering directly › warns and throws an error if the child is an asynchronous server component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering <Link> directly warns and throws an error if the child is an asynchronous server component 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Using a Server Component as a direct child of `<Link legacyBehavior>` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": "Prerender",
      "label": "Console Error",
      "source": "app/validations/rsc-that-renders-link/asynchronous/page.tsx (7:7) @ Page
  >  7 |       <Link href="/about" legacyBehavior>
@@ -9,10 +10,11 @@
      "stack": [
        "Page app/validations/rsc-that-renders-link/asynchronous/page.tsx (7:7)",
      ],
    },
    {
+     "code": "E863",
      "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": null,
      "label": "Runtime Error",
      "source": "app/validations/rsc-that-renders-link/asynchronous/page.tsx (7:7) @ Page
  >  7 |       <Link href="/about" legacyBehavior>

  72 |
  73 |         if (isNextDev) {
> 74 |           await expect(browser).toDisplayRedbox(`
     |                                 ^
  75 |            [
  76 |              {
  77 |                "description": "Using a Server Component as a direct child of \`<Link legacyBehavior>\` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's \`<a>\` tag.",

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:74:33)

● Validations for › When rendering from a Server Component › Rendering directly › warns if the child is a lazy component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering <Link> directly warns if the child is a lazy component 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Using a Lazy Component as a direct child of `<Link legacyBehavior>` from a Server Component is not supported. If you need legacyBehavior, wrap your Lazy Component in a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": "Prerender",
      "label": "Console Error",
      "source": "app/validations/rsc-that-renders-link/lazy/page.tsx (9:7) @ Page
  >  9 |       <Link href="/about" legacyBehavior passHref>
@@ -9,10 +10,11 @@
      "stack": [
        "Page app/validations/rsc-that-renders-link/lazy/page.tsx (9:7)",
      ],
    },
    {
+     "code": "E863",
      "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": null,
      "label": "Runtime Error",
      "source": "app/validations/rsc-that-renders-link/lazy/page.tsx (9:7) @ Page
  >  9 |       <Link href="/about" legacyBehavior passHref>

  143 |
  144 |         if (isNextDev) {
> 145 |           await expect(browser).toDisplayRedbox(`
      |                                 ^
  146 |            [
  147 |              {
  148 |                "description": "Using a Lazy Component as a direct child of \`<Link legacyBehavior>\` from a Server Component is not supported. If you need legacyBehavior, wrap your Lazy Component in a Client Component that renders the Link's \`<a>\` tag.",

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:145:33)

● Validations for › When rendering from a Server Component › Rendering a Client Component that renders › throws an error if the child is an asynchronous server component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering a Client Component that renders <Link> throws an error if the child is an asynchronous server component 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E863",
    "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/rsc-that-renders-client/client-link.tsx (7:10) @ ClientLink
  > 7 |   return <Link legacyBehavior passHref {...props} />

  201 |
  202 |         if (isNextDev) {
> 203 |           await expect(browser).toDisplayRedbox(`
      |                                 ^
  204 |             {
  205 |               "description": "\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.",
  206 |               "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:203:33)

● Validations for › When rendering from a Client Component › errors if there are no children

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Client Component errors if there are no children 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E320",
    "description": "No children were passed to <Link> with `href` of `/about` but one child is required https://nextjs.org/docs/messages/link-no-children",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/client/missing-child/page.tsx (6:10) @ Page
  > 6 |   return <Link href="/about" legacyBehavior></Link>

  260 |
  261 |       if (isNextDev) {
> 262 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  263 |          {
  264 |            "description": "No children were passed to <Link> with \`href\` of \`/about\` but one child is required https://nextjs.org/docs/messages/link-no-children",
  265 |            "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:262:31)

● Validations for › When rendering from a Client Component › errors if there are multiple children

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Client Component errors if there are multiple children 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E266",
    "description": "Multiple children were passed to <Link> with `href` of `/about` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children 
  Open your browser's console to view the Component stack trace.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/client/multiple-children/page.tsx (7:5) @ Page

  291 |
  292 |       if (isNextDev) {
> 293 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  294 |          {
  295 |            "description": "Multiple children were passed to <Link> with \`href\` of \`/about\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children 
  296 |          Open your browser's console to view the Component stack trace.",

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:293:31)

● Validations for › When rendering from a Client Component › warns and throws an error if the child is lazy JSX

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Client Component warns and throws an error if the child is lazy JSX 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E863",
    "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/client/lazy-jsx/page.tsx (9:7) @ Page
  >  9 |       <Link href="/about" legacyBehavior passHref>

  331 |
  332 |       if (isNextDev) {
> 333 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  334 |          {
  335 |            "description": "\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.",
  336 |            "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:333:31)

pnpm test-dev test/development/app-dir/missing-required-html-tags/index.test.ts (job)

ReactRefreshLogBox > module init error not shown (DD)
ReactRefreshLogBox > non-Error errors are handled properly (DD)
ReactRefreshLogBox > should show anonymous frames from stack trace (DD)
ReactRefreshLogBox > should collapse nodejs internal stack frames from stack trace (DD)

Expand output

● ReactRefreshLogBox › module init error not shown

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `ReactRefreshLogBox module init error not shown 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "no",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "index.js (3:7) @ eval
  > 3 | throw new Error('no')

  201 |         `)
  202 |       } else {
> 203 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  204 |          {
  205 |            "description": "no",
  206 |            "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance/ReactRefreshLogBox.test.ts:203:31)

● ReactRefreshLogBox › non-Error errors are handled properly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `ReactRefreshLogBox non-Error errors are handled properly 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "{"a":1,"b":"x"}",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": null,
    "stack": [],

  1105 |       `)
  1106 |     } else {
> 1107 |       await expect(browser).toDisplayRedbox(`
       |                             ^
  1108 |        {
  1109 |          "description": "{"a":1,"b":"x"}",
  1110 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance/ReactRefreshLogBox.test.ts:1107:29)

● ReactRefreshLogBox › should show anonymous frames from stack trace

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `ReactRefreshLogBox should show anonymous frames from stack trace 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "anonymous error!",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "pages/index.js (3:11) @ eval
  > 3 |     throw new Error("anonymous error!");

  1418 |       `)
  1419 |     } else {
> 1420 |       await expect(browser).toDisplayRedbox(`
       |                             ^
  1421 |        {
  1422 |          "description": "anonymous error!",
  1423 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance/ReactRefreshLogBox.test.ts:1420:29)

● ReactRefreshLogBox › should collapse nodejs internal stack frames from stack trace

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `ReactRefreshLogBox should collapse nodejs internal stack frames from stack trace 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Invalid URL",
    "environmentLabel": null,
    "label": "Runtime TypeError",
    "source": "pages/index.js (4:3) @ createURL
  > 4 |   new URL("/", "invalid")

  1459 |     const { browser } = sandbox
  1460 |
> 1461 |     await expect(browser).toDisplayRedbox(`
       |                           ^
  1462 |      {
  1463 |        "description": "Invalid URL",
  1464 |        "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance/ReactRefreshLogBox.test.ts:1461:27)

pnpm test-dev test/development/app-dir/dynamic-error-trace/index.test.ts (job)

next-link > errors on invalid href (DD)
next-link > invalid prefetch causes runtime error (dev-only) (DD)

Expand output

● next-link › errors on invalid href

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `next-link errors on invalid href 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E319",
    "description": "Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.
  Open your browser's console to view the Component stack trace.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/invalid-href/page.js (6:10) @ Hello

  14 |
  15 |     if (isNextDev) {
> 16 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  17 |        {
  18 |          "description": "Failed prop type: The prop \`href\` expects a \`string\` or \`object\` in \`<Link>\`, but got \`undefined\` instead.
  19 |        Open your browser's console to view the Component stack trace.",

  at Object.toDisplayRedbox (e2e/next-link-errors/next-link-errors.test.ts:16:29)

● next-link › invalid prefetch causes runtime error (dev-only)

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `next-link invalid \`prefetch\` causes runtime error (dev-only) 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E319",
    "description": "Failed prop type: The prop `prefetch` expects a `boolean | "auto"` in `<Link>`, but got `string` instead.
  Open your browser's console to view the Component stack trace.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/invalid-prefetch/page.js (7:5) @ Hello

  39 |
  40 |     if (isNextDev) {
> 41 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  42 |        {
  43 |          "description": "Failed prop type: The prop \`prefetch\` expects a \`boolean | "auto"\` in \`<Link>\`, but got \`string\` instead.
  44 |        Open your browser's console to view the Component stack trace.",

  at Object.toDisplayRedbox (e2e/next-link-errors/next-link-errors.test.ts:41:29)

pnpm test-dev test/e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts (job)

instant validation > requires a static shell if a below a static layout page is configured as blocking > errors in dev (DD)

Expand output

● instant validation › requires a static shell if a below a static layout page is configured as blocking › errors in dev

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation requires a static shell if a below a static layout page is configured as blocking errors in dev 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1081",
    "description": "Data that blocks navigation was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this, you can either:

  44 |         const browser = await next.browser('/blocking-page-below-static')
  45 |         await browser.elementByCss('main')
> 46 |         await expect(browser).toDisplayCollapsedRedbox(`
     |                               ^
  47 |          {
  48 |            "description": "Data that blocks navigation was accessed outside of <Suspense>
  49 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation-static-shells/instant-validation-static-shells.test.ts:46:31)

pnpm test-dev-turbo test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts (turbopack) (job)

Validations for > When rendering from a Client Component > errors if there are no children (DD)
Validations for > When rendering from a Client Component > errors if there are multiple children (DD)
Validations for > When rendering from a Client Component > warns and throws an error if the child is lazy JSX (DD)
Validations for > When rendering from a Server Component > Rendering directly > warns if the child is a synchronous server component (DD)
Validations for > When rendering from a Server Component > Rendering directly > warns and throws an error if the child is an asynchronous server component (DD)
Validations for > When rendering from a Server Component > Rendering directly > warns if the child is a lazy component (DD)
Validations for > When rendering from a Server Component > Rendering a Client Component that renders > throws an error if the child is an asynchronous server component (DD)

Expand output

● Validations for › When rendering from a Server Component › Rendering directly › warns if the child is a synchronous server component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering <Link> directly warns if the child is a synchronous server component 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Using a Server Component as a direct child of `<Link legacyBehavior>` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": "Prerender",
      "label": "Console Error",
      "source": "app/validations/rsc-that-renders-link/synchronous/page.tsx (7:7) @ Page
  >  7 |       <Link href="/about" legacyBehavior>
@@ -9,10 +10,11 @@
      "stack": [
        "Page app/validations/rsc-that-renders-link/synchronous/page.tsx (7:7)",
      ],
    },
    {
+     "code": "E394",
      "description": "`legacyBehavior` is deprecated and will be removed in a future release. A codemod is available to upgrade your components:

  npx @next/codemod@latest new-link .

  Learn more: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#remove-a-tags-from-link-components",

  28 |
  29 |         if (isNextDev) {
> 30 |           await expect(browser).toDisplayCollapsedRedbox(`
     |                                 ^
  31 |            [
  32 |              {
  33 |                "description": "Using a Server Component as a direct child of \`<Link legacyBehavior>\` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's \`<a>\` tag.",

  at Object.toDisplayCollapsedRedbox (e2e/legacy-link-behavior/validations.console.test.ts:30:33)

● Validations for › When rendering from a Server Component › Rendering directly › warns and throws an error if the child is an asynchronous server component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering <Link> directly warns and throws an error if the child is an asynchronous server component 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Using a Server Component as a direct child of `<Link legacyBehavior>` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": "Prerender",
      "label": "Console Error",
      "source": "app/validations/rsc-that-renders-link/asynchronous/page.tsx (7:7) @ Page
  >  7 |       <Link href="/about" legacyBehavior>
@@ -9,10 +10,11 @@
      "stack": [
        "Page app/validations/rsc-that-renders-link/asynchronous/page.tsx (7:7)",
      ],
    },
    {
+     "code": "E863",
      "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": null,
      "label": "Runtime Error",
      "source": "app/validations/rsc-that-renders-link/asynchronous/page.tsx (7:7) @ Page
  >  7 |       <Link href="/about" legacyBehavior>

  72 |
  73 |         if (isNextDev) {
> 74 |           await expect(browser).toDisplayRedbox(`
     |                                 ^
  75 |            [
  76 |              {
  77 |                "description": "Using a Server Component as a direct child of \`<Link legacyBehavior>\` is not supported. If you need legacyBehavior, wrap your Server Component in a Client Component that renders the Link's \`<a>\` tag.",

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:74:33)

● Validations for › When rendering from a Server Component › Rendering directly › warns if the child is a lazy component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering <Link> directly warns if the child is a lazy component 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E394",
      "description": "Using a Lazy Component as a direct child of `<Link legacyBehavior>` from a Server Component is not supported. If you need legacyBehavior, wrap your Lazy Component in a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": "Prerender",
      "label": "Console Error",
      "source": "app/validations/rsc-that-renders-link/lazy/page.tsx (9:7) @ Page
  >  9 |       <Link href="/about" legacyBehavior passHref>
@@ -9,10 +10,11 @@
      "stack": [
        "Page app/validations/rsc-that-renders-link/lazy/page.tsx (9:7)",
      ],
    },
    {
+     "code": "E863",
      "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
      "environmentLabel": null,
      "label": "Runtime Error",
      "source": "app/validations/rsc-that-renders-link/lazy/page.tsx (9:7) @ Page
  >  9 |       <Link href="/about" legacyBehavior passHref>

  143 |
  144 |         if (isNextDev) {
> 145 |           await expect(browser).toDisplayRedbox(`
      |                                 ^
  146 |            [
  147 |              {
  148 |                "description": "Using a Lazy Component as a direct child of \`<Link legacyBehavior>\` from a Server Component is not supported. If you need legacyBehavior, wrap your Lazy Component in a Client Component that renders the Link's \`<a>\` tag.",

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:145:33)

● Validations for › When rendering from a Server Component › Rendering a Client Component that renders › throws an error if the child is an asynchronous server component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Server Component Rendering a Client Component that renders <Link> throws an error if the child is an asynchronous server component 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E863",
    "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/rsc-that-renders-client/client-link.tsx (7:10) @ ClientLink
  > 7 |   return <Link legacyBehavior passHref {...props} />

  201 |
  202 |         if (isNextDev) {
> 203 |           await expect(browser).toDisplayRedbox(`
      |                                 ^
  204 |             {
  205 |               "description": "\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.",
  206 |               "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:203:33)

● Validations for › When rendering from a Client Component › errors if there are no children

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Client Component errors if there are no children 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E320",
    "description": "No children were passed to <Link> with `href` of `/about` but one child is required https://nextjs.org/docs/messages/link-no-children",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/client/missing-child/page.tsx (6:10) @ Page
  > 6 |   return <Link href="/about" legacyBehavior></Link>

  260 |
  261 |       if (isNextDev) {
> 262 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  263 |          {
  264 |            "description": "No children were passed to <Link> with \`href\` of \`/about\` but one child is required https://nextjs.org/docs/messages/link-no-children",
  265 |            "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:262:31)

● Validations for › When rendering from a Client Component › errors if there are multiple children

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Client Component errors if there are multiple children 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E266",
    "description": "Multiple children were passed to <Link> with `href` of `/about` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children 
  Open your browser's console to view the Component stack trace.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/client/multiple-children/page.tsx (7:5) @ Page

  291 |
  292 |       if (isNextDev) {
> 293 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  294 |          {
  295 |            "description": "Multiple children were passed to <Link> with \`href\` of \`/about\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children 
  296 |          Open your browser's console to view the Component stack trace.",

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:293:31)

● Validations for › When rendering from a Client Component › warns and throws an error if the child is lazy JSX

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Validations for <Link legacyBehavior> When rendering from a Client Component warns and throws an error if the child is lazy JSX 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E863",
    "description": "`<Link legacyBehavior>` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's `<a>` tag.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/validations/client/lazy-jsx/page.tsx (9:7) @ Page
  >  9 |       <Link href="/about" legacyBehavior passHref>

  331 |
  332 |       if (isNextDev) {
> 333 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  334 |          {
  335 |            "description": "\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.",
  336 |            "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/legacy-link-behavior/validations.console.test.ts:333:31)

pnpm test-dev-turbo test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts (turbopack) (job)

Cache Components Fallback Validation > should warn about missing Suspense when accessing params if static params are partially known at build time (DD)
Cache Components Fallback Validation > should warn about missing Suspense when accessing params if static params are entirely missing at build time (DD)

Expand output

● Cache Components Fallback Validation › should warn about missing Suspense when accessing params if static params are partially known at build time

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Fallback Validation should warn about missing Suspense when accessing params if static params are partially known at build time 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  51 |     )
  52 |     if (isTurbopack) {
> 53 |       await expect(browser).toDisplayCollapsedRedbox(`
     |                             ^
  54 |        {
  55 |          "description": "Runtime data was accessed outside of <Suspense>
  56 | 

  at Object.toDisplayCollapsedRedbox (development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts:53:29)

● Cache Components Fallback Validation › should warn about missing Suspense when accessing params if static params are entirely missing at build time

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Fallback Validation should warn about missing Suspense when accessing params if static params are entirely missing at build time 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  232 |     const browser = await next.browser('/none/prerendered/wrapped/prerendered')
  233 |     if (isTurbopack) {
> 234 |       await expect(browser).toDisplayCollapsedRedbox(`
      |                             ^
  235 |        {
  236 |          "description": "Runtime data was accessed outside of <Suspense>
  237 | 

  at Object.toDisplayCollapsedRedbox (development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts:234:29)

pnpm test-dev test/e2e/app-dir/not-found-default/index.test.ts (job)

Cache Components Errors > Dev > Dynamic Metadata - Error Route > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Dynamic Metadata - Static Route > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Dynamic Metadata - Static Route With Suspense > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Dynamic Root > should show a collapsed redbox with two errors (DD)
Cache Components Errors > Dev > Dynamic Viewport - Dynamic Route > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Dynamic Viewport - Static Route > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Error Attribution with Sync IO > Guarded RSC with unguarded Client sync IO > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Error Attribution with Sync IO > Unguarded RSC with guarded Client sync IO > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Error Attribution with Sync IO > unguarded RSC with unguarded Client sync IO > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > IO accessed in Client Components > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cacheLife with expire < 5 minutes > microtasky cache > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cacheLife with expire < 5 minutes > nested > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cacheLife with expire < 5 minutes > slow cache > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cacheLife with revalidate: 0 > microtasky cache > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cacheLife with revalidate: 0 > nested > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cacheLife with revalidate: 0 > slow cache > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > cookies > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > draftMode > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > headers > should show a redbox error (DD)
Cache Components Errors > Dev > Inside use cache > reading fallback params > should show a redbox error (DD)
Cache Components Errors > Dev > Sync Dynamic Platform > With Fallback - Math.random() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync Dynamic Platform > Without Fallback - Math.random() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync Dynamic Request > client params > should show a collapsed redbox with a sync access error (DD)
Cache Components Errors > Dev > Sync Dynamic Request > client searchParams > should show a collapsed redbox with a sync access error (DD)
Cache Components Errors > Dev > Sync IO - Current Time - Date() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Current Time - Date.now() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Current Time - new Date() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - generateKeyPairSync() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - generateKeySync() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - generatePrimeSync() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - getRandomValues() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - random-bytes() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - random-fill-sync() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - random-int-between() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - random-int-up-to() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Node Crypto - random-uuid > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Random - Math.random() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Web Crypto - getRandomValue() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > Sync IO - Web Crypto - randomUUID() > should show a collapsed redbox error (DD)
Cache Components Errors > Dev > With use cache: private > in unstable_cache > should show a redbox error (DD)
Cache Components Errors > Dev > With use cache: private > in use cache > should show a redbox error (DD)
Cache Components Errors > Dev > With use cache: private > without Suspense > should show a redbox error (DD)

Expand output

● Cache Components Errors › Dev › Dynamic Metadata - Static Route › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Dynamic Metadata - Static Route should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1077",
    "description": "Data that blocks navigation was accessed inside generateMetadata() in an otherwise prerenderable page

  When Document metadata is the only part of a page that cannot be prerendered Next.js expects you to either make it prerenderable or make some other part of the page non-prerenderable to avoid unintentional partially dynamic pages. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this:

  85 |           const browser = await next.browser(pathname)
  86 |
> 87 |           await expect(browser).toDisplayCollapsedRedbox(`
     |                                 ^
  88 |            {
  89 |              "description": "Data that blocks navigation was accessed inside generateMetadata() in an otherwise prerenderable page
  90 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:87:33)

● Cache Components Errors › Dev › Dynamic Metadata - Error Route › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Dynamic Metadata - Error Route should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1081",
    "description": "Data that blocks navigation was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this, you can either:

  150 |           const browser = await next.browser(pathname)
  151 |
> 152 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  153 |            {
  154 |              "description": "Data that blocks navigation was accessed outside of <Suspense>
  155 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:152:33)

● Cache Components Errors › Dev › Dynamic Metadata - Static Route With Suspense › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Dynamic Metadata - Static Route With Suspense should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1077",
    "description": "Data that blocks navigation was accessed inside generateMetadata() in an otherwise prerenderable page

  When Document metadata is the only part of a page that cannot be prerendered Next.js expects you to either make it prerenderable or make some other part of the page non-prerenderable to avoid unintentional partially dynamic pages. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this:

  288 |           const browser = await next.browser(pathname)
  289 |
> 290 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  291 |            {
  292 |              "description": "Data that blocks navigation was accessed inside generateMetadata() in an otherwise prerenderable page
  293 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:290:33)

● Cache Components Errors › Dev › Dynamic Viewport - Static Route › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Dynamic Viewport - Static Route should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1074",
    "description": "Data that blocks navigation was accessed inside generateViewport()

  Viewport metadata needs to be available on page load so accessing data that waits for a user navigation while producing it prevents Next.js from prerendering an initial UI. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this:

  378 |           const browser = await next.browser(pathname)
  379 |
> 380 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  381 |            {
  382 |              "description": "Data that blocks navigation was accessed inside generateViewport()
  383 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:380:33)

● Cache Components Errors › Dev › Dynamic Viewport - Dynamic Route › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Dynamic Viewport - Dynamic Route should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1074",
    "description": "Data that blocks navigation was accessed inside generateViewport()

  Viewport metadata needs to be available on page load so accessing data that waits for a user navigation while producing it prevents Next.js from prerendering an initial UI. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this:

  443 |           const browser = await next.browser(pathname)
  444 |
> 445 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  446 |            {
  447 |              "description": "Data that blocks navigation was accessed inside generateViewport()
  448 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:445:33)

● Cache Components Errors › Dev › Dynamic Root › should show a collapsed redbox with two errors

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Dynamic Root should show a collapsed redbox with two errors 1`

- Snapshot  - 0
+ Received  + 2

@@ -1,7 +1,8 @@
  [
    {
+     "code": "E1081",
      "description": "Data that blocks navigation was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this, you can either:
@@ -23,10 +24,11 @@
        "FetchingComponent app/dynamic-root/page.tsx (46:50)",
        "Page app/dynamic-root/page.tsx (23:9)",
      ],
    },
    {
+     "code": "E1081",
      "description": "Data that blocks navigation was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this, you can either:

  527 |           const browser = await next.browser(pathname)
  528 |
> 529 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  530 |            [
  531 |              {
  532 |                "description": "Data that blocks navigation was accessed outside of <Suspense>

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:529:33)

● Cache Components Errors › Dev › Sync Dynamic Platform › With Fallback - Math.random() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync Dynamic Platform With Fallback - Math.random() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-random-with-fallback" used `Math.random()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-random-with-fallback/page.tsx (37:23) @ RandomReadingComponent
  > 37 |   const random = Math.random()

  791 |             const browser = await next.browser(pathname)
  792 |
> 793 |             await expect(browser).toDisplayCollapsedRedbox(`
      |                                   ^
  794 |              {
  795 |                "description": "Route "/sync-random-with-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  796 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:793:35)

● Cache Components Errors › Dev › Sync Dynamic Platform › Without Fallback - Math.random() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync Dynamic Platform Without Fallback - Math.random() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-random-without-fallback" used `Math.random()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-random-without-fallback/page.tsx (32:15) @ getRandomNumber
  > 32 |   return Math.random()

  902 |             const browser = await next.browser(pathname)
  903 |
> 904 |             await expect(browser).toDisplayCollapsedRedbox(`
      |                                   ^
  905 |              {
  906 |                "description": "Route "/sync-random-without-fallback" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  907 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:904:35)

● Cache Components Errors › Dev › Sync Dynamic Request › client searchParams › should show a collapsed redbox with a sync access error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync Dynamic Request client searchParams should show a collapsed redbox with a sync access error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "A searchParam property was accessed directly with `searchParams.foo`. `searchParams` is a Promise and must be unwrapped with `React.use()` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
    "environmentLabel": null,
    "label": "Console Error",
    "source": "app/sync-client-search/page.tsx (23:42) @ SearchParamsReadingComponent
  > 23 |   const fooParam = (searchParams as any).foo

  1026 |             const browser = await next.browser(`${pathname}?foo=test`)
  1027 |
> 1028 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  1029 |              {
  1030 |                "description": "A searchParam property was accessed directly with \`searchParams.foo\`. \`searchParams\` is a Promise and must be unwrapped with \`React.use()\` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
  1031 |                "environmentLabel": null,

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:1028:35)

● Cache Components Errors › Dev › Sync Dynamic Request › client params › should show a collapsed redbox with a sync access error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync Dynamic Request client params should show a collapsed redbox with a sync access error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "A param property was accessed directly with `params.slug`. `params` is a Promise and must be unwrapped with `React.use()` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
    "environmentLabel": null,
    "label": "Console Error",
    "source": "app/sync-client-params/[slug]/page.tsx (20:39) @ ParamsReadingComponent
  > 20 |       <span id="param">{String(params.slug)}</span>

  1712 |             const browser = await next.browser(`${pathname}/test`)
  1713 |
> 1714 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  1715 |                {
  1716 |                  "description": "A param property was accessed directly with \`params.slug\`. \`params\` is a Promise and must be unwrapped with \`React.use()\` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
  1717 |                  "environmentLabel": null,

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:1714:35)

● Cache Components Errors › Dev › Error Attribution with Sync IO › Guarded RSC with unguarded Client sync IO › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Error Attribution with Sync IO Guarded RSC with unguarded Client sync IO should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-attribution/guarded-async-unguarded-clientsync" used `new Date()` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-attribution/guarded-async-unguarded-clientsync/client.tsx (5:16) @ SyncIO
  > 5 |   const data = new Date().toISOString()

  1803 |             const browser = await next.browser(pathname)
  1804 |
> 1805 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  1806 |              {
  1807 |                "description": "Route "/sync-attribution/guarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client",
  1808 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:1805:35)

● Cache Components Errors › Dev › Error Attribution with Sync IO › Unguarded RSC with guarded Client sync IO › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Error Attribution with Sync IO Unguarded RSC with guarded Client sync IO should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  1914 |             const browser = await next.browser(pathname)
  1915 |
> 1916 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  1917 |              {
  1918 |                "description": "Runtime data was accessed outside of <Suspense>
  1919 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:1916:35)

● Cache Components Errors › Dev › Error Attribution with Sync IO › unguarded RSC with unguarded Client sync IO › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Error Attribution with Sync IO unguarded RSC with unguarded Client sync IO should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-attribution/unguarded-async-unguarded-clientsync" used `new Date()` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-attribution/unguarded-async-unguarded-clientsync/client.tsx (5:16) @ SyncIO
  > 5 |   const data = new Date().toISOString()

  2072 |             const browser = await next.browser(pathname)
  2073 |
> 2074 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  2075 |              {
  2076 |                "description": "Route "/sync-attribution/unguarded-async-unguarded-clientsync" used \`new Date()\` inside a Client Component without a Suspense boundary above it. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time-client",
  2077 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2074:35)

● Cache Components Errors › Dev › Inside use cache › cookies › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cookies should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route /use-cache-cookies used `cookies()` inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use `cookies()` outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-cookies/page.tsx (22:18) @ CookiesReadingComponent
  > 22 |     await cookies()

  2181 |             const browser = await next.browser(pathname)
  2182 |
> 2183 |             await expect(browser).toDisplayRedbox(`
       |                                   ^
  2184 |                {
  2185 |                  "description": "Route /use-cache-cookies used \`cookies()\` inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use \`cookies()\` outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
  2186 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2183:35)

● Cache Components Errors › Dev › Inside use cache › draftMode › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` draftMode should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of `draftMode()` can be read in caches but you must not enable or disable `draftMode()` inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-draft-mode/page.tsx (20:26) @ DraftModeEnablingComponent
  > 20 |     ;(await draftMode()).enable()

  2286 |             const browser = await next.browser(pathname)
  2287 |
> 2288 |             await expect(browser).toDisplayRedbox(`
       |                                   ^
  2289 |                {
  2290 |                  "description": "Route /use-cache-draft-mode used "draftMode().enable()" inside "use cache". The enabled status of \`draftMode()\` can be read in caches but you must not enable or disable \`draftMode()\` inside a cache. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
  2291 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2288:35)

● Cache Components Errors › Dev › Inside use cache › headers › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` headers should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route /use-cache-headers used `headers()` inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use `headers()` outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-headers/page.tsx (21:18) @ HeadersReadingComponent
  > 21 |     await headers()

  2390 |             const browser = await next.browser(pathname)
  2391 |
> 2392 |             await expect(browser).toDisplayRedbox(`
       |                                   ^
  2393 |                {
  2394 |                  "description": "Route /use-cache-headers used \`headers()\` inside "use cache". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use \`headers()\` outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/messages/next-request-in-use-cache",
  2395 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2392:35)

● Cache Components Errors › Dev › Inside use cache › cacheLife with expire < 5 minutes › microtasky cache › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cacheLife with expire < 5 minutes microtasky cache should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  2494 |               const browser = await next.browser('/use-cache-low-expire/fast')
  2495 |
> 2496 |               await expect(browser).toDisplayCollapsedRedbox(`
       |                                     ^
  2497 |                {
  2498 |                  "description": "Runtime data was accessed outside of <Suspense>
  2499 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2496:37)

● Cache Components Errors › Dev › Inside use cache › cacheLife with expire < 5 minutes › slow cache › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cacheLife with expire < 5 minutes slow cache should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  2628 |               const browser = await next.browser('/use-cache-low-expire/slow')
  2629 |
> 2630 |               await expect(browser).toDisplayCollapsedRedbox(`
       |                                     ^
  2631 |                {
  2632 |                  "description": "Runtime data was accessed outside of <Suspense>
  2633 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2630:37)

● Cache Components Errors › Dev › Inside use cache › cacheLife with expire < 5 minutes › nested › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cacheLife with expire < 5 minutes nested should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "A "use cache" with short `expire` (under 5 minutes) is nested inside another "use cache" that has no explicit `cacheLife`, which is not allowed during prerendering. Add `cacheLife()` to the outer `"use cache"` to choose whether it should be prerendered (with longer `expire`) or remain dynamic (with short `expire`). Read more: https://nextjs.org/docs/messages/nested-use-cache-no-explicit-cachelife",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-low-expire/nested/page.tsx (20:14) @ async Page
  > 20 |     result = await outerCache()

  2762 |               const browser = await next.browser('/use-cache-low-expire/nested')
  2763 |
> 2764 |               await expect(browser).toDisplayRedbox(`
       |                                     ^
  2765 |                {
  2766 |                  "description": "A "use cache" with short \`expire\` (under 5 minutes) is nested inside another "use cache" that has no explicit \`cacheLife\`, which is not allowed during prerendering. Add \`cacheLife()\` to the outer \`"use cache"\` to choose whether it should be prerendered (with longer \`expire\`) or remain dynamic (with short \`expire\`). Read more: https://nextjs.org/docs/messages/nested-use-cache-no-explicit-cachelife",
  2767 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2764:37)

● Cache Components Errors › Dev › Inside use cache › cacheLife with revalidate: 0 › microtasky cache › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cacheLife with revalidate: 0 microtasky cache should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  2866 |               const browser = await next.browser('/use-cache-revalidate-0/fast')
  2867 |
> 2868 |               await expect(browser).toDisplayCollapsedRedbox(`
       |                                     ^
  2869 |                {
  2870 |                  "description": "Runtime data was accessed outside of <Suspense>
  2871 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:2868:37)

● Cache Components Errors › Dev › Inside use cache › cacheLife with revalidate: 0 › slow cache › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cacheLife with revalidate: 0 slow cache should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  3000 |               const browser = await next.browser('/use-cache-revalidate-0/slow')
  3001 |
> 3002 |               await expect(browser).toDisplayCollapsedRedbox(`
       |                                     ^
  3003 |                {
  3004 |                  "description": "Runtime data was accessed outside of <Suspense>
  3005 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3002:37)

● Cache Components Errors › Dev › Inside use cache › cacheLife with revalidate: 0 › nested › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` cacheLife with revalidate: 0 nested should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "A "use cache" with zero `revalidate` is nested inside another "use cache" that has no explicit `cacheLife`, which is not allowed during prerendering. Add `cacheLife()` to the outer `"use cache"` to choose whether it should be prerendered (with non-zero `revalidate`) or remain dynamic (with zero `revalidate`). Read more: https://nextjs.org/docs/messages/nested-use-cache-no-explicit-cachelife",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-revalidate-0/nested/page.tsx (20:14) @ async Page
  > 20 |     result = await outerCache()

  3136 |               )
  3137 |
> 3138 |               await expect(browser).toDisplayRedbox(`
       |                                     ^
  3139 |                {
  3140 |                  "description": "A "use cache" with zero \`revalidate\` is nested inside another "use cache" that has no explicit \`cacheLife\`, which is not allowed during prerendering. Add \`cacheLife()\` to the outer \`"use cache"\` to choose whether it should be prerendered (with non-zero \`revalidate\`) or remain dynamic (with zero \`revalidate\`). Read more: https://nextjs.org/docs/messages/nested-use-cache-no-explicit-cachelife",
  3141 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3138:37)

● Cache Components Errors › Dev › Inside use cache › reading fallback params › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Inside \`use cache\` reading fallback params should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  3239 |             const browser = await next.browser('/use-cache-params/foo')
  3240 |
> 3241 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  3242 |              {
  3243 |                "description": "Runtime data was accessed outside of <Suspense>
  3244 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3241:35)

● Cache Components Errors › Dev › With use cache: private › in unstable_cache › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev With \`use cache: private\` in \`unstable_cache\` should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": ""use cache: private" must not be used within `unstable_cache()`.",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-private-in-unstable-cache/page.tsx (21:38) @ eval
  > 21 | const getCachedData = unstable_cache(async () => {

  3533 |               `)
  3534 |             } else {
> 3535 |               await expect(browser).toDisplayRedbox(`
       |                                     ^
  3536 |                {
  3537 |                  "description": ""use cache: private" must not be used within \`unstable_cache()\`.",
  3538 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3535:37)

● Cache Components Errors › Dev › With use cache: private › in use cache › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev With \`use cache: private\` in \`use cache\` should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": ""use cache: private" must not be used within "use cache". It can only be nested inside of another "use cache: private".",
    "environmentLabel": null,
    "label": "Runtime Error",
    "source": "app/use-cache-private-in-use-cache/page.tsx (15:1) @ Private
  > 15 | async function Private() {

  3644 |             )
  3645 |
> 3646 |             await expect(browser).toDisplayRedbox(`
       |                                   ^
  3647 |                {
  3648 |                  "description": ""use cache: private" must not be used within "use cache". It can only be nested inside of another "use cache: private".",
  3649 |                  "environmentLabel": null,

  at Object.toDisplayRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3646:35)

● Cache Components Errors › Dev › With use cache: private › without Suspense › should show a redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev With \`use cache: private\` without Suspense should show a redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1080",
    "description": "Runtime data was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. cookies(), headers(), and searchParams, are examples of Runtime data that can only come from a user request.

  To fix this:

  3776 |             )
  3777 |
> 3778 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  3779 |              {
  3780 |                "description": "Runtime data was accessed outside of <Suspense>
  3781 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3778:35)

● Cache Components Errors › Dev › Sync IO - Current Time - Date() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Current Time - Date() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-current-time/date" used `Date()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-current-time/date/page.tsx (19:16) @ DateReadingComponent
  > 19 |   return <div>{Date()}</div>

  3952 |           const browser = await next.browser(pathname)
  3953 |
> 3954 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3955 |            {
  3956 |              "description": "Route "/sync-io-current-time/date" used \`Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
  3957 |              "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:3954:33)

● Cache Components Errors › Dev › Sync IO - Current Time - Date.now() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Current Time - Date.now() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-current-time/date-now" used `Date.now()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-current-time/date-now/page.tsx (19:21) @ DateReadingComponent
  > 19 |   return <div>{Date.now()}</div>

  4056 |           const browser = await next.browser(pathname)
  4057 |
> 4058 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  4059 |            {
  4060 |              "description": "Route "/sync-io-current-time/date-now" used \`Date.now()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
  4061 |              "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4058:33)

● Cache Components Errors › Dev › Sync IO - Current Time - new Date() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Current Time - new Date() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-current-time/new-date" used `new Date()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-current-time/new-date/page.tsx (19:16) @ DateReadingComponent
  > 19 |   return <div>{new Date().toString()}</div>

  4160 |           const browser = await next.browser(pathname)
  4161 |
> 4162 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  4163 |            {
  4164 |              "description": "Route "/sync-io-current-time/new-date" used \`new Date()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing the current time in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time",
  4165 |              "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4162:33)

● Cache Components Errors › Dev › Sync IO - Random - Math.random() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Random - Math.random() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-random/math-random" used `Math.random()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-random/math-random/page.tsx (19:21) @ SyncIOComponent
  > 19 |   return <div>{Math.random()}</div>

  4264 |           const browser = await next.browser(pathname)
  4265 |
> 4266 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  4267 |            {
  4268 |              "description": "Route "/sync-io-random/math-random" used \`Math.random()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  4269 |              "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4266:33)

● Cache Components Errors › Dev › Sync IO - Web Crypto - getRandomValue() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Web Crypto - getRandomValue() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-web-crypto/get-random-value" used `crypto.getRandomValues()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-web-crypto/get-random-value/page.tsx (20:10) @ SyncIOComponent
  > 20 |   crypto.getRandomValues(buffer)

  4368 |           const browser = await next.browser(pathname)
  4369 |
> 4370 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  4371 |            {
  4372 |              "description": "Route "/sync-io-web-crypto/get-random-value" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
  4373 |              "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4370:33)

● Cache Components Errors › Dev › Sync IO - Web Crypto - randomUUID() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Web Crypto - randomUUID() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-web-crypto/random-uuid" used `crypto.randomUUID()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-web-crypto/random-uuid/page.tsx (19:23) @ SyncIOComponent
  > 19 |   return <div>{crypto.randomUUID()}</div>

  4475 |           const browser = await next.browser(pathname)
  4476 |
> 4477 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  4478 |            {
  4479 |              "description": "Route "/sync-io-web-crypto/random-uuid" used \`crypto.randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
  4480 |              "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4477:33)

● Cache Components Errors › Dev › Sync IO - Node Crypto - generateKeyPairSync() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - generateKeyPairSync() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/generate-key-pair-sync" used `require('node:crypto').generateKeyPairSync(...)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/generate-key-pair-sync/page.tsx (20:17) @ SyncIOComponent
  > 20 |   const first = crypto.generateKeyPairSync('rsa', keyGenOptions)

  4595 |             `)
  4596 |           } else {
> 4597 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  4598 |              {
  4599 |                "description": "Route "/sync-io-node-crypto/generate-key-pair-sync" used \`require('node:crypto').generateKeyPairSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  4600 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4597:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - generateKeySync() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - generateKeySync() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/generate-key-sync" used `require('node:crypto').generateKeySync(...)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/generate-key-sync/page.tsx (20:17) @ SyncIOComponent
  > 20 |   const first = crypto

  4719 |             `)
  4720 |           } else {
> 4721 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  4722 |              {
  4723 |                "description": "Route "/sync-io-node-crypto/generate-key-sync" used \`require('node:crypto').generateKeySync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  4724 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4721:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - generatePrimeSync() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - generatePrimeSync() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/generate-prime-sync" used `require('node:crypto').generatePrimeSync(...)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/generate-prime-sync/page.tsx (20:32) @ SyncIOComponent
  > 20 |   const first = new Uint8Array(crypto.generatePrimeSync(128))

  4843 |             `)
  4844 |           } else {
> 4845 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  4846 |              {
  4847 |                "description": "Route "/sync-io-node-crypto/generate-prime-sync" used \`require('node:crypto').generatePrimeSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  4848 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4845:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - getRandomValues() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - getRandomValues() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/get-random-values" used `crypto.getRandomValues()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/get-random-values/page.tsx (21:3) @ SyncIOComponent
  > 21 |   crypto.getRandomValues(first)

  4967 |             `)
  4968 |           } else {
> 4969 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  4970 |              {
  4971 |                "description": "Route "/sync-io-node-crypto/get-random-values" used \`crypto.getRandomValues()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto",
  4972 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:4969:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - random-bytes() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - random-bytes() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/random-bytes" used `require('node:crypto').randomBytes(size)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/random-bytes/page.tsx (20:17) @ SyncIOComponent
  > 20 |   const first = crypto.randomBytes(8)

  5091 |             `)
  5092 |           } else {
> 5093 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  5094 |              {
  5095 |                "description": "Route "/sync-io-node-crypto/random-bytes" used \`require('node:crypto').randomBytes(size)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  5096 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:5093:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - random-fill-sync() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - random-fill-sync() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/random-fill-sync" used `require('node:crypto').randomFillSync(...)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/random-fill-sync/page.tsx (21:3) @ SyncIOComponent
  > 21 |   crypto.randomFillSync(first, 4, 8)

  5215 |             `)
  5216 |           } else {
> 5217 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  5218 |              {
  5219 |                "description": "Route "/sync-io-node-crypto/random-fill-sync" used \`require('node:crypto').randomFillSync(...)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  5220 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:5217:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - random-int-between() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - random-int-between() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/random-int-between" used `require('node:crypto').randomInt(min, max)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/random-int-between/page.tsx (20:17) @ SyncIOComponent
  > 20 |   const first = crypto.randomInt(128, 256)

  5339 |             `)
  5340 |           } else {
> 5341 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  5342 |              {
  5343 |                "description": "Route "/sync-io-node-crypto/random-int-between" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  5344 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:5341:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - random-int-up-to() › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - random-int-up-to() should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/random-int-up-to" used `require('node:crypto').randomInt(min, max)` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/random-int-up-to/page.tsx (20:17) @ SyncIOComponent
  > 20 |   const first = crypto.randomInt(128)

  5463 |             `)
  5464 |           } else {
> 5465 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  5466 |              {
  5467 |                "description": "Route "/sync-io-node-crypto/random-int-up-to" used \`require('node:crypto').randomInt(min, max)\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  5468 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:5465:35)

● Cache Components Errors › Dev › Sync IO - Node Crypto - random-uuid › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev Sync IO - Node Crypto - random-uuid should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E394",
    "description": "Route "/sync-io-node-crypto/random-uuid" used `require('node:crypto').randomUUID()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
    "environmentLabel": "Server",
    "label": "Console Error",
    "source": "app/sync-io-node-crypto/random-uuid/page.tsx (20:17) @ SyncIOComponent
  > 20 |   const first = crypto.randomUUID()

  5587 |             `)
  5588 |           } else {
> 5589 |             await expect(browser).toDisplayCollapsedRedbox(`
       |                                   ^
  5590 |              {
  5591 |                "description": "Route "/sync-io-node-crypto/random-uuid" used \`require('node:crypto').randomUUID()\` before accessing either uncached data (e.g. \`fetch()\`) or Request data (e.g. \`cookies()\`, \`headers()\`, \`connection()\`, and \`searchParams\`). Accessing random values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-random",
  5592 |                "environmentLabel": "Server",

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:5589:35)

● Cache Components Errors › Dev › IO accessed in Client Components › should show a collapsed redbox error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Cache Components Errors Dev IO accessed in Client Components should show a collapsed redbox error 1`

- Snapshot  - 0
+ Received  + 1

@@ -1,6 +1,7 @@
  {
+   "code": "E1081",
    "description": "Data that blocks navigation was accessed outside of <Suspense>

  This delays the entire page from rendering, resulting in a slow user experience. Next.js uses this error to ensure your app loads instantly on every navigation. Uncached data such as fetch(...), cached data with a low expire time, or connection() are all examples of data that only resolve on navigation.

  To fix this, you can either:

  5695 |           const browser = await next.browser(pathname)
  5696 |
> 5697 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  5698 |            {
  5699 |              "description": "Data that blocks navigation was accessed outside of <Suspense>
  5700 | 

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/cache-components-errors/cache-components-errors.test.ts:5697:33)

pnpm test-start test/e2e/app-dir/next-after-app-static/build-time/build-time.test.ts (job)

after() in static pages > runs after during build (DD)

Expand output

● after() in static pages › runs after during build

can not run export while server is running, use next.stop() first

  233 |   ) {
  234 |     if (this.childProcess) {
> 235 |       throw new Error(
      |             ^
  236 |         `can not run export while server is running, use next.stop() first`
  237 |       )
  238 |     }

  at NextStartInstance.build (lib/next-modes/next-start.ts:235:13)
  at Object.build (e2e/app-dir/next-after-app-static/build-time/build-time.test.ts:36:36)

nextjs-bot · 2026-02-25T09:31:17Z

Stats from current PR

🔴 1 regression

Metric	Canary	PR	Change	Trend
node_modules Size	474 MB	474 MB	🔴 +49.7 kB (+0%)	█████

📊 All Metrics

📖 Metrics Glossary

Dev Server Metrics:

Listen = TCP port starts accepting connections
First Request = HTTP server returns successful response
Cold = Fresh build (no cache)
Warm = With cached build artifacts

Build Metrics:

Fresh = Clean build (no .next directory)
Cached = With existing .next directory

Change Thresholds:

Time: Changes < 50ms AND < 10%, OR < 2% are insignificant
Size: Changes < 1KB AND < 1% are insignificant
All other changes are flagged to catch regressions

⚡ Dev Server

Metric	Canary	PR	Change	Trend
Cold (Listen)	456ms	456ms	✓	▁▁▁▁▁
Cold (Ready in log)	452ms	454ms	✓	▂▁▂▂▂
Cold (First Request)	975ms	974ms	✓	▄▄▃▃▃
Warm (Listen)	456ms	456ms	✓	▁▁▁▁▁
Warm (Ready in log)	452ms	450ms	✓	▁▁▁▁▁
Warm (First Request)	364ms	366ms	✓	▁▁▂▁▁

📦 Dev Server (Webpack) (Legacy)

📦 Dev Server (Webpack)

Metric	Canary	PR	Change	Trend
Cold (Listen)	456ms	455ms	✓	▁▁▁▁▁
Cold (Ready in log)	438ms	440ms	✓	▃▁▁▁▁
Cold (First Request)	1.931s	1.945s	✓	▂▁▁▁▁
Warm (Listen)	456ms	455ms	✓	▁▁▁▁▁
Warm (Ready in log)	440ms	439ms	✓	▁▁▂▁▁
Warm (First Request)	1.968s	1.951s	✓	▁▁▂▁▁

⚡ Production Builds

Metric	Canary	PR	Change	Trend
Fresh Build	4.450s	4.491s	✓	▁▁▁▁▁
Cached Build	4.446s	4.448s	✓	▁▁▁▁▁

📦 Production Builds (Webpack) (Legacy)

📦 Production Builds (Webpack)

Metric	Canary	PR	Change	Trend
Fresh Build	14.051s	14.073s	✓	▁▇█▁▁
Cached Build	14.162s	14.129s	✓	▁▇█▁▁
node_modules Size	474 MB	474 MB	🔴 +49.7 kB (+0%)	█████

📦 Bundle Sizes

Bundle Sizes

⚡ Turbopack

Client

Main Bundles: **399 kB** → **399 kB** ⚠️ +42 B

80 files with content-based hashes (individual files not comparable between builds)

Server

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	762 B	762 B	✓
Total	762 B	762 B	✓

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	452 B	450 B	✓
Total	452 B	450 B	✅ -2 B

📦 Webpack

Client

Main Bundles

	Canary	PR	Change
5528-HASH.js gzip	5.54 kB	N/A	-
6280-HASH.js gzip	57.5 kB	N/A	-
6335.HASH.js gzip	169 B	N/A	-
912-HASH.js gzip	4.59 kB	N/A	-
e8aec2e4-HASH.js gzip	62.6 kB	N/A	-
framework-HASH.js gzip	59.7 kB	59.7 kB	✓
main-app-HASH.js gzip	255 B	254 B	✓
main-HASH.js gzip	39.1 kB	39.1 kB	✓
webpack-HASH.js gzip	1.68 kB	1.68 kB	✓
262-HASH.js gzip	N/A	4.59 kB	-
2889.HASH.js gzip	N/A	169 B	-
5602-HASH.js gzip	N/A	5.55 kB	-
6948ada0-HASH.js gzip	N/A	62.6 kB	-
9544-HASH.js gzip	N/A	58.3 kB	-
Total	231 kB	232 kB	⚠️ +754 B

Polyfills

	Canary	PR	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Total	39.4 kB	39.4 kB	✓

Pages

	Canary	PR	Change
_app-HASH.js gzip	194 B	194 B	✓
_error-HASH.js gzip	183 B	180 B	🟢 3 B (-2%)
css-HASH.js gzip	331 B	330 B	✓
dynamic-HASH.js gzip	1.81 kB	1.81 kB	✓
edge-ssr-HASH.js gzip	256 B	256 B	✓
head-HASH.js gzip	351 B	352 B	✓
hooks-HASH.js gzip	384 B	383 B	✓
image-HASH.js gzip	580 B	581 B	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	2.5 kB	2.5 kB	✓
routerDirect..HASH.js gzip	320 B	319 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	315 B	315 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Total	7.97 kB	7.97 kB	✅ -2 B

Server

Edge SSR

	Canary	PR	Change
edge-ssr.js gzip	125 kB	125 kB	✓
page.js gzip	252 kB	253 kB	✓
Total	377 kB	378 kB	⚠️ +526 B

Middleware

	Canary	PR	Change
middleware-b..fest.js gzip	617 B	618 B	✓
middleware-r..fest.js gzip	156 B	155 B	✓
middleware.js gzip	43.9 kB	44 kB	✓
edge-runtime..pack.js gzip	842 B	842 B	✓
Total	45.5 kB	45.7 kB	⚠️ +123 B

Build Details

Build Manifests

	Canary	PR	Change
_buildManifest.js gzip	715 B	718 B	✓
Total	715 B	718 B	⚠️ +3 B

Build Cache

	Canary	PR	Change
0.pack gzip	3.98 MB	3.99 MB	🔴 +9.69 kB (+0%)
index.pack gzip	103 kB	103 kB	✓
index.pack.old gzip	103 kB	102 kB	✓
Total	4.19 MB	4.2 MB	⚠️ +9.66 kB

🔄 Shared (bundler-independent)

Runtimes

	Canary	PR	Change
app-page-exp...dev.js gzip	318 kB	318 kB	✓
app-page-exp..prod.js gzip	169 kB	169 kB	✓
app-page-tur...dev.js gzip	318 kB	318 kB	✓
app-page-tur..prod.js gzip	168 kB	168 kB	✓
app-page-tur...dev.js gzip	314 kB	315 kB	✓
app-page-tur..prod.js gzip	166 kB	166 kB	✓
app-page.run...dev.js gzip	315 kB	315 kB	✓
app-page.run..prod.js gzip	167 kB	167 kB	✓
app-route-ex...dev.js gzip	70.7 kB	70.7 kB	✓
app-route-ex..prod.js gzip	49.1 kB	49.1 kB	✓
app-route-tu...dev.js gzip	70.7 kB	70.7 kB	✓
app-route-tu..prod.js gzip	49.2 kB	49.2 kB	✓
app-route-tu...dev.js gzip	70.3 kB	70.3 kB	✓
app-route-tu..prod.js gzip	48.9 kB	48.9 kB	✓
app-route.ru...dev.js gzip	70.2 kB	70.2 kB	✓
app-route.ru..prod.js gzip	48.9 kB	48.9 kB	✓
dist_client_...dev.js gzip	324 B	324 B	✓
dist_client_...dev.js gzip	326 B	326 B	✓
dist_client_...dev.js gzip	318 B	318 B	✓
dist_client_...dev.js gzip	317 B	317 B	✓
pages-api-tu...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api-tu..prod.js gzip	32.9 kB	32.9 kB	✓
pages-api.ru...dev.js gzip	43.2 kB	43.2 kB	✓
pages-api.ru..prod.js gzip	32.8 kB	32.8 kB	✓
pages-turbo....dev.js gzip	52.5 kB	52.5 kB	✓
pages-turbo...prod.js gzip	38.5 kB	38.5 kB	✓
pages.runtim...dev.js gzip	52.5 kB	52.5 kB	✓
pages.runtim..prod.js gzip	38.4 kB	38.4 kB	✓
server.runti..prod.js gzip	62 kB	62 kB	✓
Total	2.81 MB	2.81 MB	⚠️ +734 B

📝 Changed Files (8 files)

Files with changes:

app-page-exp..ntime.dev.js
app-page-exp..time.prod.js
app-page-tur..ntime.dev.js
app-page-tur..time.prod.js
app-page-tur..ntime.dev.js
app-page-tur..time.prod.js
app-page.runtime.dev.js
app-page.runtime.prod.js

View diffs

app-page-exp..ntime.dev.js

failed to diff

app-page-exp..time.prod.js

Diff too large to display

app-page-tur..ntime.dev.js

failed to diff

app-page-tur..time.prod.js

Diff too large to display

app-page-tur..ntime.dev.js

failed to diff

app-page-tur..time.prod.js

Diff too large to display

app-page.runtime.dev.js

failed to diff

app-page.runtime.prod.js

Diff too large to display

📎 Tarball URL

next@https://vercel-packages.vercel.app/next/prs/90498/next

eps1lon added 3 commits February 25, 2026 10:12

[test] Include error code in Redbox snapshot

4d46d02

The code is relevant for user feedback. Its absence indicates no user feedback can be provided.

Add error codes for Blocking Route errors

19bdb9b

Send error codes for Block Route errors to Redbox

cde6f09

nextjs-bot added created-by: Next.js team PRs by the Next.js team. type: next labels Feb 25, 2026

eps1lon mentioned this pull request Feb 25, 2026

[test] Include error code in Redbox snapshot #90497

Merged

eps1lon changed the title ~~Add error codes for Blocking Route errors~~ [instant] Allow providing user feedback for blocking route errors Feb 25, 2026

eps1lon force-pushed the sebbie/02-25-_test_include_error_code_in_redbox_snapshot branch 8 times, most recently from 00f821a to 2f6d712 Compare February 26, 2026 09:34

Base automatically changed from sebbie/02-25-_test_include_error_code_in_redbox_snapshot to canary February 26, 2026 11:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[instant] Allow providing user feedback for blocking route errors#90498

[instant] Allow providing user feedback for blocking route errors#90498
eps1lon wants to merge 3 commits intocanaryfrom
sebbie/blocking-route-error-codes

eps1lon commented Feb 25, 2026 •

edited

Loading

Uh oh!

eps1lon commented Feb 25, 2026 •

edited

Loading

Uh oh!

nextjs-bot commented Feb 25, 2026 •

edited

Loading

Uh oh!

nextjs-bot commented Feb 25, 2026

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

eps1lon commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eps1lon commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nextjs-bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failing test suites

Uh oh!

nextjs-bot commented Feb 25, 2026

Stats from current PR

🔴 1 regression

⚡ Dev Server

📦 Dev Server (Webpack)

⚡ Production Builds

📦 Production Builds (Webpack)

Bundle Sizes

⚡ Turbopack

📦 Webpack

🔄 Shared (bundler-independent)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

eps1lon commented Feb 25, 2026 •

edited

Loading

eps1lon commented Feb 25, 2026 •

edited

Loading

nextjs-bot commented Feb 25, 2026 •

edited

Loading