Can Error Boundaries catch asynchronous errors?

While native boundaries don't catch async errors, this skill provides patterns using the showBoundary hook to manually propagate async failures to the nearest boundary.

Why should I use granular Error Boundaries instead of one at the root?

Granular boundaries isolate failures to specific UI sections, like a sidebar or widget, preventing a single component error from crashing your entire application.

Does this skill support React 19 features?

Yes, it includes patterns for React 19's createRoot options such as onCaughtError and onRecoverableError for unified error tracking.

Is the react-error-boundary library required for this skill?

No, the skill covers both native React class component implementations and the industry-standard react-error-boundary library patterns.

Web Error Handling & React Error Boundaries

Name: Web Error Handling & React Error Boundaries
Author: agents-inc

byagents-inc

•

開発者ツール

Implements robust React Error Boundary patterns and recovery strategies to prevent application crashes and provide graceful degradation.

This skill provides specialized guidance for implementing resilient error-handling strategies in React applications using Error Boundaries. It covers native class-based implementations, integration with the react-error-boundary library, and modern React 19 createRoot hooks for centralized logging and observability. By applying granular placement strategies and accessible fallback UIs with reset/retry capabilities, developers can isolate failures to specific components, ensuring the rest of the application remains functional even when individual features encounter runtime exceptions.

主な機能

01Granular placement patterns to isolate component failures and prevent total app crashes

021 GitHub stars

03Async error propagation using the showBoundary hook for event handlers and effects

04Standardized class-based and library-driven Error Boundary implementations

05React 19+ centralized error logging with onCaughtError and onUncaughtError hooks

06Accessible fallback UI design with role="alert" and programmatic reset/retry logic

ユースケース

01Creating isolated failure domains for complex dashboards where one widget shouldn't crash the entire page

02Implementing standardized error logging and monitoring for production-grade React applications

03Enabling user-friendly recovery paths like exponential backoff retries for transient frontend errors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-error-handling-error-boundaries

For use in Claude.ai and ChatGPT

主な機能

01Granular placement patterns to isolate component failures and prevent total app crashes

021 GitHub stars

03Async error propagation using the showBoundary hook for event handlers and effects

04Standardized class-based and library-driven Error Boundary implementations

05React 19+ centralized error logging with onCaughtError and onUncaughtError hooks

06Accessible fallback UI design with role="alert" and programmatic reset/retry logic

ユースケース

01Creating isolated failure domains for complex dashboards where one widget shouldn't crash the entire page

02Implementing standardized error logging and monitoring for production-grade React applications

03Enabling user-friendly recovery paths like exponential backoff retries for transient frontend errors