SuperAPI AI 工具集

react-errors-boundaries

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:在 React 应用中处理渲染期错误,提供优雅降级与恢复能力,防止未捕获错误导致整棵组件树崩溃。

主要能力:错误边界只能由类组件实现(无 Hook 等价物),需同时实现 static getDerivedStateFromError(渲染阶段,纯函数,返回回退 UI 状态)与 componentDidCatch(提交阶段,可执行日志等副作用)。React 18 与 19 使用相同 API,React 19 额外在 createRoot 上提供 onCaughtError、onUncaughtError、onRecoverableError 回调。推荐使用 react-error-boundary 库,安装命令:npm install react-error-boundary。

使用方式:错误边界无法捕获事件处理器、异步代码(promise、setTimeout)、SSR 错误及自身抛出的错误;这些场景应使用 try/catch 或 .catch(),例外是 startTransition 回调中的错误会被捕获。事件处理器或异步代码中可用 useErrorBoundary 的 showBoundary 触发最近的边界。恢复模式包括 key 重置、reset 回调、导航离开。放置策略分页面级(根安全网,必须)、功能级、组件级,避免包裹每个组件。

适用场景:需要隔离独立功能或组件失败、提供重试入口、记录错误到上报服务的 React 应用。

限制:错误边界不是输入校验或控制流手段;仅一个生命周期方法会导致边界不完整;无恢复入口的错误页会损害体验;开发与生产环境的错误冒泡和日志行为不同。