Add stack unwinding phase for handling errors (#12201)

* Add stack unwinding phase for handling errors

A rewrite of error handling, with semantics that more closely match
stack unwinding.

Errors that are thrown during the render phase unwind to the nearest
error boundary, like before. But rather than synchronously unmount the
children before retrying, we restart the failed subtree within the same
render phase. The failed children are still unmounted (as if all their
keys changed) but without an extra commit.

Commit phase errors are different. They work by scheduling an error on
the update queue of the error boundary. When we enter the render phase,
the error is popped off the queue. The rest of the algorithm is
the same.

This approach is designed to work for throwing non-errors, too, though
that feature is not implemented yet.

* Add experimental getDerivedStateFromCatch lifecycle

Fires during the render phase, so you can recover from an error within the same
pass. This aligns error boundaries more closely with try-catch semantics.

Let's keep this behind a feature flag until a future release. For now, the
recommendation is to keep using componentDidCatch. Eventually, the advice will
be to use getDerivedStateFromCatch for handling errors and componentDidCatch
only for logging.

* Reconcile twice to remount failed children, instead of using a boolean

* Handle effect immediately after its thrown

This way we don't have to store the thrown values on the effect list.

* ReactFiberIncompleteWork -> ReactFiberUnwindWork

* Remove startTime

* Remove TypeOfException

We don't need it yet. We'll reconsider once we add another exception type.

* Move replay to outer catch block

This moves it out of the hot path.

Author: acdlite

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

@@ -380,6 +380,7 @@ describe('ReactDOM', () => {
   it('throws in DEV if jsdom is destroyed by the time setState() is called', () => {
     class App extends React.Component {
       state = {x: 1};
+      componentDidUpdate() {}
       render() {
         return <div />;
       }
@@ -395,6 +396,10 @@ describe('ReactDOM', () => {
       // This is roughly what happens if the test finished and then
       // an asynchronous callback tried to setState() after this.
       delete global.document;
+
+      // The error we're interested in is thrown by invokeGuardedCallback, which
+      // in DEV is used 1) to replay a failed begin phase, or 2) when calling
+      // lifecycle methods. We're triggering the second case here.
       const fn = () => instance.setState({x: 2});
       if (__DEV__) {
         expect(fn).toThrow(

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.js renamed to packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -12,6 +12,7 @@
 let PropTypes;
 let React;
 let ReactDOM;
+let ReactFeatureFlags;
 
 describe('ReactErrorBoundaries', () => {
   let log;
@@ -34,7 +35,10 @@ describe('ReactErrorBoundaries', () => {
   let Normal;
 
   beforeEach(() => {
+    jest.resetModules();
     PropTypes = require('prop-types');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
     ReactDOM = require('react-dom');
     React = require('react');
 
@@ -922,6 +926,10 @@ describe('ReactErrorBoundaries', () => {
       'BrokenRender constructor',
       'BrokenRender componentWillMount',
       'BrokenRender render [!]',
+      // Render third child, even though an earlier sibling threw.
+      'Normal constructor',
+      'Normal componentWillMount',
+      'Normal render',
       // Finish mounting with null children
       'ErrorBoundary componentDidMount',
       // Handle the error
@@ -1379,6 +1387,10 @@ describe('ReactErrorBoundaries', () => {
       // The initial render was aborted, so
       // Fiber retries from the root.
       'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // The second willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
       // Render an error now (stack will do it later)
       'ErrorBoundary render error',
       // Attempt to unmount previous child:
@@ -1437,6 +1449,10 @@ describe('ReactErrorBoundaries', () => {
       // The initial render was aborted, so
       // Fiber retries from the root.
       'ErrorBoundary componentWillUpdate',
+      'ErrorBoundary componentDidUpdate',
+      // The second willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
       // Render an error now (stack will do it later)
       'ErrorBoundary render error',
       // Done
@@ -1761,6 +1777,10 @@ describe('ReactErrorBoundaries', () => {
       // Handle the error
       'ErrorBoundary componentDidCatch',
       'ErrorBoundary componentWillUpdate',
+      // The willUnmount error should be captured and logged, too.
+      'ErrorBoundary componentDidUpdate',
+      'ErrorBoundary componentDidCatch',
+      'ErrorBoundary componentWillUpdate',
       'ErrorBoundary render error',
       // The update has finished
       'ErrorBoundary componentDidUpdate',
@@ -1847,7 +1867,7 @@ describe('ReactErrorBoundaries', () => {
     expect(log).toEqual(['ErrorBoundary componentWillUnmount']);
   });
 
-  it('lets different boundaries catch their own first errors', () => {
+  it('calls componentDidCatch for each error that is captured', () => {
     function renderUnmountError(error) {
       return <div>Caught an unmounting error: {error.message}.</div>;
     }
@@ -1892,7 +1912,7 @@ describe('ReactErrorBoundaries', () => {
     );
 
     expect(container.firstChild.textContent).toBe(
-      'Caught an unmounting error: E1.' + 'Caught an updating error: E3.',
+      'Caught an unmounting error: E2.' + 'Caught an updating error: E4.',
     );
     expect(log).toEqual([
       // Begin update phase
@@ -1928,6 +1948,8 @@ describe('ReactErrorBoundaries', () => {
       'BrokenComponentDidUpdate componentWillUnmount',
       'BrokenComponentDidUpdate componentWillUnmount',
       'InnerUnmountBoundary componentDidCatch',
+      'InnerUnmountBoundary componentDidCatch',
+      'InnerUpdateBoundary componentDidCatch',
       'InnerUpdateBoundary componentDidCatch',
       'InnerUnmountBoundary componentWillUpdate',
       'InnerUnmountBoundary render error',

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

@@ -287,7 +287,6 @@ function* flushUnitsOfWork(n: number): Generator<Array<mixed>, void, void> {
   while (!didStop && scheduledCallback !== null) {
     let cb = scheduledCallback;
     scheduledCallback = null;
-    yieldedValues = null;
     unitsRemaining = n;
     cb({
       timeRemaining() {
@@ -418,7 +417,8 @@ const ReactNoop = {
   },
 
   flushUnitsOfWork(n: number): Array<mixed> {
-    let values = [];
+    let values = yieldedValues || [];
+    yieldedValues = null;
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (const value of flushUnitsOfWork(n)) {
       values.push(...value);
@@ -456,6 +456,12 @@ const ReactNoop = {
     }
   },
 
+  clearYields() {
+    const values = yieldedValues;
+    yieldedValues = null;
+    return values;
+  },
+
   hasScheduledCallback() {
     return !!scheduledCallback;
   },

packages/react-reconciler/src/ReactCapturedValue.js

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber';
+
+import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
+
+export type CapturedValue<T> = {
+  value: T,
+  source: Fiber | null,
+  stack: string | null,
+};
+
+export type CapturedError = {
+  componentName: ?string,
+  componentStack: string,
+  error: mixed,
+  errorBoundary: ?Object,
+  errorBoundaryFound: boolean,
+  errorBoundaryName: string | null,
+  willRetry: boolean,
+};
+
+export function createCapturedValue<T>(
+  value: T,
+  source: Fiber | null,
+): CapturedValue<T> {
+  // If the value is an error, call this function immediately after it is thrown
+  // so the stack is accurate.
+  return {
+    value,
+    source,
+    stack: getStackAddendumByWorkInProgressFiber(source),
+  };
+}