用途:在 React 应用中处理组件崩溃、阻止错误向上传播到父级路由、实现优雅降级与面向用户的错误状态,并支持错误日志与监控。
主要能力:错误边界可捕获子组件在渲染、生命周期方法和构造函数中抛出的 JavaScript 错误,并显示回退 UI。原生 React 只能用类组件实现,react-error-boundary 库提供函数组件封装。支持类边界(getDerivedStateFromError + componentDidCatch)、函数边界(<ErrorBoundary FallbackComponent={...} />)、重置机制(resetErrorBoundary() 或 resetKeys={[dep]})、错误日志(onError={(error, info) => log(error)})、回退组件、内联回退、render prop 回退、嵌套边界、路由级边界、Suspense 集成,以及 useErrorBoundary 钩子手动触发边界。
使用方式与限制:事件处理器错误应使用 try/catch,异步回调(setTimeout、无 Suspense 的 promise)、服务端渲染错误和边界自身错误均不被捕获。getDerivedStateFromError 必须为纯函数,状态更新用它而非 componentDidCatch。生产环境不应展示堆栈,应始终通过 onError 记录到监控服务。边界应放在有意义的 UI 区块,并提供重试或 resetKeys 恢复机制。路由级错误处理可委托 tanstack-router 技能,命令为 npx skills add oakoss/agent-skills --skill tanstack-router;监控接入、复杂恢复流程和测试可分别委托可观测性、Task agent 与测试专家。