Cours JavaScript et TypeScript · Module 5: JavaScript avancé

Les types d'erreurs en JavaScript

7 min de lecture
Dans cette leçon13

À Jurassic Park, classifier les dinosaures est essentiel pour la sécurité - il faut savoir si on a affaire à un gentil Brachiosaurus ou à un dangereux Velociraptor. De la même façon en JavaScript, reconnaître les différents types d'erreurs aide à diagnostiquer et résoudre efficacement les problèmes dans le code.

Le Dr Ian Malcolm dirait : « Les erreurs... euh... trouvent toujours un chemin. » Et en effet, même dans le code écrit le plus soigneusement, des erreurs peuvent apparaître. C'est pourquoi comprendre leurs types est si important.

Erreurs de syntaxe (SyntaxError)

SyntaxError est le type d'erreur le plus basique - il survient quand le code contient une construction qui viole les règles de syntaxe de JavaScript. C'est comme essayer de communiquer avec un dinosaure dans la mauvaise langue - ça ne marchera pas !

1// Exemples d'erreurs de syntaxe
2function checkDinosaurEnclosure( {  // Parenthèse fermante manquante
3  return isSecure;
4}
5
6const velociraptorCount = 3;
7if (velociraptorCount > 2) {
8  console.log("Trop de raptors !") // Point-virgule manquant (acceptable dans certains contextes)
9} else {
10  console.log("Niveau de sécurité acceptable");
11}

JavaScript signale une SyntaxError immédiatement lors de l'analyse du code, avant qu'il ne s'exécute. Une telle erreur empêche complètement le programme de tourner.

Erreurs de référence (ReferenceError)

ReferenceError apparaît quand on essaie d'accéder à une variable ou une fonction qui n'existe pas ou qui n'est pas accessible dans la portée courante. C'est comme chercher un dinosaure qui s'est échappé de son enclos - il n'est pas là où il devrait être !

1// Exemples de ReferenceError
2function alertSecurityTeam() {
3  // tyrannosaurus n'est pas défini dans cette portée
4  if (tyrannosaurus.isLoose) {
5    sendEmergencyAlert();
6  }
7}
8
9// Utilisation d'une variable avant sa déclaration
10console.log(securityCode); // ReferenceError
11const securityCode = "1234";

Erreurs de type (TypeError)

TypeError survient quand une opération est effectuée sur une valeur du mauvais type, ou quand on essaie d'appeler une propriété ou une méthode qui n'existe pas. C'est comme essayer de traiter un Triceratops herbivore comme un prédateur.

1// Exemples de TypeError
2const dinosaurSpecies = ["Tyrannosaurus", "Velociraptor", "Triceratops"];
3
4// Tentative d'appel d'une méthode sur le mauvais type
5dinosaurSpecies.toUpperCase(); // TypeError: dinosaurSpecies.toUpperCase is not a function
6
7// Tentative d'accès à une propriété de undefined
8const securitySystem = null;
9console.log(securitySystem.isActive); // TypeError: Cannot read property 'isActive' of null
10
11// Tentative d'appel d'une valeur qui n'est pas une fonction
12const dinoCount = 5;
13dinoCount(); // TypeError: dinoCount is not a function

Erreurs de plage (RangeError)

RangeError apparaît quand une valeur numérique est en dehors de la plage autorisée. C'est comme essayer de loger plus de dinosaures dans un enclos qu'il ne peut en contenir en toute sécurité.

1// Exemples de RangeError
2function setDinosaurFeedingSchedule(intervalMs) {
3  // Passer une valeur négative à setTimeout provoquera une RangeError
4  setTimeout(feedDinosaurs, intervalMs);
5}
6
7setDinosaurFeedingSchedule(-1000); // RangeError
8
9// Autre exemple - dépassement de la profondeur de récursion maximale
10function countdownToParkopenning(n) {
11  console.log(n);
12  // L'absence de cas de base provoque RangeError: Maximum call stack size exceeded
13  countdownToParkopenning(n - 1);
14}
15
16countdownToParkopenning(10);

Erreurs d'URI (URIError)

URIError survient quand des paramètres invalides sont passés aux fonctions d'encodage ou de décodage d'URI. C'est un type d'erreur rare, mais il peut se produire lors du traitement de données provenant d'API.

1// Exemple d'URIError
2try {
3  // Tentative de décodage d'une séquence d'URI invalide
4  decodeURIComponent('%'); // URIError: Invalid URI
5} catch (error) {
6  console.error("Erreur de décodage de l'identifiant d'enclos :", error.message);
7}

Erreurs Eval (EvalError)

EvalError était historiquement signalée pour des problèmes liés à la fonction eval(), mais en JavaScript moderne, elle est rarement utilisée, tout comme la fonction eval() devrait être rarement utilisée pour des raisons de sécurité.

Erreurs agrégées (AggregateError)

AggregateError est un type d'erreur plus récent, introduit en ES2020, qui regroupe plusieurs erreurs en une seule. Il est utilisé par Promise.any() lorsque toutes les promesses sont rejetées.

1// Exemple d'AggregateError
2const dinosaurHealthChecks = [
3  Promise.reject(new Error("Raptor 1 : Température élevée")),
4  Promise.reject(new Error("Raptor 2 : Paramètres sanguins anormaux")),
5  Promise.reject(new Error("Raptor 3 : A refusé de coopérer"))
6];
7
8Promise.any(dinosaurHealthChecks).catch(errors => {
9  console.log(errors instanceof AggregateError); // true
10  console.log(errors.message); // "All promises were rejected"
11  console.log(errors.errors); // Tableau contenant toutes les erreurs
12});

Erreurs internes (InternalError)

InternalError est signalée lorsqu'une erreur interne se produit dans le moteur JavaScript, par ex. trop de récursion. Cela ne fait pas partie de la spécification ECMA, mais est disponible dans certaines implémentations (par ex. Firefox).

Créer des types d'erreurs personnalisés

On peut créer nos propres erreurs personnalisées en étendant la classe Error. À Jurassic Park, cela pourrait être utile pour des problèmes spécifiques de gestion du parc.

1// Classe d'erreur personnalisée pour les problèmes de dinosaures
2class DinosaurEscapeError extends Error {
3  constructor(species, location, message) {
4    super(message);
5    this.name = "DinosaurEscapeError";
6    this.species = species;
7    this.location = location;
8    this.timestamp = new Date();
9  }
10}
11
12function checkEnclosure(enclosureData) {
13  if (!enclosureData.isSecure && enclosureData.containsPredators) {
14    throw new DinosaurEscapeError(
15      enclosureData.species,
16      enclosureData.sector,
17      `DANGER ! ${enclosureData.species} s'est échappé de l'enclos du secteur ${enclosureData.sector} !`
18    );
19  }
20}
21
22try {
23  checkEnclosure({
24    species: "Velociraptor",
25    sector: "B4",
26    isSecure: false,
27    containsPredators: true
28  });
29} catch (error) {
30  if (error instanceof DinosaurEscapeError) {
31    console.error(`${error.name} : ${error.message}`);
32    console.error(`Espèce : ${error.species}, Emplacement : ${error.location}`);
33    console.error(`Heure de l'événement : ${error.timestamp}`);
34
35    // Active les procédures de sécurité
36    activateEmergencyProtocols(error.location);
37    evacuateVisitors(error.location);
38    alertSecurityTeam(error);
39  }
40}

Identifier les types d'erreurs

Pour gérer efficacement les erreurs, on doit pouvoir les identifier. Dans le bloc catch, on peut vérifier le type d'erreur avec l'opérateur instanceof ou la propriété name.

1try {
2  // Code pouvant générer différents types d'erreurs
3  const parkSystems = null;
4  console.log(parkSystems.securityStatus); // TypeError
5} catch (error) {
6  if (error instanceof TypeError) {
7    console.error("Erreur de type :", error.message);
8    // Récupération après une erreur de type
9    initializeParkSystems();
10  } else if (error instanceof ReferenceError) {
11    console.error("Erreur de référence :", error.message);
12    // Récupération après une erreur de référence
13  } else {
14    console.error("Erreur inconnue :", error.message);
15    // Procédure de récupération générale
16  }
17}

Propriétés de l'objet Error

Chaque objet d'erreur en JavaScript possède des propriétés standard :

  1. name : Le nom du type d'erreur (par ex. « TypeError », « SyntaxError »)
  2. message : La description de l'erreur
  3. stack : La trace de la pile (informations sur l'endroit du code où l'erreur s'est produite)
1try {
2  const securityCameras = undefined;
3  securityCameras.forEach(camera => camera.activate());
4} catch (error) {
5  console.error("Nom de l'erreur :", error.name); // "TypeError"
6  console.error("Message :", error.message); // "Cannot read property 'forEach' of undefined"
7  console.error("Pile d'appels :", error.stack); // Trace de pile complète avec infos de ligne
8}

Erreurs asynchrones

Gérer les erreurs dans du code asynchrone demande une approche particulière. Avec les promesses, on utilise la méthode catch() ou le bloc catch dans une construction async/await.

1// Gestion des erreurs avec les promesses
2fetchDinosaurData()
3  .then(data => processDinosaurData(data))
4  .catch(error => {
5    console.error("Erreur de récupération des données des dinosaures :", error);
6    return getBackupDinosaurData(); // Plan de secours
7  });
8
9// Gestion des erreurs avec async/await
10async function monitorDinosaurs() {
11  try {
12    const data = await fetchDinosaurData();
13    processDinosaurData(data);
14  } catch (error) {
15    console.error("Erreur de surveillance :", error);
16
17    // Différentes procédures de récupération selon l'erreur
18    if (error instanceof NetworkError) {
19      await switchToOfflineMode();
20    } else if (error instanceof AuthenticationError) {
21      await refreshSecurityCredentials();
22      return monitorDinosaurs(); // Réessaie
23    } else {
24      notifyAdministrator(error);
25    }
26  }
27}

Conclusions

Comme l'a dit le Dr Alan Grant : « La meilleure défense, c'est la connaissance. » Comprendre les différents types d'erreurs JavaScript te permet de mieux diagnostiquer les problèmes, d'écrire des applications plus résistantes et de gérer efficacement les situations inattendues - à Jurassic Park comme dans ton code.

Dans l'exercice suivant, nous verrons de plus près comment lever des erreurs personnalisées avec l'instruction throw et comment gérer les erreurs avec le bloc try...catch...finally - des outils essentiels pour tout développeur, tout comme une cage solide est essentielle pour tout dresseur de raptors !

Tu as repéré une erreur dans cette leçon ?

Teste tes connaissances

Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.

  1. 1. Quelle erreur JavaScript survient lorsqu'on essaie d'utiliser une variable non déclarée ?

Articles utiles