Erreurs JavaScript

Erreurs JavaScript - Lancer (throw) et Tenter de Capter (try...catch)

L’instruction try vous permet de tester un bloc de code pour d’éventuelles erreurs pendant son exécution.

L’instruction catch vous permet de définir un bloc de code à exécuter si une erreur se produit dans le bloc try.

L’instruction throw vous permet de créer des erreurs personnalisées. La meilleure pratique est de lancer des objets Error.

L’instruction finally vous permet d’exécuter du code après try et catch, qu’une erreur se soit produite ou ait été capturée ou non.

Les erreurs sont inévitables !

Lors de l’exécution de code JavaScript, diverses erreurs peuvent survenir. Il peut s’agir d’erreurs de syntaxe, d’erreurs d’exécution ou d’erreurs logiques.

Les erreurs peuvent provenir d’erreurs de programmeur, d’entrées utilisateur invalides, de problèmes réseau ou d’autres situations inattendues :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Error Handling Example</title>
</head>
<body>
  <p id="demo"></p>
  <script>
    try {
      // Provoque intentionnellement une ReferenceError : nonExistentFunction n'est pas défini
      nonExistentFunction("Welcome guest!");
    } catch (error) {
      const demoElement = document.getElementById("demo");
      // C'est une bonne pratique d'afficher error.message. Vous pouvez également journaliser error.name ou l'objet d'erreur complet.
      demoElement.textContent = `Caught an error: ${error.message}`;
      console.error(error); // Journaliser également l'erreur complète dans la console pour le débogage
    }
  </script>
</body>
</html>

Dans l’exemple ci-dessus, nous avons tenté d’appeler une fonction qui n’existe pas, provoquant une ReferenceError.

Le bloc catch ‘capture’ cette erreur et exécute du code pour la gérer, comme l’affichage d’un message convivial pour l’utilisateur.

JavaScript try et catch

L’instruction try définit un bloc de code à surveiller pour les erreurs.

L’instruction catch définit un bloc de code à exécuter si une erreur se produit dans le bloc try. Le bloc catch reçoit un objet d’erreur (souvent nommé err ou error) contenant des détails sur l’erreur (par exemple, error.name, error.message).

Les instructions try et catch vont par paires :

try {
  // Bloc de code à essayer
} catch (error) {
  // Bloc de code pour gérer les erreurs
  // 'error' est un objet Error
}

Les types d’erreurs courants incluent Error, SyntaxError, ReferenceError, TypeError, RangeError et URIError. Vous pouvez vérifier error.name ou error instanceof TypeError pour gérer les erreurs spécifiques différemment.

JavaScript lance des erreurs

Lorsqu’une erreur d’exécution se produit, JavaScript arrête normalement l’exécution et ‘lance’ un objet d’erreur.

Si une erreur est lancée et n’est pas capturée par un bloc try...catch, le script se terminera (ou dans les navigateurs, le chemin d’exécution actuel s’arrêtera et une erreur sera journalisée dans la console).

L’instruction throw

L’instruction throw vous permet de créer et de lancer vos propres erreurs personnalisées.

Ceci est techniquement appelé ‘lancer une exception’.

Bien que vous puissiez lancer n’importe quelle valeur (comme une chaîne ou un nombre), il est fortement recommandé de lancer des objets Error ou des objets héritant de Error. Cela fournit des informations d’erreur plus cohérentes (comme les traces de pile).

// Ancienne méthode (à éviter) :
// throw "Too big";
// throw 500;

// Meilleure pratique moderne :
throw new Error("Something went wrong!");
throw new TypeError("Invalid type provided.");

// Pour des erreurs plus spécifiques, vous pouvez créer des classes d'erreur personnalisées :
class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}
// throw new NetworkError("Échec de la connexion.");

L’utilisation de throw avec try et catch vous permet de gérer le flux du programme et de fournir des messages d’erreur significatifs ou une logique de récupération.

Exemple de validation d’entrée

Cet exemple démontre la validation des entrées utilisateur. Si l’entrée est invalide, un objet Error est lancé et capturé.

Le bloc catch affiche ensuite un message d’erreur personnalisé basé sur l’erreur lancée :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Input Validation</title>
</head>
<body>
  <p>Veuillez entrer un nombre entre 5 et 10 :</p>
  <input id="valueInput" type="text" /> <!-- Changé en type="text" pour une démonstration de validation plus large -->
  <button type="button" onclick="validateInput()">Tester l'entrée</button>
  <p id="messageArea"></p>

  <script>
    function validateInput() {
      const messageElement = document.getElementById("messageArea");
      const inputElement = document.getElementById("valueInput");
      messageElement.textContent = ""; // Effacer les messages précédents

      try {
        const inputValue = inputElement.value.trim();

        if (inputValue === "") {
          throw new Error("L'entrée ne peut pas être vide.");
        }

        const number = Number(inputValue);

        if (isNaN(number)) {
          throw new Error("L'entrée n'est pas un nombre valide.");
        }

        if (number < 5) {
          throw new Error("La valeur est trop basse. Le minimum est 5.");
        }

        if (number > 10) {
          throw new Error("La valeur est trop élevée. Le maximum est 10.");
        }

        messageElement.textContent = "L'entrée est valide !";
      } catch (error) {
        messageElement.textContent = `Erreur : ${error.message}`;
        console.error("Validation failed:", error); // Journaliser également l'erreur complète dans la console pour le débogage
      }
    }
  </script>
</body>
</html>

Note : Les attributs d’entrée HTML5 comme type="number", min, max et required fournissent une validation intégrée au navigateur. La validation JavaScript complète cela pour des règles plus complexes ou un meilleur retour utilisateur.

L’instruction finally

L’instruction finally définit un bloc de code qui sera exécuté après les blocs try et catch, qu’une erreur se soit produite ou ait été capturée ou non.

Ceci est utile pour les tâches de nettoyage, telles que la fermeture de fichiers, la libération de ressources ou la réinitialisation des états.

try {
  // Bloc de code à essayer
} catch (error) {
  // Bloc de code pour gérer les erreurs
} finally {
  // Bloc de code à exécuter quel que soit le résultat du try/catch
}

Exemple démontrant finally :

function processData() {
  const inputElement = document.getElementById("valueInput"); // En supposant qu'il existe d'après l'exemple précédent
  const messageElement = document.getElementById("messageArea");
  let result = "Processing completed.";

  try {
    messageElement.textContent = "Tentative de traitement...";
    const value = parseInt(inputElement.value, 10);

    if (isNaN(value)) {
      throw new Error("Impossible de traiter une entrée non numérique.");
    }
    if (value < 0) {
      throw new Error("Impossible de traiter des valeurs négatives.");
    }
    // Simuler le traitement
    result = `Valeur traitée : ${value * 2}`;
    messageElement.textContent = result;

  } catch (error) {
    messageElement.textContent = `Erreur pendant le traitement : ${error.message}`;
    result = "Le traitement a échoué."; // Mettre à jour le résultat en fonction de l'erreur
  } finally {
    // Ce bloc s'exécute toujours
    console.log("Phase de nettoyage : Opération terminée. Résultat : " + result);
    // Exemple : inputElement.value = ""; // Effacer le champ d'entrée après la tentative
  }
}
// Pour tester, appelez processData() après la saisie de l'utilisateur. Assurez-vous que les éléments HTML existent.

Pour une gestion des erreurs plus avancée, notamment avec les opérations asynchrones, explorez les Promises et async/await qui ont leurs propres mécanismes de gestion des erreurs (.catch() pour les Promises, try/catch pour async/await).

Pour en savoir plus : MDN : try…catch