Our review

Provides standardized patterns for handling API errors, showing user-friendly messages, implementing retry logic, and using error boundaries in frontend applications.

Strengths

Clear API error categorization by status code
Includes React Error Boundary component pattern
Covers both user-facing messages and debugging logs
Retry logic for transient failures

Limitations

Focused on React and TypeScript; may need adaptation for other frameworks
Does not cover state management for errors (e.g., Redux, Zustand)
Retry logic shown generically without exponential backoff specifics

When to use it

When building or refactoring frontend error handling to ensure consistency and user-friendly experiences.

When not to use it

For simple static sites without API calls or complex error states.

Examples

API error handling with retry

Given this fetch call, add error handling with retry logic for transient errors and proper error categorization.

React error boundary

Create a React Error Boundary component that catches errors and displays a fallback UI, with logging to console.

User-friendly error messages

Transform this raw API error into a user-friendly message with different handling for 404, 500, and network errors.

name: frontend-data-error-handling description: Standardized guidelines and patterns for Frontend Data Error Handling.

Frontend Data Error Handling

When to use this skill

Handling API errors
Showing error messages
Implementing retry logic
Error boundaries

Workflow

[ ] Catch errors at API layer
[ ] Show user-friendly messages
[ ] Log errors for debugging
[ ] Implement retry for transient errors
[ ] Use error boundaries for crashes

Instructions

API Error Handling

try {
  const data = await fetchUser(id);
  return data;
} catch (error) {
  if (error.response?.status === 404) {
    throw new NotFoundError('User not found');
  }
  if (error.response?.status >= 500) {
    throw new ServerError('Server error, please try again');
  }
  throw error;
}

React Error Boundary

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback error={this.state.error} />;
    }
    return this.props.children;
  }
}

Resources

Show friendly messages to users
Log detailed errors for debugging
Retry transient failures

Frontend Error Handling

Recommended for