Add support for componentDidCatch Component method

config/properties.json

@@ -1,8 +1,9 @@
 {
   "props": {
-    "cname": 16,
+    "cname": 17,
     "props": {
       "$_dirty": "__d",
+      "$_caught": "__e",
       "$_disable": "__x",
       "$_listeners": "__l",
       "$_renderCallbacks": "__h",
@@ -14,6 +15,7 @@
       "$prevProps": "__p",
       "$prevState": "__s",
       "$_parentComponent": "__u",
+      "$_ancestorComponent": "__a",
       "$_componentConstructor": "_componentConstructor",
       "$__html": "__html",
       "$_component": "_component",

package.json

@@ -19,7 +19,7 @@
     "transpile:esm": "rollup -c config/rollup.config.esm.js",
     "transpile:debug": "babel debug/ -o debug.js -s",
     "transpile": "npm-run-all transpile:main transpile:esm transpile:devtools transpile:debug",
-    "optimize": "uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map",
+    "optimize": "uglifyjs dist/preact.dev.js -c conditionals=false,sequences=false,loops=false,join_vars=false,collapse_vars=false --pure-funcs=Object.defineProperty --mangle-props --mangle-regex=\"/^(_|normalizedNodeName|nextBase|prev[CPS]|_parentC|_ancestorC)/\" --name-cache config/properties.json -b width=120,quote_style=3 -o dist/preact.js -p relative --in-source-map dist/preact.dev.js.map --source-map dist/preact.js.map",
     "minify": "uglifyjs dist/preact.js -c collapse_vars,evaluate,screw_ie8,unsafe,loops=false,keep_fargs=false,pure_getters,unused,dead_code -m -o dist/preact.min.js -p relative --in-source-map dist/preact.js.map --source-map dist/preact.min.js.map",
     "strip:main": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.dev.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.dev.js",
     "strip:esm": "jscodeshift --run-in-band -s -t config/codemod-strip-tdz.js dist/preact.esm.js && jscodeshift --run-in-band -s -t config/codemod-const.js dist/preact.esm.js && jscodeshift --run-in-band -s -t config/codemod-let-name.js dist/preact.esm.js",

src/component.js

@@ -19,6 +19,7 @@ import { enqueueRender } from './render-queue';
  */
 export function Component(props, context) {
 	this._dirty = true;
+	this._caught = false;
 
 	/**
 	 * @public

src/preact.d.ts

@@ -80,6 +80,7 @@ declare namespace preact {
 		shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
 		componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
 		componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, previousContext: any): void;
+		componentDidCatch?(error: any): void;
 	}
 
 	abstract class Component<P, S> {

src/render.js

@@ -18,5 +18,5 @@ import { diff } from './vdom/diff';
  * render(<Thing name="one" />, document.querySelector('#foo'));
  */
 export function render(vnode, parent, merge) {
-	return diff(merge, vnode, {}, false, parent, false);
+	return diff(merge, vnode, {}, false, parent);
 }

src/vdom/component-recycler.js

@@ -26,9 +26,11 @@ export function collectComponent(component) {
  * @param {function} Ctor The constructor of the component to create
  * @param {object} props The initial props of the component
  * @param {object} context The initial context of the component
+ * @param {import('../component').Component} [ancestorComponent] The nearest ancestor component beneath
+ *  which the new component will be mounted
  * @returns {import('../component').Component}
  */
-export function createComponent(Ctor, props, context) {
+export function createComponent(Ctor, props, context, ancestorComponent) {
 	let list = components[Ctor.name],
 		inst;
 
@@ -41,7 +43,7 @@ export function createComponent(Ctor, props, context) {
 		inst.constructor = Ctor;
 		inst.render = doRender;
 	}
-
+	inst._ancestorComponent = ancestorComponent;
 
 	if (list) {
 		for (let i=list.length; i--; ) {

src/vdom/component.js

@@ -53,6 +53,23 @@ export function setComponentProps(component, props, renderMode, context, mountAl
 	if (component.__ref) component.__ref(component);
 }
 
+export function catchErrorInComponent(error, component) {
+	flushMounts();
+	for (; component; component = component._ancestorComponent) {
+		if (component.componentDidCatch && !component._caught) {
+			try {
+				component.componentDidCatch(error);
+				component._caught = true;
+				enqueueRender(component);
+				return;
+			} catch (e) {
+				error = e;
+			}
+		}
+	}
+	throw error;
+}
+
 
 
 /**
@@ -79,129 +96,150 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
 		initialChildComponent = component._component,
 		skip = false,
 		snapshot = previousContext,
-		rendered, inst, cbase;
-
-	if (component.constructor.getDerivedStateFromProps) {
-		previousState = extend({}, previousState);
-		component.state = extend(state, component.constructor.getDerivedStateFromProps(props, state));
-	}
-
-	// if updating
-	if (isUpdate) {
-		component.props = previousProps;
-		component.state = previousState;
-		component.context = previousContext;
-		if (renderMode!==FORCE_RENDER
-			&& component.shouldComponentUpdate
-			&& component.shouldComponentUpdate(props, state, context) === false) {
-			skip = true;
-		}
-		else if (component.componentWillUpdate) {
-			component.componentWillUpdate(props, state, context);
-		}
-		component.props = props;
-		component.state = state;
-		component.context = context;
-	}
-
-	component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
-	component._dirty = false;
+		rendered, inst, cbase,
+		exception, clearCaught = component._caught;
 
-	if (!skip) {
-		rendered = component.render(props, state, context);
-
-		// context to pass to the child, can be updated via (grand-)parent component
-		if (component.getChildContext) {
-			context = extend(extend({}, context), component.getChildContext());
+	try {
+		if (component.constructor.getDerivedStateFromProps) {
+			previousState = extend({}, previousState);
+			component.state = extend(state, component.constructor.getDerivedStateFromProps(props, state));
 		}
 
-		if (isUpdate && component.getSnapshotBeforeUpdate) {
-			snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
+		// if updating
+		if (isUpdate) {
+			component.props = previousProps;
+			component.state = previousState;
+			component.context = previousContext;
+			if (renderMode!==FORCE_RENDER
+				&& component.shouldComponentUpdate
+				&& component.shouldComponentUpdate(props, state, context) === false) {
+				skip = true;
+			}
+			else if (component.componentWillUpdate) {
+				component.componentWillUpdate(props, state, context);
+			}
+			component.props = props;
+			component.state = state;
+			component.context = context;
 		}
 
-		let childComponent = rendered && rendered.nodeName,
-			toUnmount, base;
+		component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
+		component._dirty = false;
 
-		if (typeof childComponent==='function') {
-			// set up high order component link
+		if (!skip) {
+			rendered = component.render(props, state, context);
 
-			let childProps = getNodeProps(rendered);
-			inst = initialChildComponent;
+			// context to pass to the child, can be updated via (grand-)parent component
+			if (component.getChildContext) {
+				context = extend(extend({}, context), component.getChildContext());
+			}
 
-			if (inst && inst.constructor===childComponent && childProps.key==inst.__key) {
-				setComponentProps(inst, childProps, SYNC_RENDER, context, false);
+			if (isUpdate && component.getSnapshotBeforeUpdate) {
+				snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
 			}
-			else {
-				toUnmount = inst;
-
-				component._component = inst = createComponent(childComponent, childProps, context);
-				inst.nextBase = inst.nextBase || nextBase;
-				inst._parentComponent = component;
-				setComponentProps(inst, childProps, NO_RENDER, context, false);
-				renderComponent(inst, SYNC_RENDER, mountAll, true);
+
+			let childComponent = rendered && rendered.nodeName,
+				toUnmount, base;
+			try {
+				if (typeof childComponent==='function') {
+					// set up high order component link
+
+					let childProps = getNodeProps(rendered);
+					inst = initialChildComponent;
+
+					if (inst && inst.constructor===childComponent && childProps.key==inst.__key) {
+						setComponentProps(inst, childProps, SYNC_RENDER, context, false);
+					}
+					else {
+						toUnmount = inst;
+
+						component._component = inst = createComponent(childComponent, childProps, context, component);
+						inst.nextBase = inst.nextBase || nextBase;
+						inst._parentComponent = component;
+						setComponentProps(inst, childProps, NO_RENDER, context, false);
+						renderComponent(inst, SYNC_RENDER, mountAll, true);
+					}
+
+					base = inst.base;
+				}
+				else {
+					cbase = initialBase;
+
+					// destroy high order component link
+					toUnmount = initialChildComponent;
+					if (toUnmount) {
+						cbase = component._component = null;
+					}
+
+					if (initialBase || renderMode===SYNC_RENDER) {
+						if (cbase) cbase._component = null;
+						base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, component);
+					}
+				}
+			} catch (e) {
+				exception = e;
+				clearCaught = false;
+				if (!base) {
+					base = initialBase || document.createTextNode("");
+				}
 			}
 
-			base = inst.base;
-		}
-		else {
-			cbase = initialBase;
+			if (initialBase && base!==initialBase && inst!==initialChildComponent) {
+				let baseParent = initialBase.parentNode;
+				if (baseParent && base!==baseParent) {
+					baseParent.replaceChild(base, initialBase);
 
-			// destroy high order component link
-			toUnmount = initialChildComponent;
-			if (toUnmount) {
-				cbase = component._component = null;
+					if (!toUnmount) {
+						initialBase._component = null;
+						recollectNodeTree(initialBase, false);
+					}
+				}
 			}
 
-			if (initialBase || renderMode===SYNC_RENDER) {
-				if (cbase) cbase._component = null;
-				base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, true);
+			if (toUnmount && toUnmount.base) {
+				unmountComponent(toUnmount);
 			}
-		}
 
-		if (initialBase && base!==initialBase && inst!==initialChildComponent) {
-			let baseParent = initialBase.parentNode;
-			if (baseParent && base!==baseParent) {
-				baseParent.replaceChild(base, initialBase);
-
-				if (!toUnmount) {
-					initialBase._component = null;
-					recollectNodeTree(initialBase, false);
+			component.base = base;
+			if (base && !isChild) {
+				let componentRef = component,
+					t = component;
+				while ((t=t._parentComponent)) {
+					(componentRef = t).base = base;
 				}
+				base._component = componentRef;
+				base._componentConstructor = componentRef.constructor;
 			}
 		}
 
-		if (toUnmount) {
-			unmountComponent(toUnmount);
+		if (!isUpdate || mountAll) {
+			mounts.unshift(component);
 		}
-
-		component.base = base;
-		if (base && !isChild) {
-			let componentRef = component,
-				t = component;
-			while ((t=t._parentComponent)) {
-				(componentRef = t).base = base;
+		else if (!skip) {
+			// Ensure that pending componentDidMount() hooks of child components
+			// are called before the componentDidUpdate() hook in the parent.
+			// Note: disabled as it causes duplicate hooks, see https://github.com/developit/preact/issues/750
+			// flushMounts();
+
+			if (component.componentDidUpdate) {
+				component.componentDidUpdate(previousProps, previousState, snapshot);
 			}
-			base._component = componentRef;
-			base._componentConstructor = componentRef.constructor;
+			if (options.afterUpdate) options.afterUpdate(component);
 		}
-	}
 
-	if (!isUpdate || mountAll) {
-		mounts.unshift(component);
-	}
-	else if (!skip) {
-		// Ensure that pending componentDidMount() hooks of child components
-		// are called before the componentDidUpdate() hook in the parent.
-		// Note: disabled as it causes duplicate hooks, see https://github.com/developit/preact/issues/750
-		// flushMounts();
-
-		if (component.componentDidUpdate) {
-			component.componentDidUpdate(previousProps, previousState, snapshot);
+		while (component._renderCallbacks.length) component._renderCallbacks.pop().call(component);
+
+		if (clearCaught) {
+			component._caught = false;
 		}
-		if (options.afterUpdate) options.afterUpdate(component);
+
+	} catch (e) {
+		catchErrorInComponent(e, component._ancestorComponent);
 	}
 
-	while (component._renderCallbacks.length) component._renderCallbacks.pop().call(component);
+	if (typeof exception !== "undefined") {
+		catchErrorInComponent(exception, component);
+	}
 
 	if (!diffLevel && !isChild) flushMounts();
 }
@@ -214,10 +252,12 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
  * @param {import('../vnode').VNode} vnode A Component-referencing VNode
  * @param {object} context The current context
  * @param {boolean} mountAll Whether or not to immediately mount all components
+ * @param {import('../component').Component} [ancestorComponent] The nearest ancestor component
+ *  beneath which the new component will be mounted
  * @returns {import('../dom').PreactElement} The created/mutated element
  * @private
  */
-export function buildComponentFromVNode(dom, vnode, context, mountAll) {
+export function buildComponentFromVNode(dom, vnode, context, mountAll, ancestorComponent) {
 	let c = dom && dom._component,
 		originalComponent = c,
 		oldDom = dom,
@@ -238,7 +278,7 @@ export function buildComponentFromVNode(dom, vnode, context, mountAll) {
 			dom = oldDom = null;
 		}
 
-		c = createComponent(vnode.nodeName, props, context);
+		c = createComponent(vnode.nodeName, props, context, ancestorComponent);
 		if (dom && !c.nextBase) {
 			c.nextBase = dom;
 			// passing dom/oldDom as nextBase will recycle it if unused, so bypass recycling on L229:
@@ -264,13 +304,20 @@ export function buildComponentFromVNode(dom, vnode, context, mountAll) {
  * @private
  */
 export function unmountComponent(component) {
+	if (component._disable) return;
+	component._disable = true;
+
 	if (options.beforeUnmount) options.beforeUnmount(component);
 
 	let base = component.base;
 
-	component._disable = true;
-
-	if (component.componentWillUnmount) component.componentWillUnmount();
+	if (component.componentWillUnmount) {
+		try {
+			component.componentWillUnmount();
+		} catch (e) {
+			catchErrorInComponent(e, component._ancestorComponent);
+		}
+	}
 
 	component.base = null;