# Error Handling

> Skill: Frontend Error Handling

- Skill: `sawrus/error-handling` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sawrus/error-handling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sawrus/error-handling/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: sawrus (https://skillmd.com/u/sawrus)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/sawrus/error-handling

---

# Skill: Frontend Error Handling

## When to load

When adding error boundaries, handling async errors, or building error UI states.

## Error Boundary

```tsx
class ErrorBoundary extends React.Component<
  { fallback: React.ComponentType<{ error: Error; reset: () => void }> },
  { error: Error | null }
> {
  state = { error: null };

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    logger.error('UI Error', { error: error.message, componentStack: info.componentStack });
  }

  render() {
    if (this.state.error) {
      const Fallback = this.props.fallback;
      return <Fallback error={this.state.error} reset={() => this.setState({ error: null })} />;
    }
    return this.props.children;
  }
}

// Usage:
<ErrorBoundary fallback={RouteErrorFallback}>
  <UserDashboard />
</ErrorBoundary>
```

## Error Classification

```ts
export class ApiError extends Error {
  constructor(public status: number, public body: unknown) {
    super(`API Error ${status}`);
  }
}

// In components:
if (error instanceof ApiError) {
  if (error.status === 401) return <LoginRedirect />;
  if (error.status === 403) return <ForbiddenMessage />;
  if (error.status === 404) return <NotFound />;
}
return <GenericError message={error.message} />;
```