Can Error Boundaries catch asynchronous errors?

Standard Error Boundaries do not catch async errors, but this skill provides patterns using the showBoundary hook to manually propagate async errors to your boundaries.

What is the importance of resetKeys in error boundaries?

resetKeys allow a boundary to automatically reset and attempt to re-render its children when specific dependencies, such as a URL path or a unique ID, change.

Why should I use granular error boundaries instead of one root boundary?

Granular boundaries provide isolation; if a single widget fails, only that widget shows a fallback UI while the rest of the application remains functional.

Does this skill support React 19 features?

Yes, it includes patterns for React 19's createRoot error options such as onCaughtError, onUncaughtError, and onRecoverableError for centralized logging.

React Error Handling & Boundaries

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

byagents-inc

0•

分析与监控

Implements robust React Error Boundary patterns to prevent application crashes and provide graceful fallback UIs.

This skill provides comprehensive guidance for implementing Error Boundaries in React applications, ranging from native class-based components to the react-error-boundary library and modern React 19 hooks. It emphasizes isolation through granular boundary placement, accessibility with ARIA roles, and recovery through reset/retry mechanisms. By following these patterns, developers can ensure that individual component failures are contained, preventing entire application crashes while providing clear feedback and integrated logging for production monitoring.

主要功能

010 GitHub stars

02Integration with the react-error-boundary library

03Async error propagation via the showBoundary hook

04Accessible fallback UI patterns with reset/retry logic

05Native class-based Error Boundary implementations

06React 19 createRoot error logging and recovery hooks

使用场景

01Isolating failures in complex dashboard widgets to prevent full-page crashes

02Implementing automated retries and recovery for UI components

03Centralizing client-side error logging for production monitoring services

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

主要功能

010 GitHub stars

02Integration with the react-error-boundary library

03Async error propagation via the showBoundary hook

04Accessible fallback UI patterns with reset/retry logic

05Native class-based Error Boundary implementations

06React 19 createRoot error logging and recovery hooks

使用场景

01Isolating failures in complex dashboard widgets to prevent full-page crashes

02Implementing automated retries and recovery for UI components

03Centralizing client-side error logging for production monitoring services

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