Add stack trace to client rendering bailout error

vercel · Jan 26, 2024 · 0731c43 · 0731c43
1 parent 7a516d4
commit 0731c43
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 30 deletions.
diff --git a/packages/next/src/lib/format-server-error.ts b/packages/next/src/lib/format-server-error.ts
@@ -22,6 +22,22 @@ function setMessage(error: Error, message: string): void {
   }
 }
 
+/**
+ * Input:
+ * Error: Something went wrong
+    at funcName (/path/to/file.js:10:5)
+    at anotherFunc (/path/to/file.js:15:10)
+ 
+ * Output:
+    at funcName (/path/to/file.js:10:5)
+    at anotherFunc (/path/to/file.js:15:10) 
+ */
+export function getStackWithoutErrorMessage(error: Error): string {
+  const stack = error.stack
+  if (!stack) return ''
+  return stack.replace(/^[^\n]*\n/, '')
+}
+
 export function formatServerError(error: Error): void {
   if (typeof error?.message !== 'string') return
 

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -81,6 +81,7 @@ import { isDynamicServerError } from '../../client/components/hooks-server-conte
 import { useFlightResponse } from './use-flight-response'
 import { isStaticGenBailoutError } from '../../client/components/static-generation-bailout'
 import { isInterceptionRouteAppPath } from '../future/helpers/interception-routes'
+import { getStackWithoutErrorMessage } from '../../lib/format-server-error'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
@@ -1014,8 +1015,9 @@ async function renderToHTMLOrFlightImpl(
           console.log()
 
           if (renderOpts.experimental.missingSuspenseWithCSRBailout) {
+            const stack = getStackWithoutErrorMessage(err)
             error(
-              `${err.reason} should be wrapped in a suspense boundary at page "${pagePath}". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout`
+              `${err.reason} should be wrapped in a suspense boundary at page "${pagePath}". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout\n${stack}`
             )
 
             throw err

diff --git a/packages/next/src/server/app-render/create-error-handler.tsx b/packages/next/src/server/app-render/create-error-handler.tsx
@@ -77,8 +77,7 @@ export function createErrorHandler({
             const { logAppDirError } =
               require('../dev/log-app-dir-error') as typeof import('../dev/log-app-dir-error')
             logAppDirError(err)
-          }
-          if (process.env.NODE_ENV === 'production') {
+          } else {
             console.error(err)
           }
         }

diff --git a/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/layout-no-suspense.js b/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/layout-no-suspense.js
diff --git a/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/layout-suspense.js b/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/layout-suspense.js
@@ -0,0 +1,12 @@
+import { Suspense } from 'react'
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head />
+      <body>
+        <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/layout.js b/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/layout.js
@@ -1,12 +1,8 @@
-import { Suspense } from 'react'
-
 export default function Layout({ children }) {
   return (
     <html>
       <head />
-      <body>
-        <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
-      </body>
+      <body>{children}</body>
     </html>
   )
 }
diff --git a/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/page.js b/test/e2e/app-dir/missing-suspense-with-csr-bailout/app/page.js
@@ -2,7 +2,16 @@
 
 import { useSearchParams } from 'next/navigation'
 
-export default function Page() {
+function SearchParams() {
   useSearchParams()
-  return <div>Page</div>
+  return null
+}
+
+export default function Page() {
+  return (
+    <>
+      <SearchParams />
+      <div>Page</div>
+    </>
+  )
 }
diff --git a/test/e2e/app-dir/missing-suspense-with-csr-bailout/missing-suspense-with-csr-bailout.test.ts b/test/e2e/app-dir/missing-suspense-with-csr-bailout/missing-suspense-with-csr-bailout.test.ts
@@ -19,31 +19,36 @@ createNextDescribe(
     describe('useSearchParams', () => {
       const message = `useSearchParams() should be wrapped in a suspense boundary at page "/".`
 
+      it('should fail build if useSearchParams is not wrapped in a suspense boundary', async () => {
+        const { exitCode } = await next.build()
+        expect(exitCode).toBe(1)
+        expect(next.cliOutput).toContain(message)
+        // Can show the trace where the searchParams hook is used
+        expect(next.cliOutput).toMatch(/at.*server[\\/]app[\\/]page.js/)
+      })
+
       it('should pass build if useSearchParams is wrapped in a suspense boundary', async () => {
+        await next.renameFile('app/layout.js', 'app/layout-no-suspense.js')
+        await next.renameFile('app/layout-suspense.js', 'app/layout.js')
+
         await expect(next.build()).resolves.toEqual({
           exitCode: 0,
           cliOutput: expect.not.stringContaining(message),
         })
-      })
 
-      it('should fail build if useSearchParams is not wrapped in a suspense boundary', async () => {
         await next.renameFile('app/layout.js', 'app/layout-suspense.js')
         await next.renameFile('app/layout-no-suspense.js', 'app/layout.js')
-
-        await expect(next.build()).resolves.toEqual({
-          exitCode: 1,
-          cliOutput: expect.stringContaining(message),
-        })
-
-        await next.renameFile('app/layout.js', 'app/layout-no-suspense.js')
-        await next.renameFile('app/layout-suspense.js', 'app/layout.js')
       })
     })
 
     describe('next/dynamic', () => {
       beforeEach(async () => {
+        await next.renameFile('app/page.js', 'app/_page.js')
         await next.start()
       })
+      afterEach(async () => {
+        await next.renameFile('app/_page.js', 'app/page.js')
+      })
 
       it('does not emit errors related to bailing out of client side rendering', async () => {
         const browser = await next.browser('/dynamic', {
@@ -53,8 +58,6 @@ createNextDescribe(
         try {
           await browser.waitForElementByCss('#dynamic')
 
-          // await new Promise((resolve) => setTimeout(resolve, 1000))
-
           expect(await browser.log()).not.toContainEqual(
             expect.objectContaining({
               source: 'error',