---
name: "react-error-boundary-fallbacks"
description: "Catch runtime JavaScript rendering errors gracefully and provide user-friendly reset recovery."
metadata:
  author: "Brian Vaughn"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "wrap component in errorboundary"
  - "create error fallback component react"
  - "reset error boundary"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# react-error-boundary Declarative Catch Boundaries & Resets

Implements bvaughn/react-error-boundary: ErrorBoundary component, custom FallbackComponent with error and resetErrorBoundary props, onReset cache invalidation, and integrating Sentry error logging.

## When to Invoke
Invoke this skill whenever you need to:
- wrap component in errorboundary
- create error fallback component react
- reset error boundary

## Execution SOP & Rules
1. Install: pnpm add react-error-boundary.
2. Create Fallback: function ErrorFallback({ error, resetErrorBoundary }) { return <div><button onClick={resetErrorBoundary}>Retry</button></div> }.
3. Wrap components: <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => resetQueryCache()}>.
4. Use useErrorBoundary hook to throw errors programmatically from asynchronous event handlers into the boundary.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.