SuperAPI AI 工具集

error-boundaries

前端与建站

查看项目

更新于 10-16 07:24

技能介绍

用途:在 React + TanStack Router 项目中为错误、崩溃与找不到页面提供边界和 fallback UI,让错误在边界层处理而不是组件内吞掉。

主要能力:TanStack Router 内建错误处理,含三层组件——路由级 errorComponent、全局 defaultErrorComponent、404 用的 notFoundComponent,并支持路由级错误边界(component、errorComponent、pendingComponent 并列配置)。错误组件通过 ErrorComponentProps 接收 error、reset 与可选 info.componentStack,常见 fallback 模式有极简提示与带卡片、堆栈详情的详细提示。

必要用法:路由文件用 createFileRoute 配置 errorComponent,如 errorComponent: ({ error, reset }) => (...) 中渲染错误信息并用 Button onPress={reset} 重试;全局在 createRouter 中配置 defaultErrorComponent 与 defaultNotFoundComponent;loader 中先 getPost 再判断 null 时 throw notFound(),组件内也可用 throw notFound() 触发 404。开发环境才展示 error.stack,生产仅显示上下文提示;建议同时提供重试与刷新页面按钮。

适用场景:页面加载失败、路由数据错误、404 与未发布内容拦截等前端错误恢复。

限制与注意:资料未提供安装命令、版本要求、收费或平台信息;不要在组件内捕获后不再抛出,错误应冒泡至边界;异步错误需搭配 Suspense;记得记录日志、补充 notFoundComponent 和处理 loader 错误,避免生产环境暴露堆栈。错误监控可考虑外部服务,完成错误组件后可交由代码审查代理检查。