Gérer les erreurs avec try…catch

Lorsque ton code comporte une part d’incertitude, il peut être utile de gérer les erreurs potentielles. Lorsque tu utilises une API, il est possible qu’elle soit hors ligne ou que la requête échoue pour une autre raison.

Par défaut, dès qu’une erreur survient, la suite du code n’est pas lue et le contenu de l’erreur s’affiche en rouge dans la console. Si tu veux personnaliser ce qui se passe en cas d’erreur, tu peux utiliser un bloc try…catch.

Dans le try, tu mets le code qui peut potentiellement échouer, et dans le catch, tu décris le comportement que tu souhaites en cas d’erreur.

const titleDiv = document.getElementById("title")
try {
  const response = await fetch("/api/fantasy-name")
  const data = await response.json()
  titleDiv.innerHTML = data.title
} catch (error) {
  titleDiv.innerHTML = "Erreur : " + error.message
}

Dans cet exemple, si l’API est hors ligne ou renvoie une réponse au format invalide, response.json() ne saura pas traiter la réponse et renverra une erreur. Le code dans le catch sera alors exécuté. Par contre, si le try réussit entièrement, le catch sera ignoré.

Idéalement, avant d’interpréter la réponse avec response.json(), tu pourrais vérifier si la requête a réussi. C’est indiqué par la propriété response.ok qui peut être true ou false. Si la requête a échoué, la propriété response.status contient le code d’erreur, par exemple « 404 » si la page n’existe pas. Tu peux utiliser ce code pour générer ton propre message d’erreur qui sera capturé par le catch.

const titleDiv = document.getElementById("title")
try {
  const response = await fetch("/api/fantasy-name")
  if (!response.ok) {
    throw new Error("Erreur " + response.status + " 😢")
  }
  const data = await response.json()
  titleDiv.innerHTML = data.title
} catch (error) {
  titleDiv.innerHTML = error.message
}

Gérer les erreurs demande une certaine rigueur qui peut être difficile à acquérir au début, mais cela peut grandement améliorer l’expérience utilisateur ! Lorsque tu débutes, n’hésite pas à faire relire ton code par un assistant IA qui pourra t’aider à ajouter les blocs try…catch là où c’est nécessaire.