mcpField
E
error-boundary-creator

error-boundary-creator

github.com/onewave-ai开发393301 次安装1 周前更新
代码仓库

关于 error-boundary-creator

用于为 React 和 Next.js 应用添加错误处理的技能，涵盖组件与路由边界、回退界面、异步错误、错误上报及错误状态测试。

主要功能

  1. 01React 错误边界
  2. 02Next.js App Router 错误文件
  3. 03带恢复操作的回退界面
  4. 04异步错误处理与上报
  5. 05错误状态测试指导

适用场景

  1. 01在路由级隔离故障
  2. 02处理第三方组件错误
  3. 03向监控服务上报捕获的错误
  4. 04测试回退与恢复流程

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onewave-ai/claude-skills --skill error-boundary-creator

安装后在 Claude Code 中输入/error-boundary-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
async-and-reporting.md
class-boundaries.md
nextjs-error-handling.md

详细介绍

错误边界创建器

为 React 和 Next.js 应用添加可靠的错误处理：错误边界、回退 UI、异步错误处理和错误报告。

工作流

  1. 找出容易出错的区域：异步操作、第三方集成和路由级入口点。
  2. 使用错误边界包装组件。可以使用类边界或 react-error-boundary 库。参见 references/class-boundaries.md。
  3. 对于 Next.js App Router，添加相应的 error.tsx、global-error.tsx 和 not-found.tsx 分段文件。参见 references/nextjs-error-handling.md。
  4. 处理错误边界无法捕获的错误（事件处理程序、Promise），并接入错误报告。参见 references/async-and-reporting.md。
  5. 设计回退 UI，使用 role="alert" 并提供恢复操作（重置或重新加载）。
  6. 将捕获的错误发送到统一的报告接收端，并在发布前测试错误状态。

内容

  • references/class-boundaries.md — 基础、可重置和 react-error-boundary 模式。
  • references/nextjs-error-handling.md — App Router 的 error.tsx、global-error.tsx、not-found.tsx。
  • references/async-and-reporting.md — useAsync Hook 和 reportError 集成模块。

最佳实践

  1. 在路由级进行包装以隔离页面级错误，并单独包装第三方组件。
  2. 提供有意义的回退界面，并提供恢复选项。
  3. 将每个捕获的错误记录到监控服务。
  4. 不要捕获代码无法有效处理的错误。
  5. 在开发过程中测试错误状态。

评论

支持 Markdown