Display error digest if presented (#43742)

Co-authored-by: Shu Ding <g@shud.in> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
vercel · Dec 7, 2022 · 56ea306 · 56ea306
1 parent 2022fa6
commit 56ea306
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/packages/next/client/components/error-boundary.tsx b/packages/next/client/components/error-boundary.tsx
@@ -70,7 +70,7 @@ export function ErrorBoundary({
   return <>{children}</>
 }
 
-const styles: { [k: string]: React.CSSProperties } = {
+const styles = {
   error: {
     fontFamily:
       '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
@@ -81,33 +81,36 @@ const styles: { [k: string]: React.CSSProperties } = {
     alignItems: 'center',
     justifyContent: 'center',
   },
-
   desc: {
     display: 'inline-block',
     textAlign: 'left',
     lineHeight: '49px',
     height: '49px',
     verticalAlign: 'middle',
   },
-  h2: {
+  text: {
     fontSize: '14px',
     fontWeight: 'normal',
     lineHeight: '49px',
     margin: 0,
     padding: 0,
   },
-}
+} as const
 
-export function GlobalErrorComponent() {
+export function GlobalErrorComponent({ error }: { error: any }) {
   return (
     <html>
+      <head></head>
       <body>
         <div style={styles.error}>
           <div style={styles.desc}>
-            <h2 style={styles.h2}>
+            <h2 style={styles.text}>
               Application error: a client-side exception has occurred (see the
               browser console for more information).
             </h2>
+            {error?.digest && (
+              <p style={styles.text}>{`Digest: ${error.digest}`}</p>
+            )}
           </div>
         </div>
       </body>

diff --git a/...p/app/error/global-error-boundary/page.js → ...rror/global-error-boundary/client/page.js b/...p/app/error/global-error-boundary/page.js → ...rror/global-error-boundary/client/page.js
diff --git a/test/e2e/app-dir/app/app/error/global-error-boundary/server/page.js b/test/e2e/app-dir/app/app/error/global-error-boundary/server/page.js
@@ -0,0 +1,3 @@
+export default function Page() {
+  throw Error('custom server error')
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
@@ -2182,7 +2182,7 @@ describe('app dir', () => {
       it('should use default error boundary for prod and overlay for dev when no error component specified', async () => {
         const browser = await webdriver(
           next.url,
-          '/error/global-error-boundary'
+          '/error/global-error-boundary/client'
         )
         await browser.elementByCss('#error-trigger-button').click()
 
@@ -2191,16 +2191,34 @@ describe('app dir', () => {
           expect(await getRedboxHeader(browser)).toMatch(/this is a test/)
         } else {
           expect(
-            await browser
-              .waitForElementByCss('body')
-              .elementByCss('body')
-              .text()
+            await browser.waitForElementByCss('body').elementByCss('h2').text()
           ).toBe(
             'Application error: a client-side exception has occurred (see the browser console for more information).'
           )
         }
       })
 
+      it('should display error digest for error in server component with default error boundary', async () => {
+        const browser = await webdriver(
+          next.url,
+          '/error/global-error-boundary/server'
+        )
+
+        if (isDev) {
+          expect(await hasRedbox(browser)).toBe(true)
+          expect(await getRedboxHeader(browser)).toMatch(/custom server error/)
+        } else {
+          expect(
+            await browser.waitForElementByCss('body').elementByCss('h2').text()
+          ).toBe(
+            'Application error: a client-side exception has occurred (see the browser console for more information).'
+          )
+          expect(
+            await browser.waitForElementByCss('body').elementByCss('p').text()
+          ).toMatch(/Digest: \w+/)
+        }
+      })
+
       if (!isDev) {
         it('should allow resetting error boundary', async () => {
           const browser = await webdriver(next.url, '/error/client-component')