Make onCaughtError and onUncaughtError configurable

facebook · Mar 26, 2024 · d597ebd · d597ebd
1 parent d1ea74f
commit d597ebd
Show file tree

Hide file tree

Showing 15 changed files with 527 additions and 146 deletions.
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -39,6 +39,8 @@ import {
   getPublicRootInstance,
   findHostInstance,
   findHostInstanceWithWarning,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -124,6 +126,8 @@ function legacyCreateRootFromDOMContainer(
       false, // isStrictMode
       false, // concurrentUpdatesByDefaultOverride,
       '', // identifierPrefix
+      defaultOnUncaughtError,
+      defaultOnCaughtError,
       noopOnRecoverableError,
       // TODO(luna) Support hydration later
       null,
@@ -158,7 +162,9 @@ function legacyCreateRootFromDOMContainer(
       false, // isStrictMode
       false, // concurrentUpdatesByDefaultOverride,
       '', // identifierPrefix
-      noopOnRecoverableError, // onRecoverableError
+      defaultOnUncaughtError,
+      defaultOnCaughtError,
+      noopOnRecoverableError,
       null, // transitionCallbacks
     );
     container._reactRootContainer = root;

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -33,7 +33,21 @@ export type CreateRootOptions = {
   unstable_concurrentUpdatesByDefault?: boolean,
   unstable_transitionCallbacks?: TransitionTracingCallbacks,
   identifierPrefix?: string,
-  onRecoverableError?: (error: mixed) => void,
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?React$Component<any, any>,
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+digest?: ?string, +componentStack?: ?string},
+  ) => void,
 };
 
 export type HydrateRootOptions = {
@@ -45,7 +59,21 @@ export type HydrateRootOptions = {
   unstable_concurrentUpdatesByDefault?: boolean,
   unstable_transitionCallbacks?: TransitionTracingCallbacks,
   identifierPrefix?: string,
-  onRecoverableError?: (error: mixed) => void,
+  onUncaughtError?: (
+    error: mixed,
+    errorInfo: {+componentStack?: ?string},
+  ) => void,
+  onCaughtError?: (
+    error: mixed,
+    errorInfo: {
+      +componentStack?: ?string,
+      +errorBoundary?: ?React$Component<any, any>,
+    },
+  ) => void,
+  onRecoverableError?: (
+    error: mixed,
+    errorInfo: {+digest?: ?string, +componentStack?: ?string},
+  ) => void,
   formState?: ReactFormState<any, any> | null,
 };
 
@@ -68,15 +96,12 @@ import {
   updateContainer,
   flushSync,
   isAlreadyRendering,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 
-import reportGlobalError from 'shared/reportGlobalError';
-
-function defaultOnRecoverableError(error: mixed, errorInfo: any) {
-  reportGlobalError(error);
-}
-
 // $FlowFixMe[missing-this-annot]
 function ReactDOMRoot(internalRoot: FiberRoot) {
   this._internalRoot = internalRoot;
@@ -157,6 +182,8 @@ export function createRoot(
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
+  let onUncaughtError = defaultOnUncaughtError;
+  let onCaughtError = defaultOnCaughtError;
   let onRecoverableError = defaultOnRecoverableError;
   let transitionCallbacks = null;
 
@@ -194,6 +221,12 @@ export function createRoot(
     if (options.identifierPrefix !== undefined) {
       identifierPrefix = options.identifierPrefix;
     }
+    if (options.onUncaughtError !== undefined) {
+      onUncaughtError = options.onUncaughtError;
+    }
+    if (options.onCaughtError !== undefined) {
+      onCaughtError = options.onCaughtError;
+    }
     if (options.onRecoverableError !== undefined) {
       onRecoverableError = options.onRecoverableError;
     }
@@ -209,6 +242,8 @@ export function createRoot(
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
+    onUncaughtError,
+    onCaughtError,
     onRecoverableError,
     transitionCallbacks,
   );
@@ -263,6 +298,8 @@ export function hydrateRoot(
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
+  let onUncaughtError = defaultOnUncaughtError;
+  let onCaughtError = defaultOnCaughtError;
   let onRecoverableError = defaultOnRecoverableError;
   let transitionCallbacks = null;
   let formState = null;
@@ -279,6 +316,12 @@ export function hydrateRoot(
     if (options.identifierPrefix !== undefined) {
       identifierPrefix = options.identifierPrefix;
     }
+    if (options.onUncaughtError !== undefined) {
+      onUncaughtError = options.onUncaughtError;
+    }
+    if (options.onCaughtError !== undefined) {
+      onCaughtError = options.onCaughtError;
+    }
     if (options.onRecoverableError !== undefined) {
       onRecoverableError = options.onRecoverableError;
     }
@@ -301,6 +344,8 @@ export function hydrateRoot(
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
+    onUncaughtError,
+    onCaughtError,
     onRecoverableError,
     transitionCallbacks,
     formState,

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
@@ -20,6 +20,9 @@ import {
   updateContainer,
   injectIntoDevTools,
   getPublicRootInstance,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
 } from 'react-reconciler/src/ReactFiberReconciler';
 
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
@@ -43,13 +46,6 @@ import {
 } from './ReactNativePublicCompat';
 import {getPublicInstanceFromInternalInstanceHandle} from './ReactFiberConfigFabric';
 
-// $FlowFixMe[missing-local-annot]
-function onRecoverableError(error) {
-  // TODO: Expose onRecoverableError option to userspace
-  // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
-  console.error(error);
-}
-
 function render(
   element: Element<ElementType>,
   containerTag: number,
@@ -68,7 +64,9 @@ function render(
       false,
       null,
       '',
-      onRecoverableError,
+      defaultOnUncaughtError,
+      defaultOnCaughtError,
+      defaultOnRecoverableError,
       null,
     );
     roots.set(containerTag, root);

diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -20,6 +20,9 @@ import {
   updateContainer,
   injectIntoDevTools,
   getPublicRootInstance,
+  defaultOnUncaughtError,
+  defaultOnCaughtError,
+  defaultOnRecoverableError,
 } from 'react-reconciler/src/ReactFiberReconciler';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactFiberComponentStack';
@@ -47,13 +50,6 @@ import {
   isChildPublicInstance,
 } from './ReactNativePublicCompat';
 
-// $FlowFixMe[missing-local-annot]
-function onRecoverableError(error) {
-  // TODO: Expose onRecoverableError option to userspace
-  // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
-  console.error(error);
-}
-
 function render(
   element: Element<ElementType>,
   containerTag: number,
@@ -71,7 +67,9 @@ function render(
       false,
       null,
       '',
-      onRecoverableError,
+      defaultOnUncaughtError,
+      defaultOnCaughtError,
+      defaultOnRecoverableError,
       null,
     );
     roots.set(containerTag, root);

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -974,6 +974,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           null,
           false,
           '',
+          NoopRenderer.defaultOnUncaughtError,
+          NoopRenderer.defaultOnCaughtError,
           onRecoverableError,
           null,
         );
@@ -996,6 +998,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
+        NoopRenderer.defaultOnUncaughtError,
+        NoopRenderer.defaultOnCaughtError,
         onRecoverableError,
         options && options.unstable_transitionCallbacks
           ? options.unstable_transitionCallbacks
@@ -1028,6 +1032,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
+        NoopRenderer.defaultOnUncaughtError,
+        NoopRenderer.defaultOnCaughtError,
         onRecoverableError,
         null,
       );

diff --git a/packages/react-reconciler/src/ReactFiberErrorDialog.js b/packages/react-reconciler/src/ReactFiberErrorDialog.js
@@ -7,16 +7,14 @@
  * @flow
  */
 
-import type {Fiber} from './ReactInternalTypes';
-import type {CapturedValue} from './ReactCapturedValue';
-
 // This module is forked in different environments.
 // By default, return `true` to log errors to the console.
 // Forks can return `false` if this isn't desirable.
 
 export function showErrorDialog(
-  boundary: null | Fiber,
-  errorInfo: CapturedValue<mixed>,
+  errorBoundary: ?React$Component<any, any>,
+  error: mixed,
+  componentStack: string,
 ): boolean {
   return true;
 }