Top-level errors

An error thrown from a host container should be "captured" by the host
container itself

scripts/fiber/tests-failing.txt

@@ -83,7 +83,6 @@ src/renderers/shared/hooks/__tests__/ReactHostOperationHistoryHook-test.js
 
 src/renderers/shared/shared/__tests__/ReactComponent-test.js
 * should throw on invalid render targets
-* throws usefully when rendering badly-typed elements
 * includes owner name in the error about badly-typed elements
 
 src/renderers/shared/shared/__tests__/ReactComponentLifeCycle-test.js

scripts/fiber/tests-passing.txt

@@ -1237,6 +1237,7 @@ src/renderers/shared/shared/__tests__/ReactComponent-test.js
 * should support new-style refs with mixed-up owners
 * should call refs at the correct time
 * fires the callback after a component is rendered
+* throws usefully when rendering badly-typed elements
 
 src/renderers/shared/shared/__tests__/ReactComponentLifeCycle-test.js
 * should not reuse an instance when it has been unmounted
@@ -1335,6 +1336,7 @@ src/renderers/shared/shared/__tests__/ReactErrorBoundaries-test.js
 * catches errors in componentDidUpdate
 * propagates errors inside boundary during componentDidMount
 * lets different boundaries catch their own first errors
+* discards a bad root if the root component fails
 
 src/renderers/shared/shared/__tests__/ReactIdentity-test.js
 * should allow key property to express identity

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -601,19 +601,26 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
     // Search for the nearest error boundary.
     let boundary : Fiber | null = null;
     if (failedWork) {
-      let node = failedWork.return;
-      while (node && !boundary) {
-        if (node.tag === ClassComponent) {
-          const instance = node.stateNode;
-          if (typeof instance.unstable_handleError === 'function') {
-            // Found an error boundary!
+      // Host containers are a special case. If the failed work itself is a host
+      // container, then it acts as its own boundary. In all other cases, we
+      // ignore the work itself and only search through the parents.
+      if (failedWork.tag === HostContainer) {
+        boundary = failedWork;
+      } else {
+        let node = failedWork.return;
+        while (node && !boundary) {
+          if (node.tag === ClassComponent) {
+            const instance = node.stateNode;
+            if (typeof instance.unstable_handleError === 'function') {
+              // Found an error boundary!
+              boundary = node;
+            }
+          } else if (node.tag === HostContainer) {
+            // Treat the root like a no-op error boundary.
             boundary = node;
           }
-        } else if (node.tag === HostContainer) {
-          // Treat the root like a no-op error boundary.
-          boundary = node;
+          node = node.return;
         }
-        node = node.return;
       }
     }
 

src/renderers/shared/shared/__tests__/ReactErrorBoundaries-test.js

@@ -2029,6 +2029,31 @@ describe('ReactErrorBoundaries', () => {
         'InnerUpdateBoundary componentWillUnmount',
       ]);
     });
+
+    it('discards a bad root if the root component fails', () => {
+      spyOn(console, 'error');
+
+      const X = null;
+      const Y = undefined;
+      let err1;
+      let err2;
+
+      try {
+        let container = document.createElement('div');
+        ReactDOM.render(<X />, container);
+      } catch (err) {
+        err1 = err;
+      }
+      try {
+        let container = document.createElement('div');
+        ReactDOM.render(<Y />, container);
+      } catch (err) {
+        err2 = err;
+      }
+
+      expect(err1.message).toMatch(/got: null/);
+      expect(err2.message).toMatch(/got: undefined/);
+    });
   }
 
 });