Skip to content

Commit

Permalink
Add stack unwinding phase for handling errors (#12201)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
acdlite authored Feb 24, 2018
1 parent 4e26853 commit ceb51cc
Showing 1 changed file with 4 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@

'use strict';

const ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
const React = require('react');
const ReactTestRenderer = require('react-test-renderer');
const prettyFormat = require('pretty-format');
Expand Down Expand Up @@ -438,6 +440,7 @@ describe('ReactTestRenderer', () => {
/* do nothing */
}
componentDidCatch() {
log.push('Boundary componentDidCatch');
this.setState({error: true});
}
}
Expand All @@ -452,6 +455,7 @@ describe('ReactTestRenderer', () => {
'Boundary render',
'Angry render',
'Boundary componentDidMount',
'Boundary componentDidCatch',
'Boundary render',
]);
});
Expand Down

0 comments on commit ceb51cc

Please sign in to comment.