一张图概括：

这里简略解说下React工作流程，后文有用。分为三步：

触发更新
render阶段：计算更新会造成的副作用
commit阶段：在宿主环境执行副作用
副作用有很多，比方：

插入DOM节点
执行useEffect回调
好了，让咱们进入主题。

什么是Error Boundaries
React提供了两个与错误处理相干的API：

getDerivedStateFromError：静态方法，当谬误产生后提供一个机会渲染fallback UI
componentDidCatch：组件实例办法，当谬误产生后提供一个机会记录错误信息
应用了这两个API的ClassComponent通常被称为Error Boundaries（谬误边界）。

在Error Boundaries的子孙组件中产生的所有React工作流程内的谬误都会被Error Boundaries捕捉。

通过开篇的介绍能够晓得，React工作流程指：

render阶段
commit阶段
思考如下代码：

class ErrorBoundary extends Component {
componentDidCatch(e) {

console.warn(“产生谬误”, e);

}
render() {

return <div>{this.props.children}</div>;

}
}

const App = () => (

<ErrorBoundary><A><B/></A><C/><ErrorBoundary>

)
A、B、C作为ErrorBoundary的子孙组件，当产生React工作流程内的谬误，都会被ErrorBoundary中的componentDidCatch办法捕捉。

步骤1:捕捉谬误
首先来看工作流程中的谬误都是何时被捕捉的。

render阶段的外围代码如下，产生的谬误会被handleError解决：

do {
try {

// 对于并发更新则是workLoopConcurrent

workLoopSync();

break;

} catch (thrownValue) {

handleError(root, thrownValue);

}
} while (true);
commit阶段蕴含很多工作，比方：

componentDidMount/Update执行
绑定/解绑ref
useEffect/useLayoutEffectcallback与destroy执行
这些工作会以如下模式执行，产生的谬误被captureCommitPhaseError解决：

try {
// …执行某项工作
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
步骤2:结构callback
能够发现，即便没有Error Boundaries，工作流程中的谬误曾经被React捕捉了。而正确的逻辑应该是：

如果存在Error Boundaries，执行对应API
抛出React的提示信息
如果不存在Error Boundaries，抛出未捕捉的谬误
所以，不论是handleError还是captureCommitPhaseError，都会从产生谬误的节点的父节点开始，逐层向上遍历，寻找最近的Error Boundaries。

一旦找到，就会结构：

用于执行Error Boundaries API的callback
用于抛出React提示信息的callback

// ...为了可读性，逻辑有删减
function createClassErrorUpdate() {
if (typeof getDerivedStateFromError === 'function') {
// 用于执行getDerivedStateFromError的callback

update.payload = () => {  return getDerivedStateFromError(error);

};
// 用于抛出React提示信息的callback

update.callback = () => {  logCapturedError(fiber, errorInfo);};

}
if (inst !== null && typeof inst.componentDidCatch === 'function') {
// 用于执行componentDidCatch的callback

update.callback = function callback() {  this.componentDidCatch(error);};

}
return update;
}
如果没有找到Error Boundaries，持续向上遍历直到根节点。

此时会结构：

用于抛出未捕捉谬误的callback
用于抛出React提示信息的callback
// ...为了可读性，逻辑有删减
funffction createRootErrorUpdate() {
// 用于抛出“未捕捉的谬误”及“React的提示信息”的callback
update.callback = () => {

onUncaughtError(error);logCapturedError(fiber, errorInfo);

};
return update;
}
执行callback
结构好的callback在什么时候执行呢？

在React中有两个执行用户自定义callback的API：

对于ClassComponent， this.setState(newState, callback)中newState和callback参数都能传递Function作为callback
所以，对于Error Boundaries，相当于被动触发了一次更新：

this.setState(() => {
// 用于执行getDerivedStateFromError的callback
}, () => {
// 用于执行componentDidCatch的callback
// 以及 用于抛出React提示信息的callback
})