Polyfill dispatching error event

packages/react-dom-bindings/src/events/DOMPluginEventSystem.js

@@ -68,6 +68,8 @@ import * as SelectEventPlugin from './plugins/SelectEventPlugin';
 import * as SimpleEventPlugin from './plugins/SimpleEventPlugin';
 import * as FormActionEventPlugin from './plugins/FormActionEventPlugin';
 
+import reportGlobalError from 'shared/reportGlobalError';
+
 type DispatchListener = {
   instance: null | Fiber,
   listener: Function,
@@ -226,17 +228,6 @@ export const nonDelegatedEvents: Set<DOMEventName> = new Set([
   ...mediaEventTypes,
 ]);
 
-const reportErrorToBrowser =
-  typeof reportError === 'function'
-    ? // In modern browsers, reportError will dispatch an error event,
-      // emulating an uncaught JavaScript error.
-      reportError
-    : (error: mixed) => {
-        // In older browsers and test environments, fallback to console.error.
-        // eslint-disable-next-line react-internal/no-production-logging
-        console['error'](error);
-      };
-
 function executeDispatch(
   event: ReactSyntheticEvent,
   listener: Function,
@@ -246,7 +237,7 @@ function executeDispatch(
   try {
     listener(event);
   } catch (error) {
-    reportErrorToBrowser(error);
+    reportGlobalError(error);
   }
   event.currentTarget = null;
 }

packages/react-dom/src/client/ReactDOMRoot.js

@@ -70,17 +70,11 @@ import {
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 
-/* global reportError */
-const defaultOnRecoverableError =
-  typeof reportError === 'function'
-    ? // In modern browsers, reportError will dispatch an error event,
-      // emulating an uncaught JavaScript error.
-      reportError
-    : (error: mixed) => {
-        // In older browsers and test environments, fallback to console.error.
-        // eslint-disable-next-line react-internal/no-production-logging
-        console['error'](error);
-      };
+import reportGlobalError from 'shared/reportGlobalError';
+
+function defaultOnRecoverableError(error: mixed, errorInfo: any) {
+  reportGlobalError(error);
+}
 
 // $FlowFixMe[missing-this-annot]
 function ReactDOMRoot(internalRoot: FiberRoot) {

packages/react-reconciler/src/ReactFiberErrorLogger.js

@@ -14,16 +14,7 @@ import {showErrorDialog} from './ReactFiberErrorDialog';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {HostRoot} from 'react-reconciler/src/ReactWorkTags';
 
-const reportErrorToBrowser =
-  typeof reportError === 'function'
-    ? // In modern browsers, reportError will dispatch an error event,
-      // emulating an uncaught JavaScript error.
-      reportError
-    : (error: mixed) => {
-        // In older browsers and test environments, fallback to console.error.
-        // eslint-disable-next-line react-internal/no-production-logging
-        console['error'](error);
-      };
+import reportGlobalError from 'shared/reportGlobalError';
 
 export function logCapturedError(
   boundary: Fiber,
@@ -44,7 +35,7 @@ export function logCapturedError(
       // For uncaught root errors we report them as uncaught to the browser's
       // onerror callback. This won't have component stacks and the error addendum.
       // So we add those into a separate console.warn.
-      reportErrorToBrowser(error);
+      reportGlobalError(error);
       if (__DEV__) {
         const source = errorInfo.source;
         const stack = errorInfo.stack;

packages/react/src/ReactStartTransition.js

@@ -15,6 +15,8 @@ import {
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 
+import reportGlobalError from 'shared/reportGlobalError';
+
 export function startTransition(
   scope: () => void,
   options?: StartTransitionOptions,
@@ -51,10 +53,10 @@ export function startTransition(
         typeof returnValue.then === 'function'
       ) {
         callbacks.forEach(callback => callback(currentTransition, returnValue));
-        returnValue.then(noop, onError);
+        returnValue.then(noop, reportGlobalError);
       }
     } catch (error) {
-      onError(error);
+      reportGlobalError(error);
     } finally {
       warnAboutTransitionSubscriptions(prevTransition, currentTransition);
       ReactCurrentBatchConfig.transition = prevTransition;
@@ -91,16 +93,3 @@ function warnAboutTransitionSubscriptions(
 }
 
 function noop() {}
-
-// Use reportError, if it exists. Otherwise console.error. This is the same as
-// the default for onRecoverableError.
-const onError =
-  typeof reportError === 'function'
-    ? // In modern browsers, reportError will dispatch an error event,
-      // emulating an uncaught JavaScript error.
-      reportError
-    : (error: mixed) => {
-        // In older browsers and test environments, fallback to console.error.
-        // eslint-disable-next-line react-internal/no-production-logging
-        console['error'](error);
-      };

packages/shared/reportGlobalError.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const reportGlobalError: (error: mixed) => void =
+  typeof reportError === 'function'
+    ? // In modern browsers, reportError will dispatch an error event,
+      // emulating an uncaught JavaScript error.
+      reportError
+    : error => {
+        if (
+          typeof window === 'object' &&
+          typeof window.ErrorEvent === 'function'
+        ) {
+          // Browser Polyfill
+          const message =
+            typeof error === 'object' &&
+            error !== null &&
+            typeof error.message === 'string'
+              ? // eslint-disable-next-line react-internal/safe-string-coercion
+                String(error.message)
+              : // eslint-disable-next-line react-internal/safe-string-coercion
+                String(error);
+          const event = new window.ErrorEvent('error', {
+            bubbles: true,
+            cancelable: true,
+            message: message,
+            error: error,
+          });
+          const shouldLog = window.dispatchEvent(event);
+          if (!shouldLog) {
+            return;
+          }
+        } else if (
+          typeof process === 'object' &&
+          // $FlowFixMe[method-unbinding]
+          typeof process.emit === 'function'
+        ) {
+          // Node Polyfill
+          process.emit('uncaughtException', error);
+          return;
+        }
+        // eslint-disable-next-line react-internal/no-production-logging
+        console['error'](error);
+      };
+
+export default reportGlobalError;