Are the fallback UI patterns accessible?

Absolutely. The skill mandates using role='alert' on all fallback UI components to ensure screen readers properly announce application errors to users.

Does it provide support for third-party libraries?

Yes, it specifically covers patterns for the popular react-error-boundary library, including FallbackComponent usage and resetKeys for automatic recovery.

Does this skill support React 19?

Yes, it includes patterns for React 19 createRoot options like onCaughtError, onUncaughtError, and captureOwnerStack for enhanced debugging and centralized logging.

Can error boundaries catch async errors?

Native React error boundaries do not catch async errors, but this skill provides patterns using the showBoundary hook to manually propagate async failures to the nearest boundary.

Why should I use granular boundaries instead of a single root boundary?

Granular boundaries isolate failures to specific feature sections (like a sidebar or a widget), allowing the rest of the application to remain functional for the user.

React Error Boundary & Recovery Patterns

Name: React Error Boundary & Recovery Patterns
Author: agents-inc

byagents-inc

0•

분석 및 모니터링

Implements resilient React error boundary patterns with fallback UI and recovery logic to prevent application crashes.

This skill provides comprehensive guidance for implementing React error boundaries using both native class components and the react-error-boundary library. It emphasizes isolation through granular boundary placement, accessibility-compliant fallback UIs, and robust recovery mechanisms like reset keys and retry logic. Additionally, it covers React 19+ features such as centralized error logging via createRoot and enhanced debugging with captureOwnerStack, ensuring frontend applications degrade gracefully rather than crashing entirely.

주요 기능

01Granular boundary placement strategies for feature-level isolation

020 GitHub stars

03Native class-based error boundary implementation with lifecycle methods

04Manual error triggering for async code and event handlers via showBoundary

05Production-ready patterns for the react-error-boundary library

06React 19 createRoot hooks for centralized error logging and observability

사용 사례

01Providing accessible 'Try Again' buttons and fallback UI for specific failed widgets

02Preventing a single component failure from crashing an entire dashboard or application

03Centralizing error reporting to monitoring services for both sync and async React 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 boundary placement strategies for feature-level isolation

020 GitHub stars

03Native class-based error boundary implementation with lifecycle methods

04Manual error triggering for async code and event handlers via showBoundary

05Production-ready patterns for the react-error-boundary library

06React 19 createRoot hooks for centralized error logging and observability

사용 사례

01Providing accessible 'Try Again' buttons and fallback UI for specific failed widgets

02Preventing a single component failure from crashing an entire dashboard or application

03Centralizing error reporting to monitoring services for both sync and async React 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