Gestion des erreurs : codes d’état HTTP
Associez les codes d’état HTTP à des messages destinés aux utilisateurs, distinguez les erreurs réseau des erreurs serveur et implémentez une logique de nouvelle tentative.
Gestion des erreurs : codes d’état HTTP est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Catégories des codes d’état HTTP
Les codes d’état sont regroupés selon leur premier chiffre : 2xx succès, 3xx redirection, 4xx erreur côté client (de votre fait), 5xx erreur côté serveur (de leur fait).
Codes 2xx courants
200 OK : succès avec un corps. 201 Créée : ressource créée (renvoie souvent la nouvelle ressource). 204 Aucun contenu : succès sans corps (DELETE, parfois PUT).
Codes 4xx courants
400 Requête incorrecte : entrée mal formée. 401 Non autorisé : authentification absente ou invalide. 403 Interdit : authentifié, mais non autorisé. 404 Introuvable : la ressource n’existe pas. 409 Conflit : conflit d’état (adresse e-mail en double). 422 Entité non traitable : la validation a échoué.
Codes 5xx courants
500 Erreur interne du serveur : erreur générique du serveur. 502 Mauvaise passerelle : le service en amont a échoué. 503 Service indisponible : serveur surchargé ou hors service. 504 Délai d’expiration de la passerelle : le service en amont n’a pas répondu à temps.
Associer les codes aux messages utilisateur
Traduisez les codes d’état en messages d’interface utiles — n’affichez jamais « Erreur 500 » à l’utilisateur.
function userMessage(status) {
if (status === 401) return 'Please sign in to continue.';
if (status === 403) return "You don't have permission for that.";
if (status === 404) return 'Not found.';
if (status === 409) return 'Already exists.';
if (status === 422) return 'Please check the form for errors.';
if (status >= 500) return 'Something went wrong. Try again in a moment.';
return 'Something unexpected happened.';
}Erreurs réseau et erreurs serveur
Un échec de fetch (mode hors ligne, échec DNS, CORS) diffère d’une réponse d’erreur du serveur. Les erreurs réseau lèvent une exception ; les erreurs serveur renvoient un objet Response avec un statut >= 400.
try {
const res = await fetch('/api/users');
if (!res.ok) {
// Server replied but with error status
throw new Error(`Server error ${res.status}`);
}
return res.json();
} catch (err) {
if (err instanceof TypeError) {
// Network failure — fetch couldn't reach server
throw new Error('Network error. Check your connection.');
}
throw err;
}Logique de nouvelle tentative pour les erreurs 5xx et réseau
Les erreurs serveur et les défaillances réseau sont souvent temporaires. Réessayez avec un délai qui augmente de façon exponentielle.
async function fetchWithRetry(url, options, maxRetries = 3) {
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
const res = await fetch(url, options);
if (res.ok || (res.status >= 400 && res.status < 500)) return res;
// 5xx — retryable
} catch (err) {
if (attempt === maxRetries - 1) throw err;
}
await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
}
}Ne réessayez pas après une erreur 4xx
Les erreurs 4xx viennent de votre côté — réessayer n’aidera pas. Réessayez uniquement après une erreur 5xx ou une défaillance réseau. L’exception est le code 429 (Trop de requêtes), qui inclut souvent un en-tête Retry-After.
Lire l’en-tête Retry-After
Les serveurs peuvent inclure Retry-After pour les codes 429 et 503 — attendez ce nombre de secondes avant de réessayer.
const res = await fetch('/api/limited');
if (res.status === 429) {
const after = parseInt(res.headers.get('Retry-After') || '5', 10);
await new Promise(r => setTimeout(r, after * 1000));
return fetch('/api/limited');
}Afficher les erreurs de validation
Les réponses 422 contiennent généralement un corps JSON listant les erreurs associées aux champs. Affichez-les à côté du champ de formulaire concerné.
// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }
if (res.status === 422) {
const { errors } = await res.json();
Object.entries(errors).forEach(([field, msg]) => {
setFieldError(field, msg);
});
}Télémétrie : consigner les erreurs dans un service
Envoyez les erreurs à Sentry, Datadog ou LogRocket afin de pouvoir les voir en production. Incluez l’URL de la requête, la méthode, le statut et un corps nettoyé (aucun secret).
Proposer une récupération utile
Chaque interface d’erreur devrait offrir à l’utilisateur une issue : un bouton pour réessayer, un lien vers l’assistance ou un moyen de revenir à une page fonctionnelle. Les écrans d’erreur sans issue frustrent les utilisateurs.
Vérification rapide
Une API renvoie une erreur 422 Entité non traitable. Qu’est-ce que cela signifie généralement ?
Récapitulatif : gestion des erreurs HTTP
2xx succès, 3xx redirection, 4xx erreur côté client, 5xx erreur côté serveur. Associez les codes à des messages compréhensibles pour l’utilisateur. Distinguez les erreurs réseau (TypeError renvoyée par fetch) des erreurs serveur (res.ok false). Réessayez après une erreur 5xx ou une défaillance réseau avec un délai croissant de façon exponentielle ; ne réessayez jamais après une erreur 4xx (sauf 429 avec Retry-After). Affichez les erreurs de champ 422. Consignez les erreurs dans un service comme Sentry.
Questions Fréquemment Posées
La leçon « Gestion des erreurs : codes d’état HTTP » est-elle gratuite ?
Oui — le texte complet de « Gestion des erreurs : codes d’état HTTP » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gestion des erreurs : codes d’état HTTP » ?
Associez les codes d’état HTTP à des messages destinés aux utilisateurs, distinguez les erreurs réseau des erreurs serveur et implémentez une logique de nouvelle tentative. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Gestion des erreurs : codes d’état HTTP » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- API Fetch : GET, POST, PUT et DELETE
- Axios : intercepteurs et URL de base
- Gestion des erreurs : codes d’état HTTP
- SWR et React Query pour la mise en cache des données