facebook · bvaughn · Jul 17, 2017 · Jul 17, 2017
diff --git a/src/renderers/__tests__/ReactErrorBoundaries-test.js b/src/renderers/__tests__/ReactErrorBoundaries-test.js
diff --git 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
@@ -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
@@ -216,7 +216,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   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<Fiber, CapturedError> | 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<T, P, I, TI, PI, C, CX, PL>(
       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<T, P, I, TI, PI, C, CX, PL>(
 
         // 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
@@ -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
@@ -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,16 +230,16 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ops).toEqual([
       'RethrowErrorBoundary render',
       'BrokenRender',
-      'RethrowErrorBoundary unstable_handleError',
+      'RethrowErrorBoundary componentDidCatch',
     ]);
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
   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,16 +268,16 @@ describe('ReactIncrementalErrorHandling', () => {
     }).toThrow('Hello');
     expect(ops).toEqual([
       'BrokenRender',
-      'RethrowErrorBoundary unstable_handleError',
+      'RethrowErrorBoundary componentDidCatch',
     ]);
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
   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,16 +303,16 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ops).toEqual([
       'RethrowErrorBoundary render',
       'BrokenRender',
-      'RethrowErrorBoundary unstable_handleError',
+      'RethrowErrorBoundary componentDidCatch',
     ]);
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
   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
@@ -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
@@ -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
@@ -439,7 +439,7 @@ describe('ReactTestRenderer', () => {
       onClick() {
         /* do nothing */
       }
-      unstable_handleError() {
+      componentDidCatch() {
         this.setState({error: true});
       }
     }