Un guide pour une bonne gestion des erreurs en javascript

Points clés

• Utilisez intelligemment le bloc d'instruction try…catch pour gérer efficacement les exceptions, en améliorant le processus de débogage en permettant aux erreurs de bouillonner jusqu'à la pile d'appels, affichant ainsi plus clairement les erreurs.
• Implémentez les gestionnaires globaux d'erreur (tels que window.onerror événements) pour centraliser et simplifier la gestion des erreurs pour une gestion et une maintenance faciles dans différentes parties de l'application.
• Utilisez la capacité du navigateur à enregistrer des informations d'erreur détaillées (y compris la pile d'appels) pour améliorer le diagnostic des erreurs et avoir une compréhension plus claire de la source et du contexte de l'erreur.
• Corrigez le puzzle de gestion des erreurs asynchrones en utilisant try…catch dans le bloc setTimeout ou en utilisant un gestionnaire d'erreurs global adapté à tous les contextes d'exécution, en veillant à ce que les erreurs dans le code asynchrone soient efficacement capturées et gérées.
• Améliorer les messages d'erreur en créant des types d'erreur personnalisés ou en enrichissant les messages d'erreur, ce qui facilite l'identification et la résolution de problèmes spécifiques et améliore la robustesse globale du code JavaScript.

La gestion des erreurs en JavaScript est pleine de défis. Suivez la loi de Murphy, tout ce qui peut mal tourner va mal. Cet article explorera la gestion des erreurs en JavaScript, couvrira les pièges, les meilleures pratiques et expliquera le code asynchrone et l'Ajax comme exemples.

Cet article a été mis à jour le 8 juin 2017 pour répondre aux commentaires des lecteurs. Plus précisément, des noms de fichiers ont été ajoutés à l'extrait de code, des tests unitaires ont été nettoyés, des modèles de wrapper ont été ajoutés à uglyHandler, et des sections concernant les COR et les gestionnaires d'erreurs tiers ont été ajoutés.

Je pense que le paradigme axé sur les événements de JavaScript ajoute de la richesse à la langue. J'aime penser à mon navigateur comme cette machine à moteur d'événements, et les erreurs ne font pas exception. Lorsqu'une erreur se produit, un événement sera lancé à un certain moment. En théorie, on peut dire que les erreurs ne sont que des événements simples en JavaScript.

Si vous trouvez cela étrange, portez votre ceinture de sécurité car vous aurez un très merveilleux voyage. Dans cet article, je me concentrerai uniquement sur JavaScript côté client.

Ce sujet est basé sur le concept expliqué dans "Excellente gestion des exceptions dans JavaScript". Si vous ne le connaissez pas, je vous recommande de lire les bases. Cet article suppose également que vous avez un niveau modéré de connaissances JavaScript. Si vous souhaitez améliorer votre niveau, pourquoi ne pas vous inscrire à SitePoint Premium et regarder notre cours JavaScript: Suivant? La première leçon est gratuite.

Dans les deux cas, mon objectif est d'explorer les conditions nécessaires au-delà de la gestion des exceptions. Après avoir lu cet article, la prochaine fois que vous verrez un bon bloc try...catch, vous réfléchissez à deux fois avant d'agir.

démo

Le programme de démonstration à utiliser dans cet article peut être trouvé sur GitHub, qui est présenté comme suit:

Tous les boutons exploseront une "bombe" lors du clic. Cette bombe simule une exception lancée comme une énergie. Ce qui suit est la définition de ce module:

// scripts/error.js

function error() {
  var foo = {};
  return foo.bar();
}

Tout d'abord, cette fonction déclare un objet vide nommé FOO. Veuillez noter que bar() n'est défini nulle part. Utilisons un bon test unitaire pour vérifier que cela explosera une bombe:

// tests/scripts/errorTest.js

it('throws a TypeError', function () {
  should.throws(error, TypeError);
});

Ce test unitaire utilise Mocha pour les affirmations et les utilisations de test devraient.js pour les affirmations. Mocha est un coureur de test et devrait.js est la bibliothèque d'assertion. Si vous ne le savez pas, n'hésitez pas à explorer l'API de test. Le test commence par it('description') et se termine par une passe / défaillance dans should. Les tests unitaires s'exécutent sur le nœud et ne nécessitent pas de navigateur. Je vous recommande de faire attention à ces tests, car ils prouvent les concepts clés avec du JavaScript pur.

Après le clonage du référentiel et l'installation des dépendances, vous pouvez exécuter les tests en utilisant npm t. Alternativement, vous pouvez exécuter ce test unique comme ceci: ./node_modules/mocha/bin/mocha tests/scripts/errorTest.js.

Comme indiqué, error() définit un objet vide puis essaie d'accéder à une méthode. Puisque bar() n'existe pas dans l'objet, il lance une exception. Croyez-moi, pour des langages dynamiques comme JavaScript, cela arrive à tout le monde!

Mauvaise manipulation

Il y a une mauvaise gestion des erreurs ensuite. J'ai résumé le gestionnaire sur le bouton de l'implémentation. Voici à quoi ressemble le gestionnaire:

// scripts/badHandler.js

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
}

Ce gestionnaire reçoit un rappel fn en tant que paramètre. Ce rappel est ensuite appelé dans la fonction de gestionnaire. Les tests unitaires montrent ce que c'est:

// tests/scripts/badHandlerTest.js

it('returns a value without errors', function() {
  var fn = function() {
    return 1;
  };

  var result = badHandler(fn);

  result.should.equal(1);
});

it('returns a null with errors', function() {
  var fn = function() {
    throw new Error('random error');
  };

  var result = badHandler(fn);

  should(result).equal(null);
});

Comme vous pouvez le voir, si quelque chose ne va pas, ce mauvais gestionnaire d'erreurs reviendra null. Le rappel fn() peut pointer vers une méthode juridique ou une bombe.

Le gestionnaire d'événements de clic suivant explique le reste de l'histoire:

// scripts/badHandlerDom.js

(function (handler, bomb) {
  var badButton = document.getElementById('bad');

  if (badButton) {
    badButton.addEventListener('click', function () {
      handler(bomb);
      console.log('Imagine, getting promoted for hiding mistakes');
    });
  }
}(badHandler, error));

oups, je n'en obtienne qu'un null. Cela m'a laissé n'ignorer rien quand j'ai essayé de comprendre ce qui ne va pas. Cette stratégie de défaillance silencieuse va de la mauvaise expérience utilisateur à la corruption des données. Il est frustrant que je puisse passer des heures à déboguer les symptômes et à ignorer le bloc try-catch. Ce gestionnaire diabolique englobera les erreurs dans le code et prétend que tout va bien. Cela peut être acceptable pour les organisations qui n'apprécient pas la qualité du code. Cependant, la cachette d'erreurs peut vous faire passer des heures à l'avenir à déboguer. Dans une solution multicouche avec une pile d'appels profondes, il est impossible de savoir où se déroule l'erreur. En ce qui concerne la gestion des erreurs, c'est très mauvais.

La stratégie de défaillance silencieuse vous fera désirer une meilleure gestion des erreurs. JavaScript fournit un moyen plus élégant de gérer les exceptions.

(Le contenu suivant est similaire à la sortie précédente, sauf que le langage et l'expression ont été ajustés subtilement pour garder l'article concis et éviter la duplication.)

... (le reste est similaire à la sortie précédente, sauf que le langage et l'expression sont ajustés subtilement pour garder l'article concis et éviter la duplication.) ...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!