Introduction à la gestion des erreurs en Angular 7 - Partie 1

Dans ce tutoriel, vous serez introduit aux erreurs en JavaScript, au concept try-catch et à son utilisation et une petite introduction à la gestion des erreurs internes avec le Angular errorHandler.

Erreurs

L’une de mes stars de cinéma préférées, Samuel L. Jackson, a été la toute première personne de qui j’ai entendu la phrase « to err is human », et bien que je ne me souvienne pas du titre du film en particulier maintenant, vous pouvez convenir avec moi que la même chose se produit avec les erreurs lors de l’écriture du code. En tant que développeur Angular, vous savez déjà que les erreurs peuvent être causées par des erreurs personnelles, comme avoir une déclaration d’importation avec le nom d’extension de fichier dans Angular 7 et cela se voit dans votre navigateur si vous ne parvenez pas à l’attraper.

 import { DataService } from 'src/app/services/data.service.ts';

Les erreurs peuvent provenir d’un manque de tests, de communications avec le serveur, ou même de l’ambiguïté du projet Angular sur lequel vous travaillez. Nous sommes des êtres humains et donc enclins aux erreurs, c’est une des raisons pour lesquelles un bon éditeur comme VS Code tracera toujours des lignes grinçantes lorsque vous commencerez à dérailler.

Prérequis

Pour pouvoir suivre la démonstration de cet article, vous devez avoir :

Node version 11.0 installé sur votre machine.
Node Package Manager version 6.7 (généralement livré avec l’installation de Node).
Angular CLI version 7.0
La dernière version d’Angular (version 7)

 // run the command in a terminal ng version

Confirmez que vous utilisez la version 7, et mettez à jour vers 7 si ce n’est pas le cas.D’autres choses qui seront agréables à avoir sont :

Une connaissance pratique du framework Angular à un niveau débutant.
Une familiarité avec les services Angular sera un plus mais pas une exigence.

Types d’erreurs

Il existe de nombreux types d’erreurs mais je les regrouperai en deux catégories principales : les erreurs insider et outsider.

Erreurs insider : (également connues sous le nom d’erreurs côté client) Ce sont celles dont vous pouvez être tenu responsable, les erreurs de syntaxe, les erreurs du gestionnaire de paquets, les erreurs de référence, les erreurs de type et tous les types d’erreurs côté client qui peuvent être corrigées par le développeur au sein de l’application Angular.
Erreurs côté extérieur : (également connues sous le nom d’erreurs côté serveur) Celles-ci peuvent s’étendre des erreurs de serveur, qui viennent la plupart du temps avec des codes d’état à trois chiffres comme 500 aux erreurs de réseau Internet, et même aux erreurs spécifiques au navigateur. Ce sont essentiellement des erreurs qui sont hors de portée de l’application Angular d’où le nom d’outsider.

Cet article se concentrera sur les erreurs insider et ensuite un article ultérieur se concentrera sur les erreurs outsider.

Pas de bébé : throw et catch !

Lorsque vous exécutez une fonction en JavaScript, cette fonction rejoint une sorte de file d’attente d’exécution de fonction et au fur et à mesure que l’application s’exécute et arrive à son tour, elle quitte la file d’attente et est exécutée. Ainsi, si une erreur se produit, JavaScript lance une exception, ce qui supprime immédiatement toutes les opérations de la file d’attente jusqu’à ce que l’exception soit traitée. À un niveau de base, les exceptions sont traitées avec des blocs try/catch, l’application entière se plante si le compilateur ne voit pas ce bloc try/catch. La syntaxe try/catch ressemble à ceci:

Vous allez voir l’utilité dans une petite démonstration. Créez un nouveau projet Angular avec le CLI, appelez-le ngapp

 ng new ngapp

Acceptez les paramètres du routeur et choisissez le CSS simple comme feuille de style. Allez dans le fichier app.component.ts et copiez le code ci-dessous :

Copiez-les dans le app.component.html

 <!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>

Puis copiez ces styles de base dans le app.component.css

Exécutez l’application en développement comme ceci :

 ng serve

Dans certains cas, elle échouera à compiler, lorsque cela se produit, réexécutez-la et elle compilera.

Cela s’affiche dans la console et la plupart du temps, casse toute l’application immédiatement comme vous pouvez le voir le message que nous avons enregistré ne s’est pas affiché. Le bloc try/catch gère ces exceptions de manière gracieuse et l’application continue de fonctionner. Donc, si vous aviez un autre bouton avec un bloc try catch cette fois, vous pouvez repérer la différence. Copiez ceci dans le fichier app.component.html file :

