La gestion des erreurs est l'une des choses que tous les développeurs JavaScript rencontrent, mais tout le monde ne se plonge pas profondément dans sa maîtrise. Si vous comptez sur de simples instructions try...catch, il est temps d'élever votre jeu. Cet article vous guidera tout au long du parcours depuis la gestion des erreurs de base jusqu'à la création d'erreurs personnalisées, rendant votre code plus résilient et plus facile à déboguer.

1. Les bases : essayer...attraper

Commençons par le classique try...catch :

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

C'est simple et efficace. Le bloc try vous permet d'exécuter du code susceptible de générer une erreur, et le bloc catch le capture, vous permettant de le gérer avec élégance.

Cependant, à mesure que votre application se développe, s'appuyer uniquement sur cela peut conduire à des messages d'erreur moins informatifs, ce qui fait du débogage un cauchemar. C'est là que la gestion personnalisée des erreurs brille.

2. Comprendre les types d'erreurs natifs

JavaScript est livré avec des types d'erreurs intégrés, tels que :

• Erreur : objet d'erreur générique.
• TypeError : levée lorsqu'une variable n'est pas du type attendu.
• SyntaxError : levée lorsque le code contient une erreur de syntaxe.
• ReferenceError : levé lors du référencement d'une variable inexistante.

Exemple:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

En utilisant ces types, vous pouvez commencer à créer des chemins de gestion des erreurs plus descriptifs. Mais que se passe-t-il si vous souhaitez définir des erreurs spécifiques à la logique de votre application ? C'est là qu'interviennent les erreurs personnalisées.

3. Création d'erreurs personnalisées

Pourquoi des erreurs personnalisées ?

Les erreurs personnalisées aident à identifier des problèmes spécifiques dans votre code, ce qui facilite grandement le débogage. Par exemple, si vous créez une API, vous souhaiterez peut-être faire la différence entre ValidationError, AuthenticationError ou DatabaseError.

Comment créer des erreurs personnalisées

Créons une ValidationError à titre d'exemple :

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age 



En étendant la classe Error, nous sommes en mesure de créer une ValidationError plus significative. Cette approche clarifie la nature du problème, rendant le débogage plus facile et votre code plus propre.


  
  
  4. Enrichir les erreurs personnalisées avec plus d'informations


Pourquoi s'arrêter à un simple message personnalisé ? Enrichissons notre erreur personnalisée avec des propriétés supplémentaires telles que errorCode ou statusCode.



class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




De cette façon, vous pouvez capturer plus de contexte sur l'erreur, ce qui facilite l'action ou la journalisation efficace.


  
  
  5. Construire une stratégie globale de gestion des erreurs


À mesure que votre application évolue, vous aurez besoin d'un moyen centralisé de gérer les erreurs. Une approche consiste à créer un utilitaire de gestion des erreurs qui gère différents types d'erreurs.



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




Cette gestion centralisée des erreurs permet de garder votre code SEC (Ne vous répétez pas) et garantit un traitement cohérent des erreurs dans toute votre application.


  
  
  6. Tirer enfin parti du nettoyage


Souvent, vous devrez peut-être effectuer des tâches de nettoyage telles que la fermeture d'une connexion à une base de données ou la suppression des délais d'attente. C'est là que cela s'avère finalement utile :



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




L'utilisation garantit enfin que ce bloc s'exécute, qu'une erreur ait été générée ou non, ce qui le rend idéal pour les opérations de nettoyage.


  
  
  7. Intégration aux services de journalisation


Pour les applications de production, il est essentiel de consigner les erreurs. Des services tels que Sentry, LogRocket ou Datadog peuvent capturer les erreurs avec des traces de pile complète, ce qui facilite grandement le dépannage.

Exemple:



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




Cette intégration offre une meilleure visibilité sur les problèmes et vous aide à surveiller l'état de votre application en temps réel.


  
  
  Pensées finales


En allant au-delà des bases de try...catch et en incorporant des erreurs personnalisées, vous créez un code JavaScript plus maintenable, plus lisible et plus robuste. La mise en œuvre de ces pratiques facilitera non seulement le débogage, mais améliorera également la fiabilité globale de votre application.


  
  
  Quelle est la prochaine étape ?

• Expérimentez les erreurs personnalisées dans votre projet actuel.
• Implémentez un gestionnaire d'erreurs centralisé.
• Intégrez les services de journalisation des erreurs dans votre application.

Faites-moi savoir comment vous gérez les erreurs dans vos projets, ou si vous avez des trucs et astuces sympas à partager !

Vous avez apprécié cet article ? Suivez-moi pour plus de trucs et astuces JavaScript !