Notre avis

Fournit des modèles standardisés pour gérer les erreurs d'API, afficher des messages conviviaux, implémenter une logique de réessai et utiliser des limites d'erreur dans les applications frontend.

Points forts

Catégorisation claire des erreurs API par code de statut
Inclut le modèle de composant Error Boundary React
Couverture à la fois des messages utilisateur et des journaux de débogage
Logique de réessai pour les échecs transitoires

Limites

Centré sur React et TypeScript ; nécessite une adaptation pour d'autres frameworks
Ne couvre pas la gestion d'état des erreurs (Redux, Zustand, etc.)
Logique de réessai générique sans backoff exponentiel spécifique

Quand l'utiliser

Lors de la construction ou de la refactorisation de la gestion des erreurs frontend pour assurer la cohérence et une expérience utilisateur agréable.

Quand l'éviter

Pour des sites statiques simples sans appels API ou états d'erreur complexes.

Exemples

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

Gestion des erreurs frontend

Recommandé pour