Throw away a failed tree before attempting to recover

When an error is thrown and caught by a boundary, we don't want to reuse
the failed work when attempting to recover, because parts of the tree
might be in an inconsistent state. Instead, we force rerender the entire
tree from scratch.

A similar thing happens with failed roots. When a tree fails with an
uncaught error, the entire tree is force unmounted. But we don't want
to actually remove the tree from the host environment, because otherwise
the user would see an empty screen -- unlike the error boundary case,
there's nothing to replace the failed tree with. So we do a "soft"
delete, where componentWillUnmount is called recursively, but the host
nodes remain. The next time something is rendered into the container,
the old nodes are deleted.

Author: acdlite

scripts/fiber/tests-failing.txt

@@ -72,6 +72,9 @@ src/renderers/art/__tests__/ReactART-test.js
 * resolves refs before componentDidMount
 * resolves refs before componentDidUpdate
 
+src/renderers/dom/__tests__/ReactDOMProduction-test.js
+* should throw with an error code in production
+
 src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
 * should set style attribute when styles exist
 * should warn when using hyphenated style names

scripts/fiber/tests-passing.txt

@@ -453,7 +453,6 @@ src/renderers/dom/__tests__/ReactDOMProduction-test.js
 * should use prod React
 * should handle a simple flow
 * should call lifecycle methods
-* should throw with an error code in production
 
 src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
 * should render strings as children
@@ -815,6 +814,8 @@ src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js
 * can schedule updates after uncaught error during umounting
 * continues work on other roots despite caught errors
 * continues work on other roots despite uncaught errors
+* force unmounts failed subtree before rerendering
+* force unmounts failed root
 
 src/renderers/shared/fiber/__tests__/ReactIncrementalReflection-test.js
 * handles isMounted even when the initial render is deferred

src/renderers/dom/__tests__/ReactDOMProduction-test.js

