How do I handle errors in async code or event handlers?

The skill provides patterns for using the showBoundary hook from react-error-boundary to manually trigger boundaries for errors that occur outside the render phase.

Can I use this for server-side rendering (SSR)?

Error boundaries primarily handle client-side rendering errors. While this skill focuses on client-side patterns, it notes that SSR errors should typically be handled at the framework level.

Does it require external libraries?

It covers both native React class component implementations and the industry-standard react-error-boundary library, allowing you to choose the best fit for your project.

Does this skill support React 19?

Yes, it includes patterns for React 19 createRoot options such as onCaughtError and onUncaughtError for centralized error tracking.

React Error Boundaries & Handling

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

byagents-inc

•

Analytics & Monitoring

Implements robust React error boundary patterns to prevent application crashes and provide accessible fallback interfaces.

This skill provides specialized guidance for implementing React Error Boundaries using both native class-based components and the react-error-boundary library. It focuses on the philosophy of isolation, ensuring that a failure in one component doesn't crash the entire application. Users will find standardized patterns for render-phase error catching, commit-phase logging, and advanced React 19 features like centralized error hooks and owner stack capturing. It emphasizes recovery via reset/retry logic and ensures all fallback UIs meet accessibility standards with proper ARIA labeling.

Key Features

01Asynchronous error propagation using the showBoundary hook

02Strategic boundary placement strategies for granular feature isolation

031 GitHub stars

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

05React 19 centralized error logging via createRoot options

06Accessible fallback UI patterns with ARIA support and retry functionality

Use Cases

01Implementing programmatic 'Try Again' buttons for recoverable network failures

02Preventing a single UI component failure from crashing an entire dashboard

03Integrating frontend error tracking with observability services like Sentry

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

Key Features

01Asynchronous error propagation using the showBoundary hook

02Strategic boundary placement strategies for granular feature isolation

031 GitHub stars

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

05React 19 centralized error logging via createRoot options

06Accessible fallback UI patterns with ARIA support and retry functionality

Use Cases

01Implementing programmatic 'Try Again' buttons for recoverable network failures

02Preventing a single UI component failure from crashing an entire dashboard

03Integrating frontend error tracking with observability services like Sentry

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