错误边界（Error Boundary）：截获子树渲染错误，不是万能 try/catch

知识背景

React 16 起，类组件可实现 static getDerivedStateFromError 与 componentDidCatch，在子组件树渲染、生命周期、子构造函数抛错时捕获，展示降级 UI，避免整页白屏。
函数组件目前无等价 Hooks API 实现完整错误边界，仍需用 class 包一层，或使用现成库。

---

知识详解与通俗解释

1. 错误边界能捕获什么？

• 子组件 render、生命周期、构造函数中的错误。
• 不能捕获：事件处理器里的错误（用 try/catch）、异步代码（setTimeout/Promise）、服务端渲染错误、自身边界内的错误。

通俗说：边界像「楼层消防门」，只管往下冒的渲染火灾；你房间里自己点的蜡烛（点击回调）要自己灭。

2. 最小类组件示例

class Boundary extends React.Component {
  state = { err: null };
  static getDerivedStateFromError(err) {
    return { err };
  }
  componentDidCatch(err, info) {
    console.error(err, info.componentStack);
  }
  render() {
    if (this.state.err) return <h1>出错了</h1>;
    return this.props.children;
  }
}

3. 放置策略

• 按路由或大块功能分区：一处第三方组件崩了，不影响其他 Tab。
• 与监控上报结合：在 componentDidCatch 里发到 Sentry。

4. React 19+ 动向（了解）

生态中仍有「根错误边界 + 细粒度边界」实践；API 以官方文档为准，但**「渲染错误 vs 事件错误」**二分长期成立。

---

总结

• 错误边界用 class 实现，兜底子树渲染异常。
• 事件与异步需传统 try/catch 或全局 unhandledrejection。
• 线上应用建议在路由根 + 关键模块各挂一层边界，配合监控。