Support global-error for ssr fallback (#52573)

Previously `global-error` only caught the error on client side, this PR adds the support for catching the errors thrown during client components SSR or server components RSC rendering. Closes #46572 Closes #50119 Closes #50723
vercel · Jul 12, 2023 · b9760b2 · b9760b2
1 parent bcd9136
commit b9760b2
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 56 deletions.
diff --git a/packages/next/src/build/webpack/loaders/next-app-loader.ts b/packages/next/src/build/webpack/loaders/next-app-loader.ts
@@ -666,9 +666,15 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
   const result = `
     export ${treeCodeResult.treeCode}
     export ${treeCodeResult.pages}
-    export { default as GlobalError } from ${JSON.stringify(
-      treeCodeResult.globalError || 'next/dist/client/components/error-boundary'
-    )}
+
+    ${
+      treeCodeResult.globalError
+        ? `export { default as GlobalError } from ${JSON.stringify(
+            treeCodeResult.globalError
+          )}`
+        : `export { GlobalError } from 'next/dist/client/components/error-boundary'`
+    }
+
     export const originalPathname = ${JSON.stringify(page)}
     export const __next_app__ = {
       require: __webpack_require__,

diff --git a/packages/next/src/client/components/error-boundary.tsx b/packages/next/src/client/components/error-boundary.tsx
@@ -99,10 +99,10 @@ export class ErrorBoundaryHandler extends React.Component<
   }
 }
 
-export default function GlobalError({ error }: { error: any }) {
+export function GlobalError({ error }: { error: any }) {
   const digest: string | undefined = error?.digest
   return (
-    <html>
+    <html id="__next_error__">
       <head></head>
       <body>
         <div style={styles.error}>

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -1224,13 +1224,18 @@ export async function renderToHTMLOrFlight(
 
     const GlobalError =
       /** GlobalError can be either the default error boundary or the overwritten app/global-error.js **/
-      ComponentMod.GlobalError as typeof import('../../client/components/error-boundary').default
+      ComponentMod.GlobalError as typeof import('../../client/components/error-boundary').GlobalError
 
     let serverComponentsInlinedTransformStream: TransformStream<
       Uint8Array,
       Uint8Array
     > = new TransformStream()
 
+    let serverErrorComponentsInlinedTransformStream: TransformStream<
+      Uint8Array,
+      Uint8Array
+    > = new TransformStream()
+
     // Get the nonce from the incoming request if it has one.
     const csp = req.headers['content-security-policy']
     let nonce: string | undefined
@@ -1245,8 +1250,11 @@ export async function renderToHTMLOrFlight(
       rscChunks: [],
     }
 
-    if (!clientReferenceManifest) {
-      console.log(req.url)
+    const serverErrorComponentsRenderOpts = {
+      transformStream: serverErrorComponentsInlinedTransformStream,
+      clientReferenceManifest,
+      serverContexts,
+      rscChunks: [],
     }
 
     const validateRootLayout = dev
@@ -1511,7 +1519,7 @@ export async function renderToHTMLOrFlight(
           })
 
           const result = await continueFromInitialStream(renderStream, {
-            dataStream: serverComponentsInlinedTransformStream?.readable,
+            dataStream: serverComponentsInlinedTransformStream.readable,
             generateStaticHTML:
               staticGenerationStore.isStaticGeneration || generateStaticHTML,
             getServerInsertedHTML,
@@ -1553,24 +1561,61 @@ export async function renderToHTMLOrFlight(
             res.setHeader('Location', getURLFromRedirectError(err))
           }
 
+          const defaultErrorComponent = (
+            <html id="__next_error__">
+              <head>
+                {/* @ts-expect-error allow to use async server component */}
+                <MetadataTree
+                  key={requestId}
+                  tree={emptyLoaderTree}
+                  pathname={pathname}
+                  searchParams={providedSearchParams}
+                  getDynamicParamFromSegment={getDynamicParamFromSegment}
+                />
+                {appUsingSizeAdjust ? <meta name="next-size-adjust" /> : null}
+              </head>
+              <body></body>
+            </html>
+          )
+
+          const useDefaultError =
+            res.statusCode < 400 ||
+            res.statusCode === 404 ||
+            res.statusCode === 307
+          const serverErrorElement = useDefaultError
+            ? defaultErrorComponent
+            : React.createElement(
+                createServerComponentRenderer(
+                  async () => {
+                    // only pass plain object to client
+                    return (
+                      <>
+                        {/* @ts-expect-error allow to use async server component */}
+                        <MetadataTree
+                          key={requestId}
+                          tree={emptyLoaderTree}
+                          pathname={pathname}
+                          searchParams={providedSearchParams}
+                          getDynamicParamFromSegment={
+                            getDynamicParamFromSegment
+                          }
+                        />
+                        <GlobalError
+                          error={{ message: err?.message, digest: err?.digest }}
+                        />
+                      </>
+                    )
+                  },
+                  ComponentMod,
+                  serverErrorComponentsRenderOpts,
+                  serverComponentsErrorHandler,
+                  nonce
+                )
+              )
+
           const renderStream = await renderToInitialStream({
             ReactDOMServer: require('react-dom/server.edge'),
-            element: (
-              <html id="__next_error__">
-                <head>
-                  {/* @ts-expect-error allow to use async server component */}
-                  <MetadataTree
-                    key={requestId}
-                    tree={emptyLoaderTree}
-                    pathname={pathname}
-                    searchParams={providedSearchParams}
-                    getDynamicParamFromSegment={getDynamicParamFromSegment}
-                  />
-                  {appUsingSizeAdjust ? <meta name="next-size-adjust" /> : null}
-                </head>
-                <body></body>
-              </html>
-            ),
+            element: serverErrorElement,
             streamOptions: {
               nonce,
               // Include hydration scripts in the HTML
@@ -1590,7 +1635,10 @@ export async function renderToHTMLOrFlight(
           })
 
           return await continueFromInitialStream(renderStream, {
-            dataStream: serverComponentsInlinedTransformStream?.readable,
+            dataStream: (useDefaultError
+              ? serverComponentsInlinedTransformStream
+              : serverErrorComponentsInlinedTransformStream
+            ).readable,
             generateStaticHTML: staticGenerationStore.isStaticGeneration,
             getServerInsertedHTML,
             serverInsertedHTMLToHead: true,

diff --git a/packages/next/src/server/app-render/use-flight-response.tsx b/packages/next/src/server/app-render/use-flight-response.tsx
@@ -59,7 +59,13 @@ export function useFlightResponse(
         )
       }
       if (done) {
-        flightResponseRef.current = null
+        // Add a setTimeout here because the error component is too small, the first forwardReader.read() read will return the full chunk
+        // and then it immediately set flightResponseRef.current as null.
+        // react renders the component twice, the second render will run into the state with useFlightResponse where flightResponseRef.current is null,
+        // so it tries to render the flight payload again
+        setTimeout(() => {
+          flightResponseRef.current = null
+        })
         writer.close()
       } else {
         const responsePartial = decodeText(value, textDecoder)

diff --git a/...2e/app-dir/global-error/app/throw/page.js → ...e/app-dir/global-error/app/client/page.js b/...2e/app-dir/global-error/app/throw/page.js → ...e/app-dir/global-error/app/client/page.js
diff --git a/test/e2e/app-dir/global-error/app/global-error.js b/test/e2e/app-dir/global-error/app/global-error.js
@@ -5,7 +5,9 @@ export default function GlobalError({ error }) {
     <html>
       <head></head>
       <body>
-        <div id="error">{`Error message: ${error?.message}`}</div>
+        <h1>Global Error</h1>
+        <p id="error">{`Global error: ${error?.message}`}</p>
+        {error?.digest && <p id="digest">{error?.digest}</p>}
       </body>
     </html>
   )

diff --git a/test/e2e/app-dir/global-error/app/layout.js b/test/e2e/app-dir/global-error/app/layout.js
@@ -6,3 +6,5 @@ export default function Layout({ children }) {
     </html>
   )
 }
+
+export const revalidate = 0
diff --git a/test/e2e/app-dir/global-error/app/ssr/client/page.js b/test/e2e/app-dir/global-error/app/ssr/client/page.js
@@ -0,0 +1,5 @@
+'use client'
+
+export default function page() {
+  throw new Error('client page error')
+}
diff --git a/test/e2e/app-dir/global-error/app/ssr/server/page.js b/test/e2e/app-dir/global-error/app/ssr/server/page.js
@@ -0,0 +1,3 @@
+export default function page() {
+  throw new Error('server page error')
+}
diff --git a/test/e2e/app-dir/global-error/global-error.test.ts b/test/e2e/app-dir/global-error/global-error.test.ts
diff --git a/test/e2e/app-dir/global-error/index.test.ts b/test/e2e/app-dir/global-error/index.test.ts
@@ -0,0 +1,61 @@
+import { getRedboxHeader, hasRedbox } from 'next-test-utils'
+import { createNextDescribe } from 'e2e-utils'
+
+async function testDev(browser, errorRegex) {
+  expect(await hasRedbox(browser, true)).toBe(true)
+  expect(await getRedboxHeader(browser)).toMatch(errorRegex)
+}
+
+createNextDescribe(
+  'app dir - global error',
+  {
+    files: __dirname,
+  },
+  ({ next, isNextDev }) => {
+    it('should trigger error component when an error happens during rendering', async () => {
+      const browser = await next.browser('/client')
+      await browser
+        .waitForElementByCss('#error-trigger-button')
+        .elementByCss('#error-trigger-button')
+        .click()
+
+      if (isNextDev) {
+        await testDev(browser, /Error: Client error/)
+      } else {
+        await browser
+        expect(await browser.elementByCss('#error').text()).toBe(
+          'Global error: Client error'
+        )
+      }
+    })
+
+    it('should render global error for error in server components', async () => {
+      const browser = await next.browser('/ssr/server')
+
+      if (isNextDev) {
+        await testDev(browser, /Error: server page error/)
+      } else {
+        expect(await browser.elementByCss('h1').text()).toBe('Global Error')
+        expect(await browser.elementByCss('#error').text()).toBe(
+          'Global error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.'
+        )
+        expect(await browser.elementByCss('#digest').text()).toMatch(/\w+/)
+      }
+    })
+
+    it('should render global error for error in client components', async () => {
+      const browser = await next.browser('/ssr/client')
+
+      if (isNextDev) {
+        await testDev(browser, /Error: client page error/)
+      } else {
+        expect(await browser.elementByCss('h1').text()).toBe('Global Error')
+        expect(await browser.elementByCss('#error').text()).toBe(
+          'Global error: client page error'
+        )
+
+        expect(await browser.hasElementByCssSelector('#digest')).toBeFalsy()
+      }
+    })
+  }
+)