Copiez le code ci-dessous dans le fichier app.component.ts :

Le code en gras montre la même instance d’erreur de référence, mais cette fois-ci, elle est enveloppée dans un bloc try-catch afin qu’elle puisse être traitée gracieusement. Lorsque vous exécutez à nouveau l’application, elle devrait ressembler à ceci:

Limitations de try/catch

Aussi génial que soit try/catch, en pensant à l’application, vous voyez déjà comment il n’est pas durable. C’est parce que vous ne pouvez pas aller sur l’ajout de ces blocs try/catch dans chaque fonction de votre application, ce n’est pas efficace en termes de ressources. Les bonnes nouvelles sont, Angular a une sorte de try/catch global que nous pouvons utiliser dans un endroit centralisé pour attraper toutes les exceptions.

Error handler

Angular a une classe de gestion d’erreur globale appelée errorHandler qui fournit un crochet pour la gestion centralisée des exceptions à l’intérieur de votre application. Il intercepte essentiellement toutes les erreurs qui se produisent dans votre application, et les enregistre toutes dans la console, et empêche l’application de se planter (c’est pourquoi votre premier bouton n’a pas fait planter l’application).La syntaxe ressemble à ceci:

Cela nous permet de modifier le comportement par défaut de l’enregistrement des erreurs dans la console à notre propre logique après l’avoir ajouté à notre liste de fournisseurs dans notre module d’application. Allez au fichier app.component.ts et copiez-y le code ci-dessous:

Le bloc try catch a été supprimé, vous devriez donc avoir deux lignes grinçantes (ou problèmes) dans votre éditeur de code signifiant deux erreurs de référence. Maintenant, pour tester le gestionnaire d’erreur global Angular, naviguez vers le fichier app.module.ts et copiez le code ci-dessous:

Les changements effectués tout comme la syntaxe suggère que nous avons créé une classe de gestionnaire d’erreur globale qui implémente le gestionnaire d’erreur Angular et l’a ensuite enregistré dans la section fournisseur.Notre logique vérifie simplement les erreurs et enregistre un message pour toute erreur trouvée. Si vous enregistrez ceci et exécutez l’application, vous verrez les textes enregistrés dans la console pour chaque erreur et l’application fonctionner comme si c’était un try-catch.

Service d’erreur

Maintenant, vous pouvez voir que toute notre logique d’erreur est à l’intérieur du module d’application de base, ce n’est pas la façon dont Angular nous encourage à écrire du code. Donc, dans la lignée de garder tout modulaire, nous utilisons un service. Vous l’appellerez service d’erreur et toute la logique sur la façon de gérer vos erreurs sera conservée en elle. Tout d’abord, générez un service Angular avec le CLI:

 ng generate service error

 ng g s error

Puis vous devez supprimer la logique de gestion des erreurs dans votre fichier app.module.ts afin qu’il ressemble à ceci:

Après cela, utilisez le CLI pour générer un composant d’erreur où l’utilisateur peut être redirigé si une erreur se produit.

 ng g c error

Maintenant que vous avez le composant d’erreur vous n’avez pas besoin de le modifier, naviguez vers le fichier error.service.ts et copiez le code ci-dessous dedans:

Ici la logique est un peu modifiée pour vérifier d’abord le type d’erreur que c’est, si c’est une erreur d’initié alors il navigue l’utilisateur vers une page d’erreur comme l’erreur se produit. Donc, assurez-vous que votre fichier app-routing.module.ts est mis à jour avec la route comme ceci:

Finalement, votre fichier app.component.html devrait ressembler à ceci:

Si vous avez suivi le post jusqu’à ce point, vous pouvez exécuter l’application en développement à nouveau, vos erreurs seront traitées gracieusement comme prévu.

Conclusion

Vous avez été introduit aux erreurs et au concept derrière leur traitement dans Angular avec la classe errorHandler en se concentrant sur les erreurs JavaScript côté client. Le prochain tutoriel abordera en profondeur les erreurs externes, les intercepteurs HTTP et le suivi des erreurs avec un service distant en s’appuyant sur tous les concepts que vous avez appris dans ce post. Le code complet de ce tutoriel est sur GitHub et peut être trouvé ici.

Introduction à la gestion des erreurs en Angular 7 : Partie 1 – Angular errorHandler