@@ -15,6 +15,7 @@ describe('ReactDOMProduction', () => {
 
   var React;
   var ReactDOM;
+  var ReactDOMFeatureFlags;
 
   beforeEach(() => {
     __DEV__ = false;
@@ -24,6 +25,7 @@ describe('ReactDOMProduction', () => {
     jest.resetModuleRegistry();
     React = require('React');
     ReactDOM = require('ReactDOM');
+    ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
   });
 
   afterEach(() => {
@@ -174,21 +176,25 @@ describe('ReactDOMProduction', () => {
     ]);
   });
 
-  it('should throw with an error code in production', () => {
-    expect(function() {
-      class Component extends React.Component {
-        render() {
-          return ['this is wrong'];
+  if (!ReactDOMFeatureFlags.useFiber) {
+    // This doesn't throw in Fiber because it supports fragments.
+    // FIXME: Figure out how to test this in Fiber, if possible.
+    it('should throw with an error code in production', () => {
+      expect(function() {
+        class Component extends React.Component {
+          render() {
+            return ['this is wrong'];
+          }
         }
-      }
 
-      var container = document.createElement('div');
-      ReactDOM.render(<Component />, container);
-    }).toThrowError(
-      'Minified React error #109; visit ' +
-      'http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=Component' +
-      ' for the full message or use the non-minified dev environment' +
-      ' for full errors and additional helpful warnings.'
-    );
-  });
+        var container = document.createElement('div');
+        ReactDOM.render(<Component />, container);
+      }).toThrowError(
+        'Minified React error #109; visit ' +
+        'http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=Component' +
+        ' for the full message or use the non-minified dev environment' +
+        ' for full errors and additional helpful warnings.'
+      );
+    });
+  }
 });

src/renderers/shared/fiber/ReactChildFiber.js

@@ -15,6 +15,7 @@
 import type { ReactCoroutine, ReactYield } from 'ReactCoroutine';
 import type { Fiber } from 'ReactFiber';
 import type { PriorityLevel } from 'ReactPriorityLevel';
+import type { FiberRoot } from 'ReactFiberRoot';
 
 var REACT_ELEMENT_TYPE = require('ReactElementSymbol');
 var {
@@ -26,6 +27,7 @@ var ReactFiber = require('ReactFiber');
 var ReactReifiedYield = require('ReactReifiedYield');
 var ReactTypeOfSideEffect = require('ReactTypeOfSideEffect');
 var ReactTypeOfWork = require('ReactTypeOfWork');
+var ReactFiberRootErrorPhase = require('ReactFiberRootErrorPhase');
 
 var emptyObject = require('emptyObject');
 var getIteratorFn = require('getIteratorFn');
@@ -52,6 +54,7 @@ const {
   CoroutineComponent,
   YieldComponent,
   Fragment,
+  HostContainer,
 } = ReactTypeOfWork;
 
 const {
@@ -60,6 +63,11 @@ const {
   Deletion,
 } = ReactTypeOfSideEffect;
 
+const {
+  NoError,
+  HardDeletion,
+} = ReactFiberRootErrorPhase;
+
 function transferRef(current: ?Fiber, workInProgress: Fiber, element: ReactElement<any>) {
   if (typeof element.ref === 'string') {
     if (element._owner) {
@@ -480,12 +488,34 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     return null;
   }
 
+  function isFailedErrorBoundary(fiber : Fiber): boolean {
+    // Detect if the return fiber is a failed error boundary. If so, we should
+    // treat the keys as if they don't match to force a remount. For convenience
+    // this check will reset the error boundary flag, so make sure to only call
+    // this once per reconciliation.
+    switch (fiber.tag) {
+      case ClassComponent:
+        if (fiber.stateNode._isFailedErrorBoundary) {
+          delete fiber.stateNode._isFailedErrorBoundary;
+          return true;
+        }
+        return false;
+      case HostContainer:
+        const root : FiberRoot = fiber.stateNode;
+        if (root.errorPhase === HardDeletion) {
+          root.errorPhase = NoError;
+          return true;
+        }
+        return false;
+    }
+    return false;
+  }
+
   function reconcileChildrenArray(
     returnFiber : Fiber,
     currentFirstChild : ?Fiber,
     newChildren : Array<*>,
     priority : PriorityLevel) : ?Fiber {
-
     // This algorithm can't optimize by searching from boths ends since we
     // don't have backpointers on fibers. I'm trying to see how far we can get
     // with that model. If it ends up not being worth the tradeoffs, we can
@@ -502,21 +532,24 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     // In this first iteration, we'll just live with hitting the bad case
     // (adding everything to a Map) in for every insert/move.
 
+    const returnFiberIsFailedErrorBoundary = isFailedErrorBoundary(returnFiber);
+
     let resultingFirstChild : ?Fiber = null;
     let previousNewFiber : ?Fiber = null;
 
-    let oldFiber = currentFirstChild;
+    // If the parent is an error boundary, setting oldFiber to null ensures
+    // that none of the old fibers are reused, the old children are deleted,
+    // and new fibers are inserted.
+    let oldFiber = returnFiberIsFailedErrorBoundary ? null : currentFirstChild;
     let lastPlacedIndex = 0;
     let newIdx = 0;
     let nextOldFiber = null;
     for (; oldFiber && newIdx < newChildren.length; newIdx++) {
-      if (oldFiber) {
-        if (oldFiber.index > newIdx) {
-          nextOldFiber = oldFiber;
-          oldFiber = null;
-        } else {
-          nextOldFiber = oldFiber.sibling;
-        }
+      if (oldFiber.index > newIdx) {
+        nextOldFiber = oldFiber;
+        oldFiber = null;
+      } else {
+        nextOldFiber = oldFiber.sibling;
       }
       const newFiber = updateSlot(
         returnFiber,
@@ -670,12 +703,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     element : ReactElement<any>,
     priority : PriorityLevel
   ) : Fiber {
+    const returnFiberIsFailedErrorBoundary = isFailedErrorBoundary(returnFiber);
     const key = element.key;
     let child = currentFirstChild;
     while (child) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
-      if (child.key === key) {
+      if (child.key === key && !returnFiberIsFailedErrorBoundary) {
         if (child.type === element.type) {
           deleteRemainingChildren(returnFiber, child.sibling);
           const existing = useFiber(child, priority);
@@ -705,12 +739,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     coroutine : ReactCoroutine,
     priority : PriorityLevel
   ) : Fiber {
+    const returnFiberIsFailedErrorBoundary = isFailedErrorBoundary(returnFiber);
     const key = coroutine.key;
     let child = currentFirstChild;
     while (child) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
-      if (child.key === key) {
+      if (child.key === key && !returnFiberIsFailedErrorBoundary) {
         if (child.tag === CoroutineComponent) {
           deleteRemainingChildren(returnFiber, child.sibling);
           const existing = useFiber(child, priority);
@@ -738,12 +773,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     yieldNode : ReactYield,
     priority : PriorityLevel
   ) : Fiber {
+    const returnFiberIsFailedErrorBoundary = isFailedErrorBoundary(returnFiber);
     const key = yieldNode.key;
     let child = currentFirstChild;
     while (child) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
-      if (child.key === key) {
+      if (child.key === key && !returnFiberIsFailedErrorBoundary) {
         if (child.tag === YieldComponent) {
           deleteRemainingChildren(returnFiber, child.sibling);
           const existing = useFiber(child, priority);

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -383,6 +383,7 @@ module.exports = function<T, P, I, TI, C>(
   return {
     commitInsertion,
     commitDeletion,
+    commitNestedUnmounts,
     commitWork,
     commitLifeCycles,
   };

src/renderers/shared/fiber/ReactFiberRoot.js

@@ -14,8 +14,10 @@
 
 import type { Fiber } from 'ReactFiber';
 import type { UpdateQueue } from 'ReactFiberUpdateQueue';
+import type { FiberRootErrorPhase } from 'ReactFiberRootErrorPhase';
 
 const { createHostContainerFiber } = require('ReactFiber');
+const { NoError } = require('ReactFiberRootErrorPhase');
 
 export type FiberRoot = {
   // Any additional information from the host associated with this root.
@@ -24,6 +26,9 @@ export type FiberRoot = {
   current: Fiber,
   // Determines if this root has already been added to the schedule for work.
   isScheduled: boolean,
+  // When a root fails with an uncaught error, determines the phase of recovery.
+  // Defaults to NoError
+  errorPhase: FiberRootErrorPhase,
   // The work schedule is a linked list.
   nextScheduledRoot: ?FiberRoot,
   // Linked list of callbacks to call after updates are committed.
@@ -38,6 +43,7 @@ exports.createFiberRoot = function(containerInfo : any) : FiberRoot {
     current: uninitializedFiber,
     containerInfo: containerInfo,
     isScheduled: false,
+    errorPhase: NoError,
     nextScheduledRoot: null,
     callbackList: null,
   };

src/renderers/shared/fiber/ReactFiberRootErrorPhase.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactFiberRootErrorPhase
+ * @flow
+ */
+
+'use strict';
+
+export type FiberRootErrorPhase = 0 | 1 | 2;
+
+module.exports = {
+  NoError: 0,
+  SoftDeletion: 1,
+  HardDeletion: 2,
+};