[Fiber] Don't Rethrow Errors at the Root

packages/internal-test-utils/ReactInternalTestUtils.js

@@ -13,6 +13,8 @@ import simulateBrowserEventDispatch from './simulateBrowserEventDispatch';
 
 export {act} from './internalAct';
 
+import {thrownErrors, actingUpdatesScopeDepth} from './internalAct';
+
 function assertYieldsWereCleared(caller) {
   const actualYields = SchedulerMock.unstable_clearLog();
   if (actualYields.length !== 0) {
@@ -110,6 +112,14 @@ ${diff(expectedLog, actualLog)}
   throw error;
 }
 
+function aggregateErrors(errors: Array<mixed>): mixed {
+  if (errors.length > 1 && typeof AggregateError === 'function') {
+    // eslint-disable-next-line no-undef
+    return new AggregateError(errors);
+  }
+  return errors[0];
+}
+
 export async function waitForThrow(expectedError: mixed): mixed {
   assertYieldsWereCleared(waitForThrow);
 
@@ -126,39 +136,80 @@ export async function waitForThrow(expectedError: mixed): mixed {
       error.message = 'Expected something to throw, but nothing did.';
       throw error;
     }
+
+    const errorHandlerDOM = function (event: ErrorEvent) {
+      // Prevent logs from reprinting this error.
+      event.preventDefault();
+      thrownErrors.push(event.error);
+    };
+    const errorHandlerNode = function (err: mixed) {
+      thrownErrors.push(err);
+    };
+    // We track errors that were logged globally as if they occurred in this scope and then rethrow them.
+    if (actingUpdatesScopeDepth === 0) {
+      if (
+        typeof window === 'object' &&
+        typeof window.addEventListener === 'function'
+      ) {
+        // We're in a JS DOM environment.
+        window.addEventListener('error', errorHandlerDOM);
+      } else if (typeof process === 'object') {
+        // Node environment
+        process.on('uncaughtException', errorHandlerNode);
+      }
+    }
     try {
       SchedulerMock.unstable_flushAllWithoutAsserting();
     } catch (x) {
+      thrownErrors.push(x);
+    } finally {
+      if (actingUpdatesScopeDepth === 0) {
+        if (
+          typeof window === 'object' &&
+          typeof window.addEventListener === 'function'
+        ) {
+          // We're in a JS DOM environment.
+          window.removeEventListener('error', errorHandlerDOM);
+        } else if (typeof process === 'object') {
+          // Node environment
+          process.off('uncaughtException', errorHandlerNode);
+        }
+      }
+    }
+    if (thrownErrors.length > 0) {
+      const thrownError = aggregateErrors(thrownErrors);
+      thrownErrors.length = 0;
+
       if (expectedError === undefined) {
         // If no expected error was provided, then assume the caller is OK with
         // any error being thrown. We're returning the error so they can do
         // their own checks, if they wish.
-        return x;
+        return thrownError;
       }
-      if (equals(x, expectedError)) {
-        return x;
+      if (equals(thrownError, expectedError)) {
+        return thrownError;
       }
       if (
         typeof expectedError === 'string' &&
-        typeof x === 'object' &&
-        x !== null &&
-        typeof x.message === 'string'
+        typeof thrownError === 'object' &&
+        thrownError !== null &&
+        typeof thrownError.message === 'string'
       ) {
-        if (x.message.includes(expectedError)) {
-          return x;
+        if (thrownError.message.includes(expectedError)) {
+          return thrownError;
         } else {
           error.message = `
 Expected error was not thrown.
 
-${diff(expectedError, x.message)}
+${diff(expectedError, thrownError.message)}
 `;
           throw error;
         }
       }
       error.message = `
 Expected error was not thrown.
 
-${diff(expectedError, x)}
+${diff(expectedError, thrownError)}
 `;
       throw error;
     }

packages/internal-test-utils/internalAct.js

@@ -20,14 +20,24 @@ import * as Scheduler from 'scheduler/unstable_mock';
 
 import enqueueTask from './enqueueTask';
 
-let actingUpdatesScopeDepth: number = 0;
+export let actingUpdatesScopeDepth: number = 0;
+
+export const thrownErrors: Array<mixed> = [];
 
 async function waitForMicrotasks() {
   return new Promise(resolve => {
     enqueueTask(() => resolve());
   });
 }
 
+function aggregateErrors(errors: Array<mixed>): mixed {
+  if (errors.length > 1 && typeof AggregateError === 'function') {
+    // eslint-disable-next-line no-undef
+    return new AggregateError(errors);
+  }
+  return errors[0];
+}
+
 export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
   if (Scheduler.unstable_flushUntilNextPaint === undefined) {
     throw Error(
@@ -63,6 +73,28 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
   // public version of `act`, though we maybe should in the future.
   await waitForMicrotasks();
 
+  const errorHandlerDOM = function (event: ErrorEvent) {
+    // Prevent logs from reprinting this error.
+    event.preventDefault();
+    thrownErrors.push(event.error);
+  };
+  const errorHandlerNode = function (err: mixed) {
+    thrownErrors.push(err);
+  };
+  // We track errors that were logged globally as if they occurred in this scope and then rethrow them.
+  if (actingUpdatesScopeDepth === 1) {
+    if (
+      typeof window === 'object' &&
+      typeof window.addEventListener === 'function'
+    ) {
+      // We're in a JS DOM environment.
+      window.addEventListener('error', errorHandlerDOM);
+    } else if (typeof process === 'object') {
+      // Node environment
+      process.on('uncaughtException', errorHandlerNode);
+    }
+  }
+
   try {
     const result = await scope();
 
@@ -106,10 +138,27 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
       Scheduler.unstable_flushUntilNextPaint();
     } while (true);
 
+    if (thrownErrors.length > 0) {
+      // Rethrow any errors logged by the global error handling.
+      const thrownError = aggregateErrors(thrownErrors);
+      thrownErrors.length = 0;
+      throw thrownError;
+    }
+
     return result;
   } finally {
     const depth = actingUpdatesScopeDepth;
     if (depth === 1) {
+      if (
+        typeof window === 'object' &&
+        typeof window.addEventListener === 'function'
+      ) {
+        // We're in a JS DOM environment.
+        window.removeEventListener('error', errorHandlerDOM);
+      } else if (typeof process === 'object') {
+        // Node environment
+        process.off('uncaughtException', errorHandlerNode);
+      }
       global.IS_REACT_ACT_ENVIRONMENT = previousIsActEnvironment;
     }
     actingUpdatesScopeDepth = depth - 1;

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,9 +228,6 @@ export const nonDelegatedEvents: Set<DOMEventName> = new Set([
   ...mediaEventTypes,
 ]);
 
-let hasError: boolean = false;
-let caughtError: mixed = null;
-
 function executeDispatch(
   event: ReactSyntheticEvent,
   listener: Function,
@@ -238,12 +237,7 @@ function executeDispatch(
   try {
     listener(event);
   } catch (error) {
-    if (!hasError) {
-      hasError = true;
-      caughtError = error;
-    } else {
-      // TODO: Make sure this error gets logged somehow.
-    }
+    reportGlobalError(error);
   }
   event.currentTarget = null;
 }
@@ -285,13 +279,6 @@ export function processDispatchQueue(
     processDispatchQueueItemsInOrder(event, listeners, inCapturePhase);
     //  event system doesn't use pooling.
   }
-  // This would be a good time to rethrow if any of the event handlers threw.
-  if (hasError) {
-    const error = caughtError;
-    hasError = false;
-    caughtError = null;
-    throw error;
-  }
 }
 
 function dispatchEventsForPlugins(

packages/react-dom/src/__tests__/InvalidEventListeners-test.js

@@ -51,13 +51,11 @@ describe('InvalidEventListeners', () => {
     }
     window.addEventListener('error', handleWindowError);
     try {
-      await act(() => {
-        node.dispatchEvent(
-          new MouseEvent('click', {
-            bubbles: true,
-          }),
-        );
-      });
+      node.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
     } finally {
       window.removeEventListener('error', handleWindowError);
     }

packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.js

@@ -195,9 +195,7 @@ describe('ReactBrowserEventEmitter', () => {
     });
     window.addEventListener('error', errorHandler);
     try {
-      await act(() => {
-        CHILD.click();
-      });
+      CHILD.click();
       expect(idCallOrder.length).toBe(3);
       expect(idCallOrder[0]).toBe(CHILD);
       expect(idCallOrder[1]).toBe(PARENT);