Should catch layout error in global-error convention

vercel · Jul 13, 2023 · f2b50be · f2b50be
1 parent 68286ae
commit f2b50be
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -1628,7 +1628,10 @@ export async function renderToHTMLOrFlight(
           )
 
           const use404Error = res.statusCode === 404
-          const useDefaultError = res.statusCode < 400 || res.statusCode === 307
+          const useGlobalError =
+            res.statusCode === 200 && process.env.NODE_ENV === 'production'
+          const useDefaultError =
+            (res.statusCode < 400 || res.statusCode === 307) && !useGlobalError
 
           const { layout } = loaderTree[2]
           const injectedCSS = new Set<string>()

diff --git a/test/e2e/app-dir/error-boundary-and-not-found-linking/app/error.tsx b/test/e2e/app-dir/error-boundary-and-not-found-linking/app/error.tsx
@@ -4,10 +4,12 @@ import Link from 'next/link'
 export default function ErrorComponent() {
   return (
     <>
-      <h1 id="error-component">Error Happened!</h1>
-      <Link href="/result" id="to-result">
-        To Result
-      </Link>
+      <div>
+        <h1 id="error-component">Error Happened!</h1>
+        <Link href="/result" id="to-result">
+          To Result
+        </Link>
+      </div>
     </>
   )
 }
diff --git a/test/e2e/app-dir/error-boundary-and-not-found-linking/app/layout.tsx b/test/e2e/app-dir/error-boundary-and-not-found-linking/app/layout.tsx
@@ -1,3 +1,5 @@
+export const revalidate = 0
+
 export default function Root({ children }: { children: React.ReactNode }) {
   return (
     <html>

diff --git a/test/e2e/app-dir/global-error/layout-error.test.ts b/test/e2e/app-dir/global-error/layout-error.test.ts
@@ -0,0 +1,32 @@
+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 - layout error',
+  {
+    files: {
+      'app/layout.js': `throw new Error('Global error: layout error')`,
+      'app/page.js': `export default function Page() { return <div id="page">Page</div> }`,
+    },
+  },
+  ({ next, isNextDev }) => {
+    it('should render global error for error in server components', async () => {
+      const browser = await next.browser('/')
+
+      if (isNextDev) {
+        await testDev(browser, /Error: layout 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+/)
+      }
+    })
+  }
+)