skills.rest
mauriciodelrio
mauriciodelrioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

error-handling-rules

Implement typed error handling with retries and Sentry for React apps.

3|Updated Apr 12, 2026
Search Tags:#react#nextjs#error-handling#sentry#retry#toast#error-boundary
One-click install
npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill error-handling-rules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: error-handling-rules
Source: https://github.com/mauriciodelrio/delriodev-skills/tree/main/es-skills/software/frontend/error-handling-rules
Command: npx skills add https://github.com/mauriciodelrio/delriodev-skills --skill error-handling-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about error-handling-rules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle errors in Next.js App Router using error boundaries?▼

Next.js App Router error handling uses error.tsx and global-error.tsx files as route-level boundaries to catch render failures. This pattern provides configurable reset functionality to contain crashes without losing the entire application state.

What is the best way to standardize API error handling in React with typed error classes?▼

Standardize React API error handling using a typed Result pattern and AppError class with retryable flags and userMessage properties. This standardization ensures consistent error propagation and consumable user messaging across mutation and query layers.

Does Sentry integration work with React Error Boundaries for filtering runtime errors?▼

Sentry integration works with React Error Boundaries using beforeSend logic to filter errors by environment, apply user and context tagging, and capture contextual diagnostics for runtime failures, ensuring reliable production monitoring.

Can I use TanStack Query retry strategies with exponential backoff for mutation errors?▼

TanStack Query retry strategies support mutation and query errors using exponential backoff retry policies. Recoverable API errors trigger toast notifications, while form validation responses use setError to display field-specific messages.

How do you set up React Router errorElement and catch-all routes for SPA error handling?▼

Vite SPA error handling uses React Router errorElement and catch-all routes to manage route-level failures. This approach pairs with client-side ErrorBoundary components to catch render failures and provide fallback UI with reset capabilities.

Why do I need typed AppError classes with retryability metadata in my React application?▼

Typed AppError classes with retryability metadata are needed to classify runtime and API errors consistently. This classification determines whether errors trigger exponential backoff retries, toast notifications, or form validation messages.

Related Skills

Explore More Software Engineering Skills→
DayoptDayopt

error-handling

Centralize error normalization, logging, and user notifications in Next.js/React applications.

Official
Advanced
lapc506lapc506
4

Error Tracking & Crash Reporting

Implement Sentry and Firebase Crashlytics error tracking for Flutter applications.

Community
Advanced
planetaryescapeplanetaryescape

auto-generated-tanstack-query-patterns

Optimize React data fetching with TanStack Query patterns for polling and mutations.

Official
Advanced
nikivdevnikivdev
814

better-result-adopt

Migrate TypeScript try/catch error handling to typed Result-based errors.

Community
Advanced