Comprendre les types et messages d'erreur JavaScript

Chaque développeur JavaScript a déjà fixé un message d’erreur rouge dans sa console, se demandant ce qui n’allait pas. Comprendre ces types d’erreur ne consiste pas seulement à corriger du code défaillant—il s’agit d’écrire des applications plus fiables et de déboguer les problèmes plus rapidement. Lorsque vous savez ce que signifie chaque erreur et pourquoi elle se produit, vous passez d’un débogage réactif à une prévention proactive des erreurs.

Que sont les erreurs JavaScript ?

Les erreurs JavaScript sont des objets qui représentent des problèmes survenant lors de l’exécution du code. Chaque erreur contient une propriété name identifiant son type et une propriété message décrivant ce qui s’est mal passé. Il ne s’agit pas de défaillances aléatoires—ce sont des retours structurés sur des problèmes spécifiques dans votre code.

Les huit types d’erreur natifs

SyntaxError : enfreindre les règles

Une SyntaxError se produit lorsque JavaScript ne peut pas analyser votre code en raison d’une syntaxe invalide. L’interpréteur s’arrête avant même que l’exécution ne commence.

// Missing closing parenthesis
console.log("Hello World");
// SyntaxError: missing ) after argument list

// Invalid JSON parsing
JSON.parse("{'invalid': 'json'}");
// SyntaxError: Unexpected token ' in JSON at position 1

Les causes courantes incluent des crochets manquants, des chaînes non fermées ou du JSON mal formé. Ces erreurs empêchent complètement l’exécution de votre code.

ReferenceError : utiliser l’indéfini

Une ReferenceError se produit lorsque vous essayez d’accéder à une variable qui n’existe pas dans la portée actuelle.

console.log(userName);
// ReferenceError: userName is not defined

function greet() {
  let message = "Hello";
}
greet();
console.log(message);
// ReferenceError: message is not defined

Cela résulte généralement de fautes de frappe, de l’accès à des variables avant leur déclaration ou d’une confusion de portée.

TypeError : opérations sur des types incompatibles

Une TypeError se produit lorsque vous effectuez une opération sur un type incompatible—comme appeler une non-fonction ou accéder à des propriétés sur null ou undefined.

const num = 42;
num();
// TypeError: num is not a function

const user = null;
console.log(user.name);
// TypeError: Cannot read properties of null (reading 'name')

Ce sont parmi les erreurs d’exécution les plus courantes dans les applications JavaScript.

RangeError : hors limites

Une RangeError signale qu’une valeur dépasse sa plage autorisée.

const arr = new Array(-1);
// RangeError: Invalid array length

const num = 1;
num.toPrecision(101);
// RangeError: toPrecision() argument must be between 1 and 100

Surveillez ces erreurs lors de l’utilisation de constructeurs de tableaux, de méthodes numériques ou de fonctions récursives qui dépassent la pile d’appels.

URIError : URI mal formées

Une URIError apparaît lorsque les fonctions d’encodage ou de décodage d’URI reçoivent des paramètres invalides.

decodeURIComponent('%');
// URIError: URI malformed

encodeURI('\uD800');
// URIError: URI malformed

Ces erreurs surviennent lors de la manipulation d’URL avec des caractères spéciaux ou un encodage en pourcentage incomplet.

EvalError : problèmes avec eval()

Bien que EvalError existe dans la spécification, le JavaScript moderne ne la déclenche pas. Elle reste pour la compatibilité ascendante. Les problèmes historiques avec eval() déclenchaient ce type d’erreur.

AggregateError : défaillances multiples

Une AggregateError regroupe plusieurs erreurs dans un seul objet, particulièrement utile avec Promise.any().

Promise.any([
  Promise.reject(new Error("First failure")),
  Promise.reject(new Error("Second failure"))
]).catch(err => {
  console.log(err instanceof AggregateError); // true
  console.log(err.errors); // Array of individual errors
});

InternalError : limites du moteur

Une InternalError (non standard, spécifique à Firefox) se produit lorsque le moteur JavaScript atteint des limites internes.

function recursiveFunction() {
  recursiveFunction();
}
recursiveFunction();
// InternalError: too much recursion (Firefox)
// RangeError: Maximum call stack size exceeded (Chrome)

Gestion des exceptions avec try…catch

JavaScript fournit une gestion structurée des exceptions via les instructions try, catch, finally et throw.

try {
  // Code that might throw an error
  const data = JSON.parse(userInput);
  processData(data);
} catch (error) {
  if (error instanceof SyntaxError) {
    console.error("Invalid JSON format:", error.message);
  } else if (error instanceof TypeError) {
    console.error("Data processing error:", error.message);
  } else {
    // Re-throw unknown errors
    throw error;
  }
} finally {
  // Cleanup code runs regardless
  closeConnections();
}

L’instruction throw crée des erreurs personnalisées :

function validateAge(age) {
  if (age < 0) {
    throw new RangeError("Age cannot be negative");
  }
  if (typeof age !== 'number') {
    throw new TypeError("Age must be a number");
  }
  return age;
}

Bonnes pratiques pour la gestion des erreurs

Utilisez des types d’erreur spécifiques lors du déclenchement d’erreurs personnalisées. Au lieu d’objets Error génériques, déclenchez une TypeError pour les problèmes de type ou une RangeError pour les violations de limites.

Gérez les erreurs au bon niveau. N’enveloppez pas chaque fonction dans un try-catch. Gérez les erreurs là où vous pouvez y répondre de manière significative.

Préservez le contexte d’erreur lors du re-déclenchement :

try {
  riskyOperation();
} catch (error) {
  // Add context without losing original stack trace
  error.message = `Failed during user ${userId} operation: ${error.message}`;
  throw error;
}

Créez des classes d’erreur personnalisées pour les problèmes spécifiques au domaine :

class ValidationError extends Error {
  constructor(field, value) {
    super(`Invalid value for ${field}: ${value}`);
    this.name = 'ValidationError';
    this.field = field;
    this.value = value;
  }
}

Déboguer efficacement les erreurs JavaScript

Les navigateurs modernes fournissent d’excellents outils de débogage. La trace de pile montre le chemin d’exécution menant à une erreur. Utilisez des points d’arrêt pour suspendre l’exécution avant que les erreurs ne se produisent. Les messages d’erreur de la console incluent souvent le numéro de ligne et le fichier exacts.

Pour les applications en production, implémentez des gestionnaires d’erreurs globaux :

window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  // Send to error tracking service
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
});

Conclusion

Comprendre les types d’erreur JavaScript transforme le débogage d’un travail d’approximation en résolution systématique de problèmes. Chaque type d’erreur—de SyntaxError à AggregateError—vous indique exactement ce qui s’est mal passé et où chercher. Combiné à une gestion appropriée des exceptions utilisant des blocs try-catch et des messages d’erreur significatifs, vous pouvez construire des applications qui échouent élégamment et fournissent un retour clair lorsque des problèmes surviennent. L’essentiel n’est pas d’éviter toutes les erreurs—c’est de les gérer intelligemment lorsqu’elles se produisent.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.