mcpField
E
error-boundary-creator

error-boundary-creator

github.com/onewave-aiDevelopment393301 installsUpdated 1w ago
Repository

About error-boundary-creator

A skill for adding error handling to React and Next.js applications. It covers component and route boundaries, fallback interfaces, asynchronous errors, reporting, and testing error states.

Key features

  1. 01React error boundaries
  2. 02Next.js App Router error files
  3. 03Fallback UIs with recovery actions
  4. 04Async error handling and reporting
  5. 05Error-state testing guidance

Use cases

  1. 01Isolating failures at route level
  2. 02Handling errors from third-party components
  3. 03Reporting caught errors to a monitoring service
  4. 04Testing fallback and recovery flows

Install

Copy the command and run it in a terminal.

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

After installing, type/error-boundary-creatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

Error Boundary Creator

Add resilient error handling to React and Next.js apps: error boundaries, fallback UIs, async error handling, and error reporting.

Workflow

  1. Identify error-prone areas: async operations, third-party integrations, and route-level entry points.
  2. Wrap components in an error boundary. Use a class boundary or the react-error-boundary library. See references/class-boundaries.md.
  3. For Next.js App Router, add the relevant error.tsx, global-error.tsx, and not-found.tsx segment files. See references/nextjs-error-handling.md.
  4. Handle errors that boundaries miss (event handlers, promises) and wire up reporting. See references/async-and-reporting.md.
  5. Design fallback UIs with role="alert" and a recovery action (reset or reload).
  6. Route caught errors to a single reporting sink and test error states before shipping.

Contents

  • references/class-boundaries.md — Basic, resettable, and react-error-boundary patterns.
  • references/nextjs-error-handling.md — App Router error.tsx, global-error.tsx, not-found.tsx.
  • references/async-and-reporting.md — useAsync hook and the reportError integration module.

Best Practices

  1. Wrap at the route level for page-level isolation, and wrap third-party components separately.
  2. Provide meaningful fallbacks with a recovery option.
  3. Log every caught error to the monitoring service.
  4. Do not catch errors the code cannot meaningfully handle.
  5. Test error states in development.

Comments

Markdown supported