Why shouldn't I just use one global Error Boundary?

A single root boundary will crash the entire app for any component error. This skill teaches granular placement so that a failure in one widget allows the rest of the application to remain functional.

Is this skill compatible with React 19?

Yes, it includes specific implementation guides for React 19 features such as the createRoot error options: onCaughtError, onUncaughtError, and onRecoverableError.

Can this skill handle asynchronous errors in React?

Yes, while native boundaries only catch rendering errors, this skill provides patterns using the showBoundary hook from the react-error-boundary library to manually propagate async and event-handler errors.

Does it support accessibility for error states?

Yes, the skill mandates using the role='alert' attribute on fallback UI components to ensure that error states are properly announced to users with screen readers.

React Error Boundaries

Name: React Error Boundaries
Author: agents-inc

byagents-inc

•

보안 및 테스팅

Implements robust error handling and fallback UI patterns to prevent React application crashes and enable graceful recovery.

This skill provides expert-level guidance for implementing React Error Boundaries, focusing on isolating failures and providing accessible fallback interfaces. It covers a wide range of implementation strategies, including native class-based boundaries, the react-error-boundary library, and modern React 19 createRoot hooks for centralized logging. By emphasizing strategic placement and recovery mechanisms like reset/retry logic, this skill helps developers build resilient frontend architectures that handle both synchronous rendering errors and asynchronous failures gracefully.

주요 기능

01Integration with react-error-boundary for hooks and resetKeys support

02Async error handling using the showBoundary() pattern

03Granular placement strategies for feature-level failure isolation

04Native class-based Error Boundary implementation patterns

05React 19+ centralized error logging and recovery hooks

061 GitHub stars

사용 사례

01Preventing full-app crashes by isolating component failures in specific UI sections

02Implementing 'Try Again' and reset functionality for recoverable network or render errors

03Setting up centralized error monitoring and logging for React 19 applications

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

주요 기능

01Integration with react-error-boundary for hooks and resetKeys support

02Async error handling using the showBoundary() pattern

03Granular placement strategies for feature-level failure isolation

04Native class-based Error Boundary implementation patterns

05React 19+ centralized error logging and recovery hooks

061 GitHub stars

사용 사례

01Preventing full-app crashes by isolating component failures in specific UI sections

02Implementing 'Try Again' and reset functionality for recoverable network or render errors

03Setting up centralized error monitoring and logging for React 19 applications

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