Suspend on uncaught error, if inside transition

Usually, if an error isn't caught by an error boundary, we treat it
like a panic: the whole app will unmount and we'll throw a
top-level error.

However, if we're in an async transition, what we can do instead is
suspend the transition — i.e. remain on the current screen, like we do
during a refresh when we're waiting for new data to load in
the background.

The reason we only do this for transitions is because synchronous
renders are expected to commit synchronously to maintain consistency
with external state. (We arguably should suspend-on-uncaught-error for
non-sync concurrent renders like continuous inputs, too, but that merits
further discussion.)

The suspended error is logged with onRecoverableError.

Author: acdlite

packages/react-noop-renderer/src/createReactNoop.js

@@ -938,7 +938,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     return NoopRenderer.flushSync(fn);
   }
 
-  function onRecoverableError(error) {
+  function onRecoverableErrorDefault(error) {
     // TODO: Turn this on once tests are fixed
     // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
     // console.error(error);
@@ -972,15 +972,15 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           null,
           false,
           '',
-          onRecoverableError,
+          onRecoverableErrorDefault,
         );
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
     },
 
     // TODO: Replace ReactNoop.render with createRoot + root.render
-    createRoot() {
+    createRoot(options) {
       const container = {
         rootID: '' + idCounter++,
         pendingChildren: [],
@@ -994,8 +994,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
-        onRecoverableError,
+        options && options.onRecoverableError
+          ? options.onRecoverableError
+          : onRecoverableErrorDefault,
       );
+
       return {
         _Scheduler: Scheduler,
         render(children: ReactNodeList) {
@@ -1024,7 +1027,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
-        onRecoverableError,
+        onRecoverableErrorDefault,
       );
       return {
         _Scheduler: Scheduler,

packages/react-reconciler/src/ReactFiberThrow.new.js

@@ -62,6 +62,8 @@ import {
 } from './ReactFiberSuspenseContext.new';
 import {
   renderDidError,
+  renderDidErrorUncaught,
+  queueConcurrentError,
   onUncaughtError,
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
@@ -516,22 +518,32 @@ function throwException(
         queueHydrationError(value);
         return;
       }
-    } else {
-      // Otherwise, fall through to the error path.
     }
+
+    // Otherwise, fall through to the error path.
+
+    // Push the error to a queue. If we end up recovering without surfacing
+    // the error to the user, we'll updgrade this to a recoverable error and
+    // log it with onRecoverableError.
+    //
+    // This is intentionally a separate call from renderDidError because in
+    // some cases we use the error handling path as an implementation detail
+    // to unwind the stack, but we don't want to log it as a real error. An
+    // example is suspending outside of a Suspense boundary (see previous
+    // branch above).
+    queueConcurrentError(value);
   }
 
   // We didn't find a boundary that could handle this type of exception. Start
   // over and traverse parent path again, this time treating the exception
   // as an error.
-  renderDidError(value);
-
-  value = createCapturedValue(value, sourceFiber);
+  const error = value;
+  const errorInfo = createCapturedValue(error, sourceFiber);
   let workInProgress = returnFiber;
   do {
     switch (workInProgress.tag) {
       case HostRoot: {
-        const errorInfo = value;
+        renderDidErrorUncaught();
         workInProgress.flags |= ShouldCapture;
         const lane = pickArbitraryLane(rootRenderLanes);
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
@@ -541,7 +553,7 @@ function throwException(
       }
       case ClassComponent:
         // Capture and retry
-        const errorInfo = value;
+        renderDidError();
         const ctor = workInProgress.type;
         const instance = workInProgress.stateNode;
         if (

packages/react-reconciler/src/ReactFiberThrow.old.js

@@ -62,6 +62,8 @@ import {
 } from './ReactFiberSuspenseContext.old';
 import {
   renderDidError,
+  renderDidErrorUncaught,
+  queueConcurrentError,
   onUncaughtError,
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
@@ -516,22 +518,32 @@ function throwException(
         queueHydrationError(value);
         return;
       }
-    } else {
-      // Otherwise, fall through to the error path.
     }
+
+    // Otherwise, fall through to the error path.
+
+    // Push the error to a queue. If we end up recovering without surfacing
+    // the error to the user, we'll updgrade this to a recoverable error and
+    // log it with onRecoverableError.
+    //
+    // This is intentionally a separate call from renderDidError because in
+    // some cases we use the error handling path as an implementation detail
+    // to unwind the stack, but we don't want to log it as a real error. An
+    // example is suspending outside of a Suspense boundary (see previous
+    // branch above).
+    queueConcurrentError(value);
   }
 
   // We didn't find a boundary that could handle this type of exception. Start
   // over and traverse parent path again, this time treating the exception
   // as an error.
-  renderDidError(value);
-
-  value = createCapturedValue(value, sourceFiber);
+  const error = value;
+  const errorInfo = createCapturedValue(error, sourceFiber);
   let workInProgress = returnFiber;
   do {
     switch (workInProgress.tag) {
       case HostRoot: {
-        const errorInfo = value;
+        renderDidErrorUncaught();
         workInProgress.flags |= ShouldCapture;
         const lane = pickArbitraryLane(rootRenderLanes);
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
@@ -541,7 +553,7 @@ function throwException(
       }
       case ClassComponent:
         // Capture and retry
-        const errorInfo = value;
+        renderDidError();
         const ctor = workInProgress.type;
         const instance = workInProgress.stateNode;
         if (