Error Boundary 能捕获哪些错误?
先理解原理和示例,再练习完整口述与追问。
回答要点
为子树渲染等 React 错误提供降级 UI;通常不捕获事件处理器、任意异步回调和边界自身错误,SSR 也有不同机制。请求失败需业务处理,不能指望一个边界包住所有错误。
原理拆解
错误边界主要捕获其子树渲染和相关生命周期中的异常,并展示降级 UI;不能把所有事件处理、任意 Promise 和服务端错误都自动收进去。边界本身抛错还需要更外层边界处理。错误页应允许重试、返回或重新加载,并报告 release、堆栈和必要上下文,避免只把页面永久变空。
示例与推演
图表渲染异常可以由图表外的边界替换为“该面板暂不可用”,其他面板继续工作;点击保存的 async handler 则需要自己的 try/catch、错误状态和重试。懒加载 chunk 失败要区分暂时网络问题与发布版本丢失,重试策略不同。
易错点
不要吞掉异常只返回 null,用户会看到无法解释的空白。函数组件里普通 try/catch 包 JSX 并不等于能捕获未来子组件的渲染过程。
参考回答可直接练习口述
Error Boundary 给子树渲染等 React 错误提供降级 UI,避免局部错误扩散成整页不可用。它不自动捕获普通事件处理器里的异常、任意定时器和 Promise 拒绝,也不能捕获边界自身的错误;这些仍要在业务入口处理。边界应按页面或功能区布置,并记录错误和组件信息。
面试官可能继续问追问与完整解答展开收起
追问
如何局部降级和重试?错误上报怎样关联用户、版本和组件范围?
追问回答
重试前先清理导致错误的状态,再重置或重建边界子树;否则重新渲染还是同一个错误。上报包含发布版本、路由、操作标识、错误栈与必要环境,关联 requestId 等定位线索,注意不记录敏感原始内容。