capture console issues as console errors

packages/next/src/client/components/globals/intercept-console-error.ts

@@ -1,6 +1,5 @@
 import isError from '../../../lib/is-error'
 import { isNextRouterError } from '../is-next-router-error'
-import { captureStackTrace } from '../react-dev-overlay/internal/helpers/capture-stack-trace'
 import { handleClientError } from '../react-dev-overlay/internal/helpers/use-error-handler'
 
 export const originConsoleError = window.console.error
@@ -13,13 +12,12 @@ export function patchConsoleError() {
   }
   window.console.error = function error(...args: any[]) {
     let maybeError: unknown
-    let isReplayedError = false
-
     if (process.env.NODE_ENV !== 'production') {
       const replayedError = matchReplayedError(...args)
       if (replayedError) {
-        isReplayedError = true
         maybeError = replayedError
+      } else if (isError(args[0])) {
+        maybeError = args[0]
       } else {
         // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
         maybeError = args[1]
@@ -30,16 +28,12 @@ export function patchConsoleError() {
 
     if (!isNextRouterError(maybeError)) {
       if (process.env.NODE_ENV !== 'production') {
-        // Create an origin stack that pointing to the origin location of the error
-        if (!isReplayedError && isError(maybeError)) {
-          captureStackTrace(maybeError)
-        }
-
         handleClientError(
           // replayed errors have their own complex format string that should be used,
           // but if we pass the error directly, `handleClientError` will ignore it
           maybeError,
-          args
+          args,
+          true
         )
       }
 

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -31,7 +31,10 @@ import {
 } from '../helpers/hydration-error-info'
 import { NodejsInspectorCopyButton } from '../components/nodejs-inspector'
 import { CopyButton } from '../components/copy-button'
-import { isUnhandledConsoleOrRejection } from '../helpers/console-error'
+import {
+  getUnhandledErrorType,
+  isUnhandledConsoleOrRejection,
+} from '../helpers/console-error'
 
 export type SupportedErrorEvent = {
   id: number
@@ -62,12 +65,19 @@ function ErrorDescription({
   hydrationWarning: string | null
 }) {
   const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)
+  const unhandledErrorType = isUnhandledOrReplayError
+    ? getUnhandledErrorType(error)
+    : null
+  const isConsoleErrorStringMessage = unhandledErrorType === 'string'
   // If the error is:
   // - hydration warning
   // - captured console error or unhandled rejection
   // skip displaying the error name
   const title =
-    isUnhandledOrReplayError || hydrationWarning ? '' : error.name + ': '
+    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||
+    hydrationWarning
+      ? ''
+      : error.name + ': '
 
   // If it's replayed error, display the environment name
   const environmentName =

packages/next/src/client/components/react-dev-overlay/internal/helpers/console-error.ts

@@ -1,15 +1,29 @@
+// To distinguish from React error.digest, we use a different symbol here to determine if the error is from console.error or unhandled promise rejection.
+const digestSym = Symbol.for('next.console.error.digest')
+const consoleTypeSym = Symbol.for('next.console.error.type')
+
 // Represent non Error shape unhandled promise rejections or console.error errors.
 // Those errors will be captured and displayed in Error Overlay.
-type UnhandledError = Error & { digest: 'NEXT_UNHANDLED_ERROR' }
+type UnhandledError = Error & {
+  [digestSym]: 'NEXT_UNHANDLED_ERROR'
+  [consoleTypeSym]: 'string' | 'error'
+}
 
-export function createUnhandledError(message: string): UnhandledError {
-  const error = new Error(message) as UnhandledError
-  error.digest = 'NEXT_UNHANDLED_ERROR'
+export function createUnhandledError(message: string | Error): UnhandledError {
+  const error = (
+    typeof message === 'string' ? new Error(message) : message
+  ) as UnhandledError
+  error[digestSym] = 'NEXT_UNHANDLED_ERROR'
+  error[consoleTypeSym] = typeof message === 'string' ? 'string' : 'error'
   return error
 }
 
 export const isUnhandledConsoleOrRejection = (
   error: any
 ): error is UnhandledError => {
-  return error && error.digest === 'NEXT_UNHANDLED_ERROR'
+  return error && error[digestSym] === 'NEXT_UNHANDLED_ERROR'
+}
+
+export const getUnhandledErrorType = (error: UnhandledError) => {
+  return error[consoleTypeSym]
 }

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -17,16 +17,20 @@ const rejectionHandlers: Array<ErrorHandler> = []
 
 export function handleClientError(
   originError: unknown,
-  consoleErrorArgs: any[]
+  consoleErrorArgs: any[],
+  capturedFromConsole: boolean = false
 ) {
   let error: Error
   if (!originError || !isError(originError)) {
     // If it's not an error, format the args into an error
     const formattedErrorMessage = formatConsoleArgs(consoleErrorArgs)
-    error = getReactStitchedError(createUnhandledError(formattedErrorMessage))
+    error = createUnhandledError(formattedErrorMessage)
   } else {
-    error = originError
+    error = capturedFromConsole
+      ? createUnhandledError(originError)
+      : originError
   }
+  error = getReactStitchedError(error)
 
   storeHydrationErrorStateFromConsoleArgs(...consoleErrorArgs)
   attachHydrationErrorState(error)

test/development/app-dir/capture-console-error-owner-stack/app/browser/event/page.js

@@ -0,0 +1,13 @@
+'use client'
+
+export default function Page() {
+  return (
+    <button
+      onClick={() => {
+        console.error('trigger an console <%s>', 'error')
+      }}
+    >
+      click to error
+    </button>
+  )
+}

test/development/app-dir/capture-console-error-owner-stack/app/browser/render-loop/page.js

@@ -0,0 +1,8 @@
+'use client'
+
+export default function Page() {
+  for (let i = 0; i < 3; i++) {
+    console.error('trigger an console.error in loop of render')
+  }
+  return <p>render</p>
+}

test/development/app-dir/capture-console-error-owner-stack/app/browser/render/page.js

@@ -0,0 +1,6 @@
+'use client'
+
+export default function Page() {
+  console.error('trigger an console.error in render')
+  return <p>render</p>
+}

test/development/app-dir/capture-console-error-owner-stack/app/layout.js

@@ -0,0 +1,7 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/development/app-dir/capture-console-error-owner-stack/app/rsc/page.js

@@ -0,0 +1,4 @@
+export default function Page() {
+  console.error(new Error('boom'))
+  return <p>rsc</p>
+}

test/development/app-dir/capture-console-error-owner-stack/app/ssr-error-instance/page.js

@@ -0,0 +1,6 @@
+'use client'
+
+export default function Page() {
+  console.error(new Error('page error'))
+  return <p>ssr</p>
+}

test/development/app-dir/capture-console-error-owner-stack/app/ssr/page.js

@@ -0,0 +1,8 @@
+'use client'
+
+export default function Page() {
+  console.error(
+    'ssr console error:' + (typeof window === 'undefined' ? 'server' : 'client')
+  )
+  return <p>ssr</p>
+}