fix error message with prefix

vercel · Oct 24, 2024 · 887d532 · 887d532
1 parent 7de4541
commit 887d532
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/packages/next/src/client/components/globals/intercept-console-error.ts b/packages/next/src/client/components/globals/intercept-console-error.ts
@@ -1,5 +1,6 @@
 import isError from '../../../lib/is-error'
 import { isNextRouterError } from '../is-next-router-error'
+import { createUnhandledError } from '../react-dev-overlay/internal/helpers/console-error'
 import { handleClientError } from '../react-dev-overlay/internal/helpers/use-error-handler'
 
 export const originConsoleError = window.console.error
@@ -65,7 +66,11 @@ function matchReplayedError(...args: unknown[]): Error | null {
   ) {
     const maybeError = args[4]
     if (isError(maybeError)) {
-      return maybeError
+      const unhandledError = createUnhandledError(
+        `[${args[2]}] ${maybeError.message}`
+      )
+      unhandledError.stack = maybeError.stack
+      return unhandledError
     }
   }
 

diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts
@@ -141,10 +141,17 @@ export function getFrameSource(frame: StackFrame): string {
   }
 
   if (!isWebpackInternalResource(frame.file) && frame.lineNumber != null) {
-    if (frame.column != null) {
-      str += ` (${frame.lineNumber}:${frame.column})`
-    } else {
-      str += ` (${frame.lineNumber})`
+    // If the method name is replayed from server, e.g. Page [Server],
+    // and it's formatted to empty string, recover it as <anonymous> to display it.
+    if (!str && frame.methodName.endsWith(' [Server]')) {
+      str = '<anonymous>'
+    }
+    if (str) {
+      if (frame.column != null) {
+        str += ` (${frame.lineNumber}:${frame.column})`
+      } else {
+        str += ` (${frame.lineNumber})`
+      }
     }
   }
   return str

diff --git a/packages/next/src/client/react-client-callbacks/app-router.ts b/packages/next/src/client/react-client-callbacks/app-router.ts
@@ -13,7 +13,6 @@ export const onCaughtError: HydrationOptions['onCaughtError'] = (
   err,
   errorInfo
 ) => {
-  console.log('onCaughtError', err)
   // Skip certain custom errors which are not expected to be reported on client
   if (isBailoutToCSRError(err) || isNextRouterError(err)) return
 

diff --git a/test/development/app-dir/capture-console-error/capture-console-error.test.ts b/test/development/app-dir/capture-console-error/capture-console-error.test.ts
@@ -196,12 +196,12 @@ describe('app-dir - capture-console-error', () => {
         {
           "callStacks": "",
           "count": 1,
-          "description": "[ Server ]  Error: boom",
-          "source": "app/rsc/page.js (2:11) @ Page
+          "description": "[ Server ] boom",
+          "source": "app/rsc/page.js (2:17) @ Page
 
           1 | export default function Page() {
         > 2 |   console.error(new Error('boom'))
-            |           ^
+            |                 ^
           3 |   return <p>rsc</p>
           4 | }
           5 |",

diff --git a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
@@ -22,7 +22,7 @@ describe('Dynamic IO Dev Errors', () => {
       await waitForAndOpenRuntimeError(browser)
 
       expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
-        `"[ Server ]  Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
+        `"[ Server ] Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
       )
     })
   })
@@ -40,7 +40,7 @@ describe('Dynamic IO Dev Errors', () => {
       await waitForAndOpenRuntimeError(browser)
 
       expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(
-        `"[ Server ]  Error: Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
+        `"[ Server ] Route "/error" used \`Math.random()\` outside of \`"use cache"\` and without explicitly calling \`await connection()\` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-random"`
       )
     })
   })
@@ -63,8 +63,11 @@ describe('Dynamic IO Dev Errors', () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
-        "description": "Error: In Route "/no-accessed-data" this component accessed data without a Suspense boundary above it to provide a fallback UI. See more info: https://nextjs.org/docs/messages/next-prerender-data",
-        "stack": "",
+        "description": "[ Server ] In Route "/no-accessed-data" this component accessed data without a Suspense boundary above it to provide a fallback UI. See more info: https://nextjs.org/docs/messages/next-prerender-data",
+        "stack": "Page [Server]
+      <anonymous> (2:1)
+      Root [Server]
+      <anonymous> (2:1)",
       }
     `)
   })