error-handling-rules

What problem does it solve?

Many React applications lack a consistent, production-ready strategy to surface, classify, and recover from runtime and API errors, leading to poor user experience and unreliable monitoring. This Skill provides patterns and guardrails to ensure errors are handled at route, component, and network layers with clear user messaging and observability.

Core Features & Use Cases

• Error Boundary patterns with a configurable reset to contain render-time failures without crashing the entire app.
• Route-level handling for Next.js App Router and React Router including not-found pages and errorElement fallbacks.
• Typed Result pattern and AppError class with retryable flags and localized userMessage to standardize error propagation.
• Sentry integration with environment filtering, beforeSend logic, user/context tagging, and contextual capture for diagnostics.
• Mutation and query strategies: toast notifications for recoverable errors, setError for form validation responses, and exponential backoff retry policies.

Quick Start

Use the error-handling-rules skill to implement Error Boundaries, typed AppError, Sentry integration, retry strategies, and toast notifications in a React or Next.js project.