用途:为 Next.js 应用提供系统化的前端错误处理方案,覆盖错误边界、API 错误展示、表单校验错误和全局错误恢复。
主要能力:
- 错误边界层级:Next.js 在每个路由段提供内置错误边界,app/error.tsx 作为全局边界,各子段(如 app/dashboard/error.tsx、app/dashboard/settings/error.tsx)可定义自己的边界。边界组件为客户端组件,接收 error 与 reset,通常渲染 role="alert" 的提示并提供“Try again”按钮;开发环境可展示 error.message。
- Server Action 错误处理:不应在预期错误上抛出,而是返回结构化对象,如 { error: 'Title is required' } 或 { success: true };客户端用 useActionState 获取 state、formAction 与 pending,并配合 aria-invalid、role="alert" 展示错误、按钮禁用。
- API/Fetch 错误处理:可编写统一封装(如 lib/fetch.ts 的 apiFetch),返回 { data, error },对非 ok 响应读取 message 或使用
Request failed (${res.status}),网络异常返回“Network error. Please check your connection.”。 - 全局错误处理:global-error.tsx 作为根兜底,捕获根布局错误,需包含 html、body,提供重载页面按钮。
- 面向用户的错误消息映射:网络离线、5xx、404、校验、限流、认证过期分别配对应文案与动作(重试、回到首页、修正输入、倒计时、登录等)。
使用方式:按路由段创建 error.tsx;Server Action 返回结构化结果并用 useActionState 处理;封装统一 fetch;补充 global-error.tsx。附有检查清单:每个路由段有 error.tsx、Server Action 返回 { data, error }、API 调用有一致封装、错误消息友好、表单内联校验使用 role="alert"、存在 global-error.tsx、服务端记录错误、可恢复错误提供重试/重置、生产环境不暴露原始 error.message。
适用场景:Next.js 应用的错误边界设计、表单校验与提交失败反馈、API 请求失败展示、全局兜底与恢复。
限制:资料未提供安装命令、依赖配置、具体版本要求或独立包信息,暂未提供。