标准答案
- Error Boundary 是 React 的错误边界机制，通常用类组件实现 getDerivedStateFromError 和 componentDidCatch。
- 它能捕获子组件渲染过程、生命周期方法和构造函数中的错误。
- 它不能捕获事件处理函数中的错误、setTimeout 或 Promise 里的异步错误、服务端渲染错误以及边界组件自身的错误。
- 边界捕获错误后应展示可恢复的降级 UI，并把错误、组件栈、路由和版本信息上报。
- 错误边界应按页面、区域或高风险组件划分，不宜只在应用最外层放一个。
题目解析
这道题要先说能捕获的范围，再说不能捕获的范围。很多候选人只知道 fallback，不知道边界限制。
事件处理里的错误可以用 try/catch 或统一事件逻辑处理；异步请求错误应在请求层和状态层处理。
边界粒度很重要。只放根边界会让一个局部组件错误导致整个应用退化。
代码示例
下面是一个最小 Error Boundary 类组件。
TSX
class ErrorBoundary extends React.Component<
{ children: ReactNode },
{ hasError: boolean }
> {
state = { hasError: false }
static getDerivedStateFromError() {
return { hasError: true }
}
componentDidCatch(error: Error, info: ErrorInfo) {
reportError(error, info)
}
render() {
if (this.state.hasError) {
return <FallbackPanel />
}
return this.props.children
}
}常见误区
- 以为 Error Boundary 能捕获所有错误，包括 Promise rejection 和事件处理错误。
- 只展示空白 fallback，没有错误上报和恢复入口。
- 整个应用只有一个根错误边界，局部错误会影响过大范围。