add-error-boundary

What problem does it solve?

This Skill provides standardized route error handling by introducing reusable error boundaries for React Router 7. It prevents blank pages and confusing crashes when a route encounters a 404, 403, or unexpected error, delivering a consistent, user-friendly UX.

Core Features & Use Cases

• Reusable Route Boundary: A single ErrorBoundary component that gracefully renders Not Found, Access Denied, and generic error states for routes.
• Loader Error Handling: Demonstrates throwing route errors with data({ status }) inside loaders to trigger the boundary UI.
• Root + Route Boundaries: Guidance to place a root ErrorBoundary and add route-specific boundaries where custom UX is required.

Quick Start

• Create an ErrorBoundary component following the pattern described and export it for route usage.
• Wrap your routes in app/root.tsx with the ErrorBoundary to catch route errors.
• In loaders, use data('... not found or forbidden', { status: 404 or 403 }) to trigger the boundary UI.