[app] Send errors not handled by explicit error boundaries through reportError (#76101)

Author: eps1lon

packages/next/src/client/app-index.tsx

@@ -244,11 +244,11 @@ function Root({ children }: React.PropsWithChildren<{}>) {
   return children
 }
 
-const reactRootOptions = {
+const reactRootOptions: ReactDOMClient.RootOptions = {
   onRecoverableError,
   onCaughtError,
   onUncaughtError,
-} satisfies ReactDOMClient.RootOptions
+}
 
 export function hydrate() {
   const reactEl = (

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

@@ -3,7 +3,7 @@ import { isNextRouterError } from '../is-next-router-error'
 import { handleClientError } from '../errors/use-error-handler'
 import { parseConsoleArgs } from '../../lib/console'
 
-export const originConsoleError = window.console.error
+export const originConsoleError = globalThis.console.error
 
 // Patch console.error to collect information about hydration errors
 export function patchConsoleError() {

packages/next/src/client/react-client-callbacks/error-boundary-callbacks.ts

@@ -1,22 +1,41 @@
 // This file is only used in app router due to the specific error state handling.
 
-import type { HydrationOptions } from 'react-dom/client'
+import type { ErrorInfo } from 'react'
 import { getReactStitchedError } from '../components/errors/stitched-error'
 import { handleClientError } from '../components/errors/use-error-handler'
 import { isNextRouterError } from '../components/is-next-router-error'
 import { isBailoutToCSRError } from '../../shared/lib/lazy-dynamic/bailout-to-csr'
 import { reportGlobalError } from './report-global-error'
 import { originConsoleError } from '../components/globals/intercept-console-error'
+import { AppDevOverlayErrorBoundary } from '../components/react-dev-overlay/app/app-dev-overlay-error-boundary'
+import {
+  ErrorBoundaryHandler,
+  GlobalError as DefaultErrorBoundary,
+} from '../components/error-boundary'
+
+export function onCaughtError(
+  err: unknown,
+  errorInfo: ErrorInfo & { errorBoundary?: React.Component }
+) {
+  const errorBoundaryComponent = errorInfo.errorBoundary?.constructor
+
+  const isImplicitErrorBoundary =
+    (process.env.NODE_ENV !== 'production' &&
+      errorBoundaryComponent === AppDevOverlayErrorBoundary) ||
+    (errorBoundaryComponent === ErrorBoundaryHandler &&
+      (errorInfo.errorBoundary! as InstanceType<typeof ErrorBoundaryHandler>)
+        .props.errorComponent === DefaultErrorBoundary)
+  if (isImplicitErrorBoundary) {
+    // We don't consider errors caught unless they're caught by an explicit error
+    // boundary. The built-in ones are considered implicit.
+    // This mimics how the same app would behave without Next.js.
+    return onUncaughtError(err, errorInfo)
+  }
 
-export const onCaughtError: HydrationOptions['onCaughtError'] = (
-  err,
-  errorInfo
-) => {
   // Skip certain custom errors which are not expected to be reported on client
   if (isBailoutToCSRError(err) || isNextRouterError(err)) return
 
   if (process.env.NODE_ENV !== 'production') {
-    const errorBoundaryComponent = errorInfo?.errorBoundary?.constructor
     const errorBoundaryName =
       // read react component displayName
       (errorBoundaryComponent as any)?.displayName ||
@@ -57,35 +76,19 @@ export const onCaughtError: HydrationOptions['onCaughtError'] = (
   }
 }
 
-export const onUncaughtError: HydrationOptions['onUncaughtError'] = (
-  err,
-  errorInfo
-) => {
+export function onUncaughtError(err: unknown, errorInfo: React.ErrorInfo) {
   // Skip certain custom errors which are not expected to be reported on client
   if (isBailoutToCSRError(err) || isNextRouterError(err)) return
 
   if (process.env.NODE_ENV !== 'production') {
-    const componentThatErroredFrame = errorInfo?.componentStack?.split('\n')[1]
-
-    // Match chrome or safari stack trace
-    const matches =
-      componentThatErroredFrame?.match(/\s+at (\w+)\s+|(\w+)@/) ?? []
-    const componentThatErroredName = matches[1] || matches[2] || 'Unknown'
-
-    // Create error location with errored component and error boundary, to match the behavior of default React onCaughtError handler.
-    const errorLocation = componentThatErroredName
-      ? `The above error occurred in the <${componentThatErroredName}> component.`
-      : `The above error occurred in one of your components.`
-
     const stitchedError = getReactStitchedError(err)
     // TODO: change to passing down errorInfo later
     // In development mode, pass along the component stack to the error
     if (errorInfo.componentStack) {
       ;(stitchedError as any)._componentStack = errorInfo.componentStack
     }
 
-    // Log and report the error with location but without modifying the error stack
-    originConsoleError('%o\n\n%s', err, errorLocation)
+    // TODO: Add an adendum to the overlay telling people about custom error boundaries.
     reportGlobalError(stitchedError)
   } else {
     reportGlobalError(err)

packages/next/src/client/react-client-callbacks/report-global-error.ts

@@ -4,5 +4,6 @@ export const reportGlobalError =
       // emulating an uncaught JavaScript error.
       reportError
     : (error: unknown) => {
-        window.console.error(error)
+        // TODO: Dispatch error event
+        globalThis.console.error(error)
       }