code-check-error-boundaries

Audit application code for missing error boundaries across routes, mutations, and async flows.

22|3|Updated Jul 28, 2024

Search Tags:#React forms #error boundaries #route loaders #mutation error handling #UX recovery #async failures #silent corruption

Ready to run

npx skills add https://github.com/webdevcody/go-mailing-list --skill code-check-error-boundaries

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: code-check-error-boundaries
Source: https://github.com/webdevcody/go-mailing-list/tree/main/.claude/skills/code-check-error-boundaries
Command: npx skills add https://github.com/webdevcody/go-mailing-list --skill code-check-error-boundaries

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents user-facing blank screens, infinite spinners, silent corruption, and non-recoverable UI states by auditing common failure paths after new routes, mutations, and async flows are added.

Core Features & Use Cases

Checks loader and route error coverage: Finds TanStack/Router route loaders that lack an errorComponent, which otherwise can fail silently.
Verifies mutation failure UX: Ensures useMutation calls either define onError or rely on a global default so errors don’t vanish behind generic or missing UI feedback.
Validates submit and async resilience: Flags form submit buttons that aren’t disabled during pending requests, and identifies fire-and-forget async promise rejections in background/webhook-style code paths.
Reviews error messaging with recovery: Detects generic error toasts that provide no retry affordance, leaving users without a path forward.

Quick Start

Run code-check-error-boundaries to audit the failure paths introduced by your latest UI changes and produce a ranked list of missing error handling and user-recovery gaps.

Frequently Asked Questions about code-check-error-boundaries

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

FAQPage Schema

How do I prevent blank screens from missing React error boundaries?▼

Prevent blank screens by auditing route loaders for missing errorComponent definitions and ensuring React mutations have onError handlers or a global fallback to catch silent failures.

Why do TanStack route loaders fail silently without an errorComponent?▼

TanStack route loaders fail silently without an errorComponent because the router lacks a fallback UI to render, causing unhandled rejections that result in blank screens or infinite spinners.

How do I audit React mutation error handling for unrecoverable UI states?▼

Audit React mutation error handling by checking useMutation calls for onError definitions, verifying submit button pending-state safeguards, and flagging generic error toasts that lack retry affordances.

What causes silent corruption in fire-and-forget async callbacks?▼

Silent corruption in fire-and-forget async callbacks occurs when unhandled promise rejections in background or webhook-style code paths bypass global fallbacks, leaving users without UI feedback or recovery paths.

Do I need manual error handling if my React app has a global error boundary?▼

A global error boundary is insufficient because route loaders, mutations, and fire-and-forget callbacks still require local errorComponent definitions and onError handlers to prevent non-recoverable UI states.

What is the best way to add UX recovery affordances for async failures?▼

The best way to add UX recovery for async failures is to detect generic error toasts lacking retry options and implement targeted error boundaries with explicit recovery actions for routing and mutations.