[dynamicIO]: dev navigations should show disallowed dynamic errors

vercel · Oct 22, 2024 · 096745c · 096745c
1 parent 236e001
commit 096745c
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 2 deletions.
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -522,12 +522,26 @@ async function generateDynamicFlightRenderResult(
     onFlightDataRenderError
   )
 
-  const rscPayload = await generateDynamicRSCPayload(ctx, options)
+  const RSCPayload = await generateDynamicRSCPayload(ctx, options)
+
+  if (process.env.NODE_ENV === 'development') {
+    const [resolveValidation, validationOutlet] = createValidationOutlet()
+    ;(RSCPayload as any)._validation = validationOutlet
+
+    spawnDynamicValidationInDev(
+      resolveValidation,
+      ctx.componentMod.tree,
+      ctx,
+      false,
+      ctx.clientReferenceManifest,
+      ctx.workStore.route
+    )
+  }
 
   // For app dir, use the bundled version of Flight server renderer (renderToReadableStream)
   // which contains the subset React.
   const flightReadableStream = ctx.componentMod.renderToReadableStream(
-    rscPayload,
+    RSCPayload,
     ctx.clientReferenceManifest.clientModules,
     {
       onError,

diff --git a/test/development/app-dir/dynamic-io-dev-errors/app/error/page.tsx b/test/development/app-dir/dynamic-io-dev-errors/app/error/page.tsx
@@ -0,0 +1,4 @@
+export default async function Page() {
+  const random = Math.random()
+  return <div id="another-random">{random}</div>
+}
diff --git a/test/development/app-dir/dynamic-io-dev-errors/app/layout.tsx b/test/development/app-dir/dynamic-io-dev-errors/app/layout.tsx
@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/dynamic-io-dev-errors/app/no-error/page.tsx b/test/development/app-dir/dynamic-io-dev-errors/app/no-error/page.tsx
@@ -0,0 +1,5 @@
+import Link from 'next/link'
+
+export default async function Page() {
+  return <Link href="/error">To /error</Link>
+}
diff --git a/test/development/app-dir/dynamic-io-dev-errors/app/page.tsx b/test/development/app-dir/dynamic-io-dev-errors/app/page.tsx
@@ -0,0 +1,5 @@
+import Link from 'next/link'
+
+export default async function Page() {
+  return <Link href="/no-error">To /no-error</Link>
+}
diff --git a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
@@ -0,0 +1,45 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  getRedboxDescription,
+  hasErrorToast,
+  retry,
+  waitForAndOpenRuntimeError,
+} from 'next-test-utils'
+
+describe('Dynamic IO Dev Errors', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should show a red box error on the SSR render', async () => {
+    const browser = await next.browser('/error')
+
+    await retry(async () => {
+      expect(await hasErrorToast(browser)).toBe(true)
+
+      await waitForAndOpenRuntimeError(browser)
+
+      expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+        `"[ Server ]  Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
+      )
+    })
+  })
+
+  it('should show a red box error on client navigations', async () => {
+    const browser = await next.browser('/no-error')
+
+    expect(await hasErrorToast(browser)).toBe(false)
+
+    await browser.elementByCss("[href='/error']").click()
+
+    await retry(async () => {
+      expect(await hasErrorToast(browser)).toBe(true)
+
+      await waitForAndOpenRuntimeError(browser)
+
+      expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
+        `"[ Server ]  Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
+      )
+    })
+  })
+})
diff --git a/test/development/app-dir/dynamic-io-dev-errors/next.config.js b/test/development/app-dir/dynamic-io-dev-errors/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    dynamicIO: true,
+  },
+}
+
+module.exports = nextConfig