Partie 3 : Gestion d’erreurs (try…catch)

Dans la récupération de données en ligne, beaucoup de choses peuvent mal se passer :

• Le serveur distant est en panne
• L’utilisateur final n’a plus de connexion Internet
• L’orthographe de l’URL est mauvaise (erreur 404)

C’est pourquoi toute bonne requête réseau dans JavaScript doit être “sécurisée” dans un bloc try / catch.

try {
    // 1. On ESSAIE (try) d'exécuter ce code
    const response = await fetch('https://dummyjson.com/users?limit=24');

    // 2. Vérification manuelle du statut HTTP
    if (!response.ok) {
        throw new Error(`Erreur HTTP: ${response.status}`);
    }

    const data = await response.json();
    UserData = data.users;
} catch (error) {
    // 3. En cas d'échec dans le 'try', on ATTRAPE (catch) l'erreur ici.
    console.error('Impossible de récupérer les utilisateurs :', error);
    const app = document.getElementById('app');
    app.innerHTML = `<p style="color:red">Erreur de chargement des données. 
    <br><small>Vérifiez votre connexion</small></p>`;
}

1. Comment fonctionne try...catch ?

1. Le code entre dans les accolades de try { ... }.
2. S’il n’y a aucun problème, tout est exécuté et JavaScript ignore complètement le catch.
3. S’il y a un plantage réseau ou une erreur n’importe où dans le bloc try, JavaScript arrête immédiatement le try en cours et “saute” directement dans les accolades du bloc catch { ... }.
4. La variable error (entre parenthèses du catch) contient les informations techniques sur le plantage.

2. Le rôle du !response.ok

Un comportement trompeur de fetch() : Si le serveur répond qu’une page n’existe pas (erreur 404), la fonction fetch() considère cela comme “une réussite” puisqu’elle a réussi à parler au serveur ! Elle n’ira donc pas d’elle-même dans le catch.

C’est pour cela que nous utilisons : if (!response.ok). response.ok est un booléen (vrai/faux) fourni par fetch(). Si le serveur renvoie un code entre 200 et 299 (succès), il vaut true. Sinon (404, 500…), il vaut false. Le mot clé throw force alors une erreur “manuellement” pour forcer JavaScript à sauter dans le bloc catch.

C’est ainsi que dans notre catch, nous pouvons afficher de manière propre un joli message d’erreur rouge à notre utilisateur sur son écran !