diff --git a/src/renderers/__tests__/ReactErrorBoundaries-test.js b/src/renderers/__tests__/ReactErrorBoundaries-test.js index 5b4ef6ecf36e..ea994b41922c 100644 --- a/src/renderers/__tests__/ReactErrorBoundaries-test.js +++ b/src/renderers/__tests__/ReactErrorBoundaries-test.js @@ -288,8 +288,8 @@ describe('ReactErrorBoundaries', () => { componentWillUnmount() { log.push('BrokenComponentWillMountErrorBoundary componentWillUnmount'); } - unstable_handleError(error) { - log.push('BrokenComponentWillMountErrorBoundary unstable_handleError'); + componentDidCatch(error) { + log.push('BrokenComponentWillMountErrorBoundary componentDidCatch'); this.setState({error}); } }; @@ -318,8 +318,8 @@ describe('ReactErrorBoundaries', () => { componentWillUnmount() { log.push('BrokenComponentDidMountErrorBoundary componentWillUnmount'); } - unstable_handleError(error) { - log.push('BrokenComponentDidMountErrorBoundary unstable_handleError'); + componentDidCatch(error) { + log.push('BrokenComponentDidMountErrorBoundary componentDidCatch'); this.setState({error}); } }; @@ -347,8 +347,8 @@ describe('ReactErrorBoundaries', () => { componentWillUnmount() { log.push('BrokenRenderErrorBoundary componentWillUnmount'); } - unstable_handleError(error) { - log.push('BrokenRenderErrorBoundary unstable_handleError'); + componentDidCatch(error) { + log.push('BrokenRenderErrorBoundary componentDidCatch'); this.setState({error}); } }; @@ -400,12 +400,12 @@ describe('ReactErrorBoundaries', () => { componentWillUnmount() { log.push('NoopErrorBoundary componentWillUnmount'); } - unstable_handleError() { + componentDidCatch() { if (ReactDOMFeatureFlags.useFiber) { - log.push('NoopErrorBoundary unstable_handleError'); + log.push('NoopErrorBoundary componentDidCatch'); } else { // In Stack, not calling setState() is treated as a rethrow. - log.push('NoopErrorBoundary unstable_handleError [*]'); + log.push('NoopErrorBoundary componentDidCatch [*]'); } } }; @@ -456,8 +456,8 @@ describe('ReactErrorBoundaries', () => { log.push(`${this.props.logName} render success`); return
{this.props.children}
; } - unstable_handleError(error) { - log.push(`${this.props.logName} unstable_handleError`); + componentDidCatch(error) { + log.push(`${this.props.logName} componentDidCatch`); this.setState({error}); } componentWillMount() { @@ -508,13 +508,13 @@ describe('ReactErrorBoundaries', () => { componentWillUnmount() { log.push('RetryErrorBoundary componentWillUnmount'); } - unstable_handleError(error) { + componentDidCatch(error) { if (ReactDOMFeatureFlags.useFiber) { - log.push('RetryErrorBoundary unstable_handleError [!]'); + log.push('RetryErrorBoundary componentDidCatch [!]'); // In Fiber, calling setState() (and failing) is treated as a rethrow. this.setState({}); } else { - log.push('RetryErrorBoundary unstable_handleError [*]'); + log.push('RetryErrorBoundary componentDidCatch [*]'); // In Stack, not calling setState() is treated as a rethrow. } } @@ -646,14 +646,14 @@ describe('ReactErrorBoundaries', () => { // Fiber mounts with null children before capturing error 'ErrorBoundary componentDidMount', // Catch and render an error message - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ // Catch and render an error message - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', ]), @@ -683,14 +683,14 @@ describe('ReactErrorBoundaries', () => { // Fiber mounts with null children before capturing error 'ErrorBoundary componentDidMount', // Catch and render an error message - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ // Catch and render an error message - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', ]), @@ -719,14 +719,14 @@ describe('ReactErrorBoundaries', () => { ...(ReactDOMFeatureFlags.useFiber ? [ 'ErrorBoundary componentDidMount', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ // Catch and render an error message - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', ]), @@ -811,7 +811,7 @@ describe('ReactErrorBoundaries', () => { ...(ReactDOMFeatureFlags.useFiber ? [ 'ErrorBoundary componentDidMount', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorMessage constructor', @@ -822,7 +822,7 @@ describe('ReactErrorBoundaries', () => { ] : [ // Handle the error: - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', // Mount the error message: 'ErrorMessage constructor', @@ -866,7 +866,7 @@ describe('ReactErrorBoundaries', () => { ? [ // In Fiber, failed error boundaries render null before attempting to recover 'RetryErrorBoundary componentDidMount', - 'RetryErrorBoundary unstable_handleError [!]', + 'RetryErrorBoundary componentDidCatch [!]', 'ErrorBoundary componentDidMount', // Retry 'RetryErrorBoundary render', @@ -875,7 +875,7 @@ describe('ReactErrorBoundaries', () => { 'BrokenRender render [!]', // This time, the error propagates to the higher boundary 'RetryErrorBoundary componentWillUnmount', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', @@ -884,13 +884,13 @@ describe('ReactErrorBoundaries', () => { : [ // The first error boundary catches the error. // However, it doesn't adjust its state so next render will also fail. - 'RetryErrorBoundary unstable_handleError [*]', + 'RetryErrorBoundary componentDidCatch [*]', 'RetryErrorBoundary render', 'BrokenRender constructor', 'BrokenRender componentWillMount', 'BrokenRender render [!]', // This time, the error propagates to the higher boundary - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', @@ -921,13 +921,13 @@ describe('ReactErrorBoundaries', () => { ...(ReactDOMFeatureFlags.useFiber ? [ 'ErrorBoundary componentDidMount', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', @@ -967,22 +967,22 @@ describe('ReactErrorBoundaries', () => { // Finish mounting with null children 'BrokenRenderErrorBoundary componentDidMount', // Attempt to handle the error - 'BrokenRenderErrorBoundary unstable_handleError', + 'BrokenRenderErrorBoundary componentDidCatch', 'ErrorBoundary componentDidMount', 'BrokenRenderErrorBoundary render error [!]', // Boundary fails with new error, propagate to next boundary 'BrokenRenderErrorBoundary componentWillUnmount', // Attempt to handle the error again - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'BrokenRenderErrorBoundary unstable_handleError', + 'BrokenRenderErrorBoundary componentDidCatch', 'BrokenRenderErrorBoundary render error [!]', // The error propagates to the higher boundary - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', @@ -1022,14 +1022,14 @@ describe('ReactErrorBoundaries', () => { // Finish mounting with null children 'ErrorBoundary componentDidMount', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error message 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error message 'ErrorBoundary render error', 'ErrorBoundary componentDidMount', @@ -1071,7 +1071,7 @@ describe('ReactErrorBoundaries', () => { // Finish mounting with null children 'ErrorBoundary componentDidMount', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error message 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', @@ -1079,7 +1079,7 @@ describe('ReactErrorBoundaries', () => { 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack reconciler resets ref on update, as it doesn't know ref was never set. // This is unnecessary, and Fiber doesn't do it: 'Child ref is set to null', @@ -1157,14 +1157,14 @@ describe('ReactErrorBoundaries', () => { 'Normal componentWillUnmount', 'ErrorBoundary componentDidUpdate', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error message 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack unmounts first, then renders: 'Normal componentWillUnmount', 'ErrorBoundary render error', @@ -1217,14 +1217,14 @@ describe('ReactErrorBoundaries', () => { 'Normal componentWillUnmount', 'ErrorBoundary componentDidUpdate', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Render the error message 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack unmounts first, then renders: 'Normal componentWillUnmount', 'ErrorBoundary render error', @@ -1273,13 +1273,13 @@ describe('ReactErrorBoundaries', () => { 'BrokenComponentWillReceiveProps componentWillUnmount', 'ErrorBoundary componentDidUpdate', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack unmounts first, then renders: 'Normal componentWillUnmount', 'BrokenComponentWillReceiveProps componentWillUnmount', @@ -1329,13 +1329,13 @@ describe('ReactErrorBoundaries', () => { 'BrokenComponentWillUpdate componentWillUnmount', 'ErrorBoundary componentDidUpdate', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack unmounts first, then renders: 'Normal componentWillUnmount', 'BrokenComponentWillUpdate componentWillUnmount', @@ -1389,13 +1389,13 @@ describe('ReactErrorBoundaries', () => { 'Normal componentWillUnmount', 'ErrorBoundary componentDidUpdate', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack unmounts first, then renders: 'Normal componentWillUnmount', 'ErrorBoundary render error', @@ -1459,12 +1459,12 @@ describe('ReactErrorBoundaries', () => { 'Child1 ref is set to null', 'ErrorBoundary componentDidUpdate', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Stack resets ref first, renders later 'Child1 ref is set to null', 'ErrorBoundary render error', @@ -1520,7 +1520,7 @@ describe('ReactErrorBoundaries', () => { 'ErrorBoundary componentDidUpdate', // Now that commit phase is done, Fiber unmounts the boundary's children 'BrokenComponentWillUnmount componentWillUnmount [!]', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // The initial render was aborted, so // Fiber retries from the root. 'ErrorBoundary componentWillUpdate', @@ -1532,7 +1532,7 @@ describe('ReactErrorBoundaries', () => { ] : [ // Stack will handle error immediately - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Attempt to unmount previous children: 'BrokenComponentWillUnmount componentWillUnmount [!]', 'Normal componentWillUnmount', @@ -1591,7 +1591,7 @@ describe('ReactErrorBoundaries', () => { 'Normal componentWillUnmount', 'BrokenComponentWillUnmount componentWillUnmount [!]', // Now that commit phase is done, Fiber handles errors - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // The initial render was aborted, so // Fiber retries from the root. 'ErrorBoundary componentWillUpdate', @@ -1601,7 +1601,7 @@ describe('ReactErrorBoundaries', () => { 'ErrorBoundary componentDidUpdate', ] : [ - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Attempt to unmount previous children: 'Normal componentWillUnmount', 'BrokenComponentWillUnmount componentWillUnmount [!]', @@ -1670,7 +1670,7 @@ describe('ReactErrorBoundaries', () => { 'OuterErrorBoundary componentDidUpdate', // Now that commit phase is done, Fiber handles errors // Only inner boundary receives the error: - 'InnerErrorBoundary unstable_handleError', + 'InnerErrorBoundary componentDidCatch', 'InnerErrorBoundary componentWillUpdate', // Render an error now 'InnerErrorBoundary render error', @@ -1680,7 +1680,7 @@ describe('ReactErrorBoundaries', () => { ] : [ // Stack will handle error immediately - 'InnerErrorBoundary unstable_handleError', + 'InnerErrorBoundary componentDidCatch', 'InnerErrorBoundary render error', // In stack, this was a part of the update to the // outer boundary so both lifecycles fire @@ -1891,7 +1891,7 @@ describe('ReactErrorBoundaries', () => { expect(log).toEqual([ 'Stateful render [!]', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', @@ -1945,7 +1945,7 @@ describe('ReactErrorBoundaries', () => { 'BrokenComponentDidMount componentWillUnmount', 'LastChild componentWillUnmount', // Handle the error - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', // The update has finished @@ -1985,7 +1985,7 @@ describe('ReactErrorBoundaries', () => { 'ErrorBoundary componentDidUpdate', 'BrokenComponentDidUpdate componentWillUnmount', // Then, error is handled - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', @@ -2023,7 +2023,7 @@ describe('ReactErrorBoundaries', () => { 'ErrorBoundary componentDidMount', 'BrokenComponentDidMountErrorBoundary componentWillUnmount', // The error propagates to the higher boundary - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', // Fiber retries from the root 'ErrorBoundary componentWillUpdate', 'ErrorBoundary render error', @@ -2115,8 +2115,8 @@ describe('ReactErrorBoundaries', () => { // were captured 'BrokenComponentDidUpdate componentWillUnmount', 'BrokenComponentDidUpdate componentWillUnmount', - 'InnerUnmountBoundary unstable_handleError', - 'InnerUpdateBoundary unstable_handleError', + 'InnerUnmountBoundary componentDidCatch', + 'InnerUpdateBoundary componentDidCatch', 'InnerUnmountBoundary componentWillUpdate', 'InnerUnmountBoundary render error', 'InnerUpdateBoundary componentWillUpdate', @@ -2180,7 +2180,7 @@ describe('ReactErrorBoundaries', () => { 'BrokenRender render [!]', // In Fiber, noop error boundaries render null 'NoopErrorBoundary componentDidMount', - 'NoopErrorBoundary unstable_handleError', + 'NoopErrorBoundary componentDidCatch', // Nothing happens. ]); diff --git a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js index 383928e07ace..219f2e93f9f2 100644 --- a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js +++ b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js @@ -619,7 +619,7 @@ describe('ReactDOMFiber', () => { class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { @@ -652,7 +652,7 @@ describe('ReactDOMFiber', () => { class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { diff --git a/src/renderers/shared/fiber/ReactFiberErrorLogger.js b/src/renderers/shared/fiber/ReactFiberErrorLogger.js index 9289f00a751a..4394cc9c055c 100644 --- a/src/renderers/shared/fiber/ReactFiberErrorLogger.js +++ b/src/renderers/shared/fiber/ReactFiberErrorLogger.js @@ -74,7 +74,7 @@ function logCapturedError(capturedError: CapturedError): void { `Recreating the tree from scratch failed so React will unmount the tree.`; } } else { - // TODO Link to unstable_handleError() documentation once it exists. + // TODO Link to componentDidCatch() documentation once it exists. errorBoundaryMessage = 'Consider adding an error boundary to your tree to customize error handling behavior.'; } diff --git a/src/renderers/shared/fiber/ReactFiberScheduler.js b/src/renderers/shared/fiber/ReactFiberScheduler.js index 59799225b6b9..3321e88ef7cb 100644 --- a/src/renderers/shared/fiber/ReactFiberScheduler.js +++ b/src/renderers/shared/fiber/ReactFiberScheduler.js @@ -216,7 +216,7 @@ module.exports = function( let isCallbackScheduled: boolean = false; // Keep track of which fibers have captured an error that need to be handled. - // Work is removed from this collection after unstable_handleError is called. + // Work is removed from this collection after componentDidCatch is called. let capturedErrors: Map | null = null; // Keep track of which fibers have failed during the current batch of work. // This is a different set than capturedErrors, because it is not reset until @@ -1054,7 +1054,7 @@ module.exports = function( while (node !== null && boundary === null) { if (node.tag === ClassComponent) { const instance = node.stateNode; - if (typeof instance.unstable_handleError === 'function') { + if (typeof instance.componentDidCatch === 'function') { errorBoundaryFound = true; errorBoundaryName = getComponentName(node); @@ -1210,7 +1210,7 @@ module.exports = function( // Allow the boundary to handle the error, usually by scheduling // an update to itself - instance.unstable_handleError(error, info); + instance.componentDidCatch(error, info); return; case HostRoot: if (firstUncaughtError === null) { diff --git a/src/renderers/shared/fiber/__tests__/ReactIncremental-test.js b/src/renderers/shared/fiber/__tests__/ReactIncremental-test.js index f0c213348824..8ffc8c75fc76 100644 --- a/src/renderers/shared/fiber/__tests__/ReactIncremental-test.js +++ b/src/renderers/shared/fiber/__tests__/ReactIncremental-test.js @@ -2257,7 +2257,7 @@ describe('ReactIncremental', () => { it('maintains the correct context when unwinding due to an error in render', () => { class Root extends React.Component { - unstable_handleError(error) { + componentDidCatch(error) { // If context is pushed/popped correctly, // This method will be used to handle the intentionally-thrown Error. } diff --git a/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js b/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js index 575b690642c5..ad6d630aacfb 100644 --- a/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js +++ b/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js @@ -38,7 +38,7 @@ describe('ReactIncrementalErrorHandling', () => { it('catches render error in a boundary during full deferred mounting', () => { class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { @@ -68,8 +68,8 @@ describe('ReactIncrementalErrorHandling', () => { var ops = []; class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { - ops.push('ErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('ErrorBoundary componentDidCatch'); this.setState({error}); } render() { @@ -103,7 +103,7 @@ describe('ReactIncrementalErrorHandling', () => { ReactNoop.flushDeferredPri(30); expect(ops).toEqual([ 'BrokenRender', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', ]); expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]); @@ -113,8 +113,8 @@ describe('ReactIncrementalErrorHandling', () => { var ops = []; class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { - ops.push('ErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('ErrorBoundary componentDidCatch'); this.setState({error}); } render() { @@ -145,7 +145,7 @@ describe('ReactIncrementalErrorHandling', () => { expect(ops).toEqual([ 'ErrorBoundary render success', 'BrokenRender', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', ]); expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]); @@ -155,8 +155,8 @@ describe('ReactIncrementalErrorHandling', () => { var ops = []; class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { - ops.push('ErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('ErrorBoundary componentDidCatch'); this.setState({error}); } render() { @@ -194,7 +194,7 @@ describe('ReactIncrementalErrorHandling', () => { expect(ops).toEqual([ 'ErrorBoundary render success', 'BrokenRender', - 'ErrorBoundary unstable_handleError', + 'ErrorBoundary componentDidCatch', 'ErrorBoundary render error', ]); expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]); @@ -203,8 +203,8 @@ describe('ReactIncrementalErrorHandling', () => { it('propagates an error from a noop error boundary during full deferred mounting', () => { var ops = []; class RethrowErrorBoundary extends React.Component { - unstable_handleError(error) { - ops.push('RethrowErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('RethrowErrorBoundary componentDidCatch'); throw error; } render() { @@ -230,7 +230,7 @@ describe('ReactIncrementalErrorHandling', () => { expect(ops).toEqual([ 'RethrowErrorBoundary render', 'BrokenRender', - 'RethrowErrorBoundary unstable_handleError', + 'RethrowErrorBoundary componentDidCatch', ]); expect(ReactNoop.getChildren()).toEqual([]); }); @@ -238,8 +238,8 @@ describe('ReactIncrementalErrorHandling', () => { it('propagates an error from a noop error boundary during partial deferred mounting', () => { var ops = []; class RethrowErrorBoundary extends React.Component { - unstable_handleError(error) { - ops.push('RethrowErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('RethrowErrorBoundary componentDidCatch'); throw error; } render() { @@ -268,7 +268,7 @@ describe('ReactIncrementalErrorHandling', () => { }).toThrow('Hello'); expect(ops).toEqual([ 'BrokenRender', - 'RethrowErrorBoundary unstable_handleError', + 'RethrowErrorBoundary componentDidCatch', ]); expect(ReactNoop.getChildren()).toEqual([]); }); @@ -276,8 +276,8 @@ describe('ReactIncrementalErrorHandling', () => { it('propagates an error from a noop error boundary during synchronous mounting', () => { var ops = []; class RethrowErrorBoundary extends React.Component { - unstable_handleError(error) { - ops.push('RethrowErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('RethrowErrorBoundary componentDidCatch'); throw error; } render() { @@ -303,7 +303,7 @@ describe('ReactIncrementalErrorHandling', () => { expect(ops).toEqual([ 'RethrowErrorBoundary render', 'BrokenRender', - 'RethrowErrorBoundary unstable_handleError', + 'RethrowErrorBoundary componentDidCatch', ]); expect(ReactNoop.getChildren()).toEqual([]); }); @@ -311,8 +311,8 @@ describe('ReactIncrementalErrorHandling', () => { it('propagates an error from a noop error boundary during batched mounting', () => { var ops = []; class RethrowErrorBoundary extends React.Component { - unstable_handleError(error) { - ops.push('RethrowErrorBoundary unstable_handleError'); + componentDidCatch(error) { + ops.push('RethrowErrorBoundary componentDidCatch'); throw error; } render() { @@ -345,7 +345,7 @@ describe('ReactIncrementalErrorHandling', () => { expect(ops).toEqual([ 'RethrowErrorBoundary render', 'BrokenRender', - 'RethrowErrorBoundary unstable_handleError', + 'RethrowErrorBoundary componentDidCatch', ]); expect(ReactNoop.getChildren()).toEqual([]); }); @@ -485,7 +485,7 @@ describe('ReactIncrementalErrorHandling', () => { it('continues work on other roots despite caught errors', () => { class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { @@ -627,7 +627,7 @@ describe('ReactIncrementalErrorHandling', () => { class Boundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { @@ -662,7 +662,7 @@ describe('ReactIncrementalErrorHandling', () => { class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { @@ -699,7 +699,7 @@ describe('ReactIncrementalErrorHandling', () => { class ErrorBoundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { @@ -1002,7 +1002,7 @@ describe('ReactIncrementalErrorHandling', () => { let renderAttempts = 0; class ErrorBoundaryComponent extends React.Component { - unstable_handleError(error) { + componentDidCatch(error) { handleErrorCalls.push(error); this.setState({}); // Render again } diff --git a/src/renderers/shared/fiber/__tests__/ReactIncrementalPerf-test.js b/src/renderers/shared/fiber/__tests__/ReactIncrementalPerf-test.js index c2b81d19d4f5..8e0a51759c96 100644 --- a/src/renderers/shared/fiber/__tests__/ReactIncrementalPerf-test.js +++ b/src/renderers/shared/fiber/__tests__/ReactIncrementalPerf-test.js @@ -357,7 +357,7 @@ describe('ReactDebugFiberPerf', () => { class Boundary extends React.Component { state = {error: null}; - unstable_handleError(error) { + componentDidCatch(error) { this.setState({error}); } render() { diff --git a/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js b/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js index 527219740b90..77f9414f0bb1 100644 --- a/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js +++ b/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js @@ -352,7 +352,7 @@ var ReactCompositeComponent = { } var markup; - if (inst.unstable_handleError) { + if (inst.componentDidCatch) { markup = this.performInitialMountWithErrorHandling( renderedElement, hostParent, @@ -480,7 +480,7 @@ var ReactCompositeComponent = { } catch (e) { // Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint transaction.rollback(checkpoint); - this._instance.unstable_handleError(e); + this._instance.componentDidCatch(e); if (this._pendingStateQueue) { this._instance.state = this._processPendingState( this._instance.props, @@ -1049,7 +1049,7 @@ var ReactCompositeComponent = { inst.state = nextState; inst.context = nextContext; - if (inst.unstable_handleError) { + if (inst.componentDidCatch) { this._updateRenderedComponentWithErrorHandling( transaction, unmaskedContext, @@ -1092,7 +1092,7 @@ var ReactCompositeComponent = { // Roll back to checkpoint, handle error (which may add items to the transaction), // and take a new checkpoint transaction.rollback(checkpoint); - this._instance.unstable_handleError(e); + this._instance.componentDidCatch(e); if (this._pendingStateQueue) { this._instance.state = this._processPendingState( this._instance.props, diff --git a/src/renderers/testing/__tests__/ReactTestRenderer-test.js b/src/renderers/testing/__tests__/ReactTestRenderer-test.js index 740e353a3611..163bdabd6bf3 100644 --- a/src/renderers/testing/__tests__/ReactTestRenderer-test.js +++ b/src/renderers/testing/__tests__/ReactTestRenderer-test.js @@ -439,7 +439,7 @@ describe('ReactTestRenderer', () => { onClick() { /* do nothing */ } - unstable_handleError() { + componentDidCatch() { this.setState({error: true}); } }