跳到主要内容

错误边界

错误边界解决哪一类界面失败？​

  • 子树隔离: 当后代渲染失败时，边界显示后备 UI，使其余页面仍可工作；边界粒度应对应用户可以理解的恢复范围;
  • 接入方式: 使用框架提供的错误边界或项目已有边界组件，本篇聚焦边界行为、失败反馈与恢复流程;
  • 自身失败: 边界自己的后备 UI 再出错需要外层边界接住，因此后备界面应保持简单;

Promise 失败与 Suspense 加载有什么区别？​

  • 等待: Suspense 显示支持它的资源尚未就绪时的加载后备内容;
  • 失败: use 读取的 Promise 被拒绝时交给最近的错误边界，不能让加载占位永远代替错误反馈;
  • 组合位置: 常把错误边界放在 Suspense 外侧，让同一区域既能表达等待，也能表达无法完成;
// ErrorBoundary 由框架或项目已有实现提供。
<ErrorBoundary fallback={<p>加载失败，请重试。</p>}>
  <Suspense fallback={<p>加载中……</p>}>
    <Results />
  </Suspense>
</ErrorBoundary>

哪些错误需要由事件处理流程接住？​

  • 普通事件: 点击处理器中的错误不会自动作为渲染错误处理，应在处理器中捕获并设置可恢复的错误状态;
  • 普通异步回调: 定时器或未纳入 React Action 的异步任务，不因为创建于组件内部就自动受边界保护;
  • Action 区别: React Transition Action 中的错误可以交给错误边界，具体契约见 Transition 参考，不要笼统认定所有异步错误都一样;

重试时应该恢复哪些状态？​

  • 明确恢复: 按框架或边界实现提供的重试接口，重新发起资源加载并重置对应错误状态;
  • 业务身份: 切换到另一个实体时可以通过合适的 key 重建边界子树，重置规则见保留与重置 state;
  • 错误记录: 面向用户显示可行动的提示，诊断信息交给日志，避免把内部堆栈当作用户文案;