Does this skill work with any React framework?

While the core error handling patterns are broadly applicable to React, this skill is specifically optimized for projects using Vite, React Router, and TanStack Query.

What are 'granular error boundaries'?

This is the practice of wrapping specific UI components or features in individual error boundaries, preventing a single failure in a non-critical component from crashing the entire application.

How does it improve production debugging?

It provides specific implementation rules for Sentry integration and source mapping, ensuring that production errors are reported with enough context for developers to fix them quickly.

Does it include UI patterns for errors?

Yes, it includes patterns for user-facing toast notifications and fallback UI components to ensure users are informed when an error occurs without breaking the workflow.

React Error Handling & Monitoring

Name: React Error Handling & Monitoring
Author: ng-hai

byng-hai

•

分析与监控

Implements production-grade error handling patterns for React applications to ensure fault tolerance and seamless user experiences.

This skill provides a comprehensive framework for managing errors within React applications built with Vite, React Router, and TanStack Query. It guides developers through the entire error lifecycle, from implementing granular React Error Boundaries and centralized API interceptors to configuring Sentry for production tracking and toast notifications for user feedback. By following these best practices, teams can ensure their applications degrade gracefully under failure, providing a resilient and professional user experience even when unexpected issues occur.

主要功能

01User-facing error notification systems using toast patterns

02Graceful degradation strategies for non-critical component failures

03Centralized API error handling using TanStack Query interceptors

044 GitHub stars

05Granular React Error Boundaries for feature-level isolation

06Production error tracking and monitoring with Sentry integration

使用场景

01Refining existing error handling to prevent full-page crashes during API failures

02Integrating Sentry with source maps for debugging production issues in real-time

03Setting up comprehensive error tracking in a new Vite and React project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude error-handling

For use in Claude.ai and ChatGPT