SuperAPI AI 工具集

web-error-handling-error-boundaries

前端与建站

查看项目

更新于 10-15 19:52

技能介绍

用途:该技能面向 React 前端错误处理,核心是错误边界(Error Boundary)——捕获渲染、生命周期方法和构造函数中抛出的错误,用回退 UI 替换出错的子树。它不处理事件处理器、异步或服务端渲染错误,除非显式调用 showBoundary()。

主要能力:类组件边界(getDerivedStateFromError 返回状态、componentDidCatch 做副作用与上报);react-error-boundary 库的 FallbackComponent、resetErrorBoundary、useErrorBoundary、resetKeys;异步失败通过 showBoundary() 路由;React 19 在 createRoot 上的 onCaughtError、onUncaughtError、onRecoverableError 三个上报钩子,以及 captureOwnerStack()。

使用方式:无依赖时自行编写类边界;可用库时优先使用 resetKeys 与 useErrorBoundary;React 19 需要集中日志时使用 createRoot 选项。回退 UI 需加 role="alert" 并使用真实 button 提供重置。resetKeys 为浅比较,对象或数组需稳定引用。

适用场景:渲染阶段错误隔离、按功能区域粒度放置边界、捕获后重置重试(含重试上限与退避)、从 React 根集中上报错误。

限制:边界看不到事件处理器与异步抛错;边界不捕获自身渲染错误;SSR 水合错误通常表现为 recoverable;captureOwnerStack() 仅开发环境返回;三个 createRoot 选项在 React 18 被静默忽略。服务端渲染错误、数据层请求失败、字段级校验反馈和监控去向均不属本技能范围。