Handle errors during hydration (#2539)

Author: JoviDeCroock

src/diff/index.js

@@ -274,16 +274,22 @@ export function diff(
 			newVNode._original = null;
 			// if hydrating or creating initial tree, bailout preserves DOM:
 			if (isHydrating || excessDomChildren != null) {
-				newVNode._flags |= isHydrating
-					? MODE_HYDRATE | MODE_SUSPENDED
-					: MODE_SUSPENDED;
+				if (e.then) {
+					newVNode._flags |= isHydrating
+						? MODE_HYDRATE | MODE_SUSPENDED
+						: MODE_SUSPENDED;
 
-				while (oldDom && oldDom.nodeType === 8 && oldDom.nextSibling) {
-					oldDom = oldDom.nextSibling;
-				}
+					while (oldDom && oldDom.nodeType === 8 && oldDom.nextSibling) {
+						oldDom = oldDom.nextSibling;
+					}
 
-				excessDomChildren[excessDomChildren.indexOf(oldDom)] = null;
-				newVNode._dom = oldDom;
+					excessDomChildren[excessDomChildren.indexOf(oldDom)] = null;
+					newVNode._dom = oldDom;
+				} else {
+					for (let i = excessDomChildren.length; i--; ) {
+						removeNode(excessDomChildren[i]);
+					}
+				}
 			} else {
 				newVNode._dom = oldVNode._dom;
 				newVNode._children = oldVNode._children;

test/browser/hydrate.test.js

@@ -1,4 +1,5 @@
-import { createElement, hydrate, Fragment } from 'preact';
+import { createElement, hydrate, Fragment, Component } from 'preact';
+import { setupRerender } from 'preact/test-utils';
 import {
 	setupScratch,
 	teardown,
@@ -28,6 +29,7 @@ describe('hydrate()', () => {
 	let resetRemove;
 	let resetSetAttribute;
 	let resetRemoveAttribute;
+	let rerender;
 
 	before(() => {
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
@@ -48,6 +50,7 @@ describe('hydrate()', () => {
 	});
 
 	beforeEach(() => {
+		rerender = setupRerender();
 		scratch = setupScratch();
 		attributesSpy = spyOnElementAttributes();
 		clearLog();
@@ -481,4 +484,35 @@ describe('hydrate()', () => {
 		expect(scratch.innerHTML).to.equal('<p>hello foo</p>');
 		expect(getLog()).to.deep.equal(['Comment.remove()', 'Comment.remove()']);
 	});
+
+	it('should work with error boundaries', () => {
+		scratch.innerHTML = '<div>Hello, World!</div>';
+		class Root extends Component {
+			constructor() {
+				super();
+				this.state = {};
+			}
+
+			componentDidCatch(error) {
+				this.setState({ error });
+			}
+
+			render() {
+				if (!this.state.error) {
+					return <App />;
+				} else {
+					return <div>Error!</div>;
+				}
+			}
+		}
+
+		function App() {
+			throw Error();
+			return createElement('div', {}, 'Hello, World!');
+		}
+
+		hydrate(<Root />, scratch);
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div>Error!</div>');
+	});
 });