feature(error): capture ssr error in overlay during dev (vercel#74983)

huozhi · web-flow · commit f140b2df6e46 · 2025-01-17T21:25:31.000Z
diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
@@ -26,6 +26,7 @@ import { createInitialRouterState } from './components/router-reducer/create-ini
 import { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'
 import { setAppBuildId } from './app-build-id'
 import { shouldRenderRootLevelErrorOverlay } from './lib/is-error-thrown-while-rendering-rsc'
+import { handleClientError } from './components/errors/use-error-handler'
 
 /// <reference types="react-dom/experimental" />
 
@@ -229,6 +230,16 @@ function Root({ children }: React.PropsWithChildren<{}>) {
     }, [])
   }
 
+  if (process.env.NODE_ENV !== 'production') {
+    const ssrError = devQueueSsrError()
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (ssrError) {
+        handleClientError(ssrError, [])
+      }
+    }, [ssrError])
+  }
+
   return children
 }
 
@@ -283,3 +294,18 @@ export function hydrate() {
     linkGc()
   }
 }
+
+function devQueueSsrError(): Error | undefined {
+  const ssrErrorTemplateTag = document.querySelector(
+    'template[data-next-error-message]'
+  )
+  if (ssrErrorTemplateTag) {
+    const message: string = ssrErrorTemplateTag.getAttribute(
+      'data-next-error-message'
+    )!
+    const stack = ssrErrorTemplateTag.getAttribute('data-next-error-stack')
+    const error = new Error(message)
+    error.stack = stack || ''
+    return error
+  }
+}
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -183,6 +183,7 @@ import {
   createRenderResumeDataCache,
 } from '../resume-data-cache/resume-data-cache'
 import type { MetadataErrorType } from '../../lib/metadata/resolve-metadata'
+import isError from '../../lib/is-error'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
@@ -877,6 +878,7 @@ function Preloads({ preloadCallbacks }: { preloadCallbacks: Function[] }) {
 async function getErrorRSCPayload(
   tree: LoaderTree,
   ctx: AppRenderContext,
+  ssrError: unknown,
   errorType: MetadataErrorType | 'redirect' | undefined
 ) {
   const {
@@ -940,6 +942,11 @@ async function getErrorRSCPayload(
     query
   )
 
+  let err: Error | undefined = undefined
+  if (ssrError) {
+    err = isError(ssrError) ? ssrError : new Error(ssrError + '')
+  }
+
   // For metadata notFound error there's no global not found boundary on top
   // so we create a not found page with AppRouter
   const seedData: CacheNodeSeedData = [
@@ -948,7 +955,14 @@ async function getErrorRSCPayload(
       <head>
         <ErrorMetadataComponent />
       </head>
-      <body />
+      <body>
+        {process.env.NODE_ENV !== 'production' && err ? (
+          <template
+            data-next-error-message={err.message}
+            data-next-error-stack={err.stack}
+          />
+        ) : null}
+      </body>
     </html>,
     {},
     null,
@@ -2004,6 +2018,7 @@ async function renderToStream(
       getErrorRSCPayload,
       tree,
       ctx,
+      reactServerErrorsByDigest.has((err as any).digest) ? null : err,
       errorType
     )
 
@@ -3870,6 +3885,7 @@ async function prerenderToStream(
       getErrorRSCPayload,
       tree,
       ctx,
+      reactServerErrorsByDigest.has((err as any).digest) ? undefined : err,
       errorType
     )
 
diff --git a/test/development/app-dir/ssr-only-error/app/layout.tsx b/test/development/app-dir/ssr-only-error/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/ssr-only-error/app/page.tsx b/test/development/app-dir/ssr-only-error/app/page.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+export default function Page() {
+  if (typeof window === 'undefined') {
+    throw new Error('SSR only error')
+  }
+  return <p>hello world</p>
+}
diff --git a/test/development/app-dir/ssr-only-error/next.config.js b/test/development/app-dir/ssr-only-error/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/development/app-dir/ssr-only-error/ssr-only-error.test.ts b/test/development/app-dir/ssr-only-error/ssr-only-error.test.ts
@@ -0,0 +1,43 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  getRedboxDescription,
+  getRedboxSource,
+  hasErrorToast,
+  openRedbox,
+} from 'next-test-utils'
+
+describe('ssr-only-error', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should show ssr only error in error overlay', async () => {
+    const browser = await next.browser('/')
+
+    // Ensure it's not like server error that is shown by default
+    await hasErrorToast(browser)
+
+    await openRedbox(browser)
+
+    const description = await getRedboxDescription(browser)
+    const source = await getRedboxSource(browser)
+
+    expect({
+      description,
+      source,
+    }).toMatchInlineSnapshot(`
+     {
+       "description": "Error: SSR only error",
+       "source": "app/page.tsx (5:11) @ Page
+
+       3 | export default function Page() {
+       4 |   if (typeof window === 'undefined') {
+     > 5 |     throw new Error('SSR only error')
+         |           ^
+       6 |   }
+       7 |   return <p>hello world</p>
+       8 | }",
+     }
+    `)
+  })
+})
