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();
  }