frontend-error-handling

Implement error handling patterns for React applications with interceptors and boundaries.

1|Updated Jan 2, 2025
One-click install
npx skills add https://github.com/allenlin90/eridu-services --skill frontend-error-handling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-error-handling
Source: https://github.com/allenlin90/eridu-services/tree/main/.agent/skills/frontend-error-handling
Command: npx skills add https://github.com/allenlin90/eridu-services --skill frontend-error-handling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides structured patterns for handling errors in React applications, including API error interceptors, error boundaries, and user-friendly messaging.

Core Features & Use Cases

  • API client interceptors for auth and network errors
  • Global and component-level error handling with boundaries, query errors, and user notifications
  • User-friendly error displays and robust failure management

Quick Start

Integrate a global API error interceptor and wrap routes with an ErrorBoundary to ensure resilient UI.

Frequently Asked Questions about frontend-error-handling

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

FAQPage Schema
How do I handle API errors globally in React applications?

Global API error handling in React uses client interceptors to catch authentication and network failures, ensuring consistent failure management before responses reach UI components.

What is the best way to manage data fetching errors with TanStack Query?

Manage TanStack Query errors by configuring query error handling patterns that capture fetch failures and trigger user-friendly toast notifications for robust frontend failure management.

How do error boundaries work for route rendering in React?

Error boundaries for route rendering work by wrapping React routes to catch JavaScript errors in component trees, preventing total UI crashes and displaying fallback error UI.

Can I use toast notifications for form validation errors in React?

Yes, you can use toast notifications to display form validation errors in React, providing immediate, user-friendly feedback directly to users when input validation fails.

Does global error handling work with both component-level and route-level failures?

Yes, global error handling works with both levels by combining API interceptors and error boundaries to manage component-level exceptions and route rendering failures across the application.