download： 系统入门云计算服务，项目上云最佳实践

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

1. 触发更新
2. render阶段：计算更新会造成的副作用
3. 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/useLayoutEffect``callback与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。