Don't trigger error handlers from cDC

Handling them in cDC would attach the owner stack of the error boundary.
That's not helpful for a specific error though.
We need to make sure these error handlers are only called from React error handlers.

Author: eps1lon

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

@@ -28,9 +28,6 @@ import { setAppBuildId } from './app-build-id'
 import { shouldRenderRootLevelErrorOverlay } from './lib/is-error-thrown-while-rendering-rsc'
 import { handleClientError } from './components/errors/use-error-handler'
 import { isNextRouterError } from './components/is-next-router-error'
-import OldAppDevErrorBoundary from './components/react-dev-overlay/app/old-react-dev-overlay'
-import { DevOverlayErrorBoundary as AppDevErrorBoundary } from './components/react-dev-overlay/_experimental/app/error-boundary'
-import { ErrorBoundaryHandler } from './components/error-boundary'
 
 /// <reference types="react-dom/experimental" />
 
@@ -249,18 +246,7 @@ function Root({ children }: React.PropsWithChildren<{}>) {
 
 const reactRootOptions: ReactDOMClient.RootOptions = {
   onRecoverableError,
-  onCaughtError: (error, errorInfo) => {
-    const errorBoundaryComponent = errorInfo.errorBoundary?.constructor
-    const isImplicitErrorBoundary =
-      (process.env.NODE_ENV !== 'production' &&
-        (errorBoundaryComponent === OldAppDevErrorBoundary ||
-          errorBoundaryComponent === AppDevErrorBoundary)) ||
-      errorBoundaryComponent === ErrorBoundaryHandler
-    // Built-in error boundaries decide whether an error is caught or not.
-    if (!isImplicitErrorBoundary) {
-      onCaughtError(error, errorInfo)
-    }
-  },
+  onCaughtError,
   onUncaughtError,
 }
 

packages/next/src/client/components/error-boundary.tsx

@@ -5,10 +5,6 @@ import { useUntrackedPathname } from './navigation-untracked'
 import { isNextRouterError } from './is-next-router-error'
 import { handleHardNavError } from './nav-failure-handler'
 import { workAsyncStorage } from '../../server/app-render/work-async-storage.external'
-import {
-  onCaughtError,
-  onUncaughtError,
-} from '../react-client-callbacks/error-boundary-callbacks'
 
 const styles = {
   error: {
@@ -122,16 +118,6 @@ export class ErrorBoundaryHandler extends React.Component<
     }
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    // We don't consider errors caught unless they're caught by an explicit error
-    // boundary. The built-in ones are considered implicit.
-    if (this.props.errorComponent === GlobalError) {
-      onUncaughtError(error, errorInfo)
-    } else {
-      onCaughtError(error, { ...errorInfo, errorBoundary: this })
-    }
-  }
-
   reset = () => {
     this.setState({ error: null })
   }

packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx

@@ -2,7 +2,6 @@ import type { GlobalErrorComponent } from '../../../error-boundary'
 
 import { PureComponent } from 'react'
 import { RuntimeErrorHandler } from '../../../errors/runtime-error-handler'
-import { onUncaughtError } from '../../../../react-client-callbacks/error-boundary-callbacks'
 
 type DevOverlayErrorBoundaryProps = {
   children: React.ReactNode
@@ -58,12 +57,8 @@ export class DevOverlayErrorBoundary extends PureComponent<
     }
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+  componentDidCatch() {
     this.props.onError(this.state.isReactError)
-
-    // We don't consider errors caught unless they're caught by an explicit error
-    // boundary. The built-in ones are considered implicit.
-    onUncaughtError(error, errorInfo)
   }
 
   render() {

packages/next/src/client/components/react-dev-overlay/app/old-react-dev-overlay.tsx

@@ -11,7 +11,6 @@ import { RootLayoutMissingTagsError } from '../internal/container/RootLayoutMiss
 import type { Dispatcher } from './hot-reloader-client'
 import { RuntimeErrorHandler } from '../../errors/runtime-error-handler'
 import type { GlobalErrorComponent } from '../../error-boundary'
-import { onUncaughtError } from '../../../react-client-callbacks/error-boundary-callbacks'
 
 function ErroredHtml({
   globalError: [GlobalError, globalErrorStyles],
@@ -64,12 +63,6 @@ export default class ReactDevOverlay extends React.PureComponent<
     }
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    // We don't consider errors caught unless they're caught by an explicit error
-    // boundary. The built-in ones are considered implicit.
-    onUncaughtError(error, errorInfo)
-  }
-
   render() {
     const { state, children, dispatcher, globalError } = this.props
     const { isReactError, reactError } = this.state

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

@@ -7,16 +7,37 @@ 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 OldAppDevErrorBoundary from '../components/react-dev-overlay/app/old-react-dev-overlay'
+import { DevOverlayErrorBoundary as AppDevErrorBoundary } from '../components/react-dev-overlay/_experimental/app/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 === OldAppDevErrorBoundary ||
+        errorBoundaryComponent === AppDevErrorBoundary)) ||
+    (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)
+  }
+
   // 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 ||

test/development/app-dir/owner-stack/owner-stack.test.ts

@@ -54,11 +54,7 @@ describe('app-dir - owner-stack', () => {
      at useThrowError 
      at useErrorHook 
      at Page 
-     at ReactDevOverlay 
-     at HotReload 
-     at Router 
-     at AppRouter 
-     at ServerRoot"
+     at ClientPageRoot"
     `)
   })
 
@@ -144,11 +140,7 @@ describe('app-dir - owner-stack', () => {
      at useThrowError 
      at useErrorHook 
      at Page 
-     at ReactDevOverlay 
-     at HotReload 
-     at Router 
-     at AppRouter 
-     at ServerRoot"
+     at ClientPageRoot"
     `)
   })