Apple React 错误处理：Error Boundary、事件与异步请求

题意与假设

这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。

• 用产品页面的图表区域作为示例：局部组件可能在渲染时抛错，也可能在点击或请求时失败。
• 错误边界按 React 官方 Component API 讨论；具体框架对路由/服务端错误的处理需另查其文档。

解题路线

1. 在可能失败但可局部降级的子树外包 Error Boundary：类组件用 `getDerivedStateFromError` 设置 fallback，用 `componentDidCatch` 上报组件堆栈；边界不能捕获自身渲染错误。
2. 边界捕获的是子树渲染过程中的错误，包括相关生命周期；事件处理函数中的异常要在事件处理路径自己 try/catch 或向应用错误服务上报。
3. Promise 拒绝和 Effect 内启动的普通异步任务须显式处理，把可恢复状态写入 error state 并展示重试 UI；不能指望边界自动吞掉异步异常。
4. 错误 UI 要保留可恢复操作并携带请求 ID、版本和组件上下文观察错误率；敏感数据不能放进日志。根级与局部边界配合，避免一个图表失败让整页不可用。

手动走一遍

图表渲染器拿到异常数据抛错，图表外层边界显示‘图表暂不可用’，其它页面仍工作。用户点击刷新触发的 fetch 返回 500，则按钮处理逻辑更新请求错误状态并允许重试；这次失败不会自动被同一个 Error Boundary 捕获。

规模与取舍

边界本身是局部故障隔离机制，性能成本随挂载位置和 fallback 子树而变；对大量卡片逐个建边界会增加维护成本。选择边界粒度以故障域与用户体验为准。

易错点与追问

容易失分的边界

• 认为 Error Boundary 可以捕获任意事件处理或 setTimeout/普通 Promise 异常。
• 只在应用根放一个边界，导致局部图表错误整页消失。
• 用空白 fallback 隐藏错误，既无重试也无监控。
• 在错误日志里记录用户令牌或请求正文。
• 把服务端/框架路由错误处理细节当作 React 核心 API 的统一行为。

继续深挖

• 事件处理抛错和 render 抛错分别如何测试？
• 异步请求的过期响应与错误状态如何一起处理？
• 什么时候用局部边界，什么时候应让整个路由降级？
• 为何 fallback 自身也应尽可能简单可靠？