Fix bug when fatal error is thrown as a result of batch.commit (#12480

)

Fixes #12474

packages/react-dom/src/__tests__/ReactDOMRoot-test.internal.js

@@ -320,4 +320,14 @@ describe('ReactDOMRoot', () => {
     flush();
     expect(container.textContent).toEqual('1');
   });
+
+  it('handles fatal errors triggered by batch.commit()', () => {
+    const root = ReactDOM.createRoot(container);
+    const batch = root.createBatch();
+    const InvalidType = undefined;
+    expect(() => batch.render(<InvalidType />)).toWarnDev([
+      'React.createElement: type is invalid',
+    ]);
+    expect(() => batch.commit()).toThrow('Element type is invalid');
+  });
 });

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -932,7 +932,12 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
         const sourceFiber: Fiber = nextUnitOfWork;
         let returnFiber = sourceFiber.return;
         if (returnFiber === null) {
-          // This is a fatal error.
+          // This is the root. The root could capture its own errors. However,
+          // we don't know if it errors before or after we pushed the host
+          // context. This information is needed to avoid a stack mismatch.
+          // Because we're not sure, treat this as a fatal error. We could track
+          // which phase it fails in, but doesn't seem worth it. At least
+          // for now.
           didFatal = true;
           onUncaughtError(thrownValue);
           break;
@@ -1492,6 +1497,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     // Perform work on root as if the given expiration time is the current time.
     // This has the effect of synchronously flushing all work up to and
     // including the given time.
+    nextFlushedRoot = root;
+    nextFlushedExpirationTime = expirationTime;
     performWorkOnRoot(root, expirationTime, false);
     finishRendering();
   }