Einführung in die Fehlerbehandlung in Angular 7: Teil 1 – Angular errorHandler

In diesem Tutorial werden Fehler in JavaScript, das try-catch-Konzept und dessen Verwendung sowie eine kleine Einführung in die Behandlung interner Fehler mit dem Angular errorHandler vorgestellt.

Fehler

Einer meiner Lieblingsfilmstars, Samuel L. Jackson, war die allererste Person, von der ich die Phrase „To err is human“ hörte, und obwohl ich mich nicht mehr an den Titel des jeweiligen Films erinnern kann, können Sie mir zustimmen, dass dasselbe mit Fehlern beim Schreiben von Code passiert. Als Angular-Entwickler wissen Sie bereits, dass Fehler durch persönliche Fehler verursacht werden können, wie z. B. eine Import-Anweisung mit dem Namen der Dateierweiterung in Angular 7, die in Ihrem Browser angezeigt wird, wenn Sie sie nicht abfangen.

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

Fehler können durch mangelnde Tests, Server-Kommunikation oder sogar durch die Unklarheit des Angular-Projekts entstehen, an dem Sie arbeiten. Wir sind Menschen und damit anfällig für Fehler, das ist ein Grund, warum ein guter Editor wie VS Code immer quietschende Linien zieht, wenn man anfängt zu entgleisen.

Voraussetzungen

Um der Demonstration in diesem Artikel folgen zu können, sollten Sie:

• Node Version 11.0 auf Ihrem Rechner installiert haben.
• Node Package Manager Version 6.7 (wird normalerweise mit der Node-Installation ausgeliefert).
• Angular CLI Version 7.0
• Die neueste Version von Angular (Version 7)

 // run the command in a terminal ng version

Stellen Sie sicher, dass Sie Version 7 verwenden, und aktualisieren Sie auf 7, wenn dies nicht der Fall ist.Andere Dinge, die nice-to-haves sind:

• Arbeitskenntnisse des Angular-Frameworks auf Anfängerniveau.
• Kenntnisse mit Angular-Diensten sind von Vorteil, aber keine Voraussetzung.

Fehlertypen

Es gibt viele Fehlertypen, aber ich werde sie in zwei Hauptkategorien gruppieren: Insider- und Outsider-Fehler.

• Insider-Fehler: (auch bekannt als clientseitige Fehler) Dies sind diejenigen, für die Sie verantwortlich gemacht werden können, die Syntaxfehler, Paketmanagerfehler, Referenzfehler, Typfehler und alle Arten von clientseitigen Fehlern, die vom Entwickler innerhalb der Angular-Anwendung behoben werden können.
• Outsider-Fehler: (auch bekannt als serverseitige Fehler) Diese können von Serverfehlern, die meist mit dreistelligen Statuscodes wie 500 kommen, über Internet-Netzwerkfehler bis hin zu browserspezifischen Fehlern reichen. Dies sind im Grunde Fehler, die außerhalb der Reichweite der Angular-Anwendung liegen, daher der Name Outsider.

Dieser Artikel wird sich auf die Insider-Fehler konzentrieren und ein späterer Artikel wird sich mit den Outsider-Fehlern befassen.

Babyschritte: throw und catch!

Wenn man eine Funktion in JavaScript ausführt, reiht sich diese Funktion in eine Art Funktionsausführungswarteschlange ein, und wenn die Anwendung läuft und an die Reihe kommt, verlässt sie die Warteschlange und wird ausgeführt. Wenn also ein Fehler auftritt, löst JavaScript eine Ausnahme aus, die sofort alle Operationen in der Warteschlange entfernt, bis die Ausnahme behandelt wird. Auf einer grundlegenden Ebene werden Ausnahmen mit try/catch-Blöcken behandelt, die gesamte Anwendung stürzt ab, wenn der Compiler diesen try/catch-Block nicht sieht. Die try/catch-Syntax sieht wie folgt aus:

Die Nützlichkeit werden Sie in einer kleinen Demonstration sehen. Erstellen Sie ein neues Angular-Projekt mit der CLI, nennen Sie es ngapp

 ng new ngapp

Übernehmen Sie die Router-Einstellungen und wählen Sie einfaches CSS als Stylesheet. Gehen Sie zur Datei app.component.ts und kopieren Sie den nachstehenden Code hinein:

Kopieren Sie diesen in die Datei app.component.html

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

Kopieren Sie dann das grundlegende Styling in die Datei app.component.css

Starten Sie die Anwendung in der Entwicklung wie folgt:

 ng serve

In einigen Fällen wird sie nicht kompiliert, wenn dies geschieht, führen Sie sie erneut aus und sie wird kompiliert.

Dies wird in der Konsole angezeigt und führt in den meisten Fällen zum sofortigen Abbruch der gesamten Anwendung, da die von uns protokollierte Meldung nicht angezeigt wurde. Der try/catch-Block behandelt diese Ausnahmen auf elegante Weise und die Anwendung läuft weiter. Wenn Sie also dieses Mal eine andere Schaltfläche mit einem try/catch-Block hatten, können Sie den Unterschied erkennen. Kopieren Sie den folgenden Code in die Datei app.component.html file:

Kopieren Sie den folgenden Code in die Datei app.component.ts:

Der fettgedruckte Code zeigt dieselbe Referenzfehlerinstanz, aber dieses Mal ist sie in einen try-catch-Block eingeschlossen, so dass sie anständig behandelt werden kann. Wenn Sie die Anwendung erneut ausführen, sollte sie wie folgt aussehen:

Grenzen von try/catch

So großartig try/catch auch ist, wenn Sie über die Anwendung nachdenken, sehen Sie bereits, dass es nicht nachhaltig ist. Das liegt daran, dass man diese try/catch-Blöcke nicht in jede Funktion der Anwendung einbauen kann, das ist nicht ressourcenschonend. Die gute Nachricht ist, dass Angular eine Art globales try/catch hat, das wir an einem zentralen Ort verwenden können, um alle Ausnahmen abzufangen.

Fehlerbehandlungsklasse

Angular hat eine globale Fehlerbehandlungsklasse namens errorHandler, die einen Haken für die zentrale Ausnahmebehandlung innerhalb Ihrer Anwendung bietet. Es fängt im Grunde alle Fehler ab, die in Ihrer Anwendung auftreten, und protokolliert sie alle auf der Konsole, und stoppt die App vom Absturz (das war der Grund, warum Ihr erster Button die App nicht zum Absturz brachte).Die Syntax sieht wie folgt aus:

Damit können wir das Standardverhalten der Protokollierung von Fehlern auf der Konsole zu unserer eigenen Logik ändern, nachdem wir es zu unserer Anbieterliste in unserem App-Modul hinzugefügt haben. Gehen Sie zur Datei app.component.ts und kopieren Sie den folgenden Code hinein:

Der try-catch-Block wurde entfernt, sodass Sie in Ihrem Code-Editor zwei quietschende Zeilen (oder Probleme) haben sollten, die zwei Referenzfehler anzeigen. Um nun den globalen Angular-Fehlerhandler zu testen, navigieren Sie zur Datei app.module.ts und kopieren Sie den folgenden Code:

Die Änderungen entsprechen der Syntax: Wir haben eine globale Fehlerhandler-Klasse erstellt, die den Angular-Fehlerhandler implementiert, und sie dann im Provider-Abschnitt registriert.Unsere Logik prüft einfach auf Fehler und protokolliert eine Meldung für alle gefundenen Fehler. Wenn Sie dies speichern und die Anwendung ausführen, sehen Sie die Texte, die in der Konsole für jeden Fehler protokolliert werden, und die Anwendung funktioniert, als wäre sie ein try-catch.

Fehlerdienst

Wie Sie sehen, befindet sich die gesamte Fehlerlogik innerhalb des Kernmoduls der Anwendung, und das ist nicht die Art und Weise, wie Angular uns ermutigt, Code zu schreiben. Um also alles modular zu halten, verwenden wir einen Service, den wir error service nennen und in dem die gesamte Logik für die Fehlerbehandlung gespeichert wird. Zuerst generieren Sie einen Angular-Dienst mit dem CLI:

 ng generate service error

oder

 ng g s error

Dann müssen Sie die Fehlerbehandlungslogik in Ihrer app.module.ts-Datei entfernen, so dass sie wie folgt aussieht:

Danach verwenden Sie das CLI, um eine Fehlerkomponente zu generieren, zu der der Benutzer umgeleitet werden kann, wenn ein Fehler auftritt.

 ng g c error

Nachdem Sie die Fehlerkomponente haben, brauchen Sie sie nicht mehr zu modifizieren, navigieren Sie zur error.service.ts-Datei und kopieren Sie den folgenden Code hinein:

Hier wird die Logik ein wenig modifiziert, um zuerst zu prüfen, um welche Art von Fehler es sich handelt, wenn es ein Insider-Fehler ist, wird der Benutzer zu einer Fehlerseite weitergeleitet, wenn der Fehler auftritt. Stellen Sie also sicher, dass Ihre app-routing.module.ts-Datei mit der Route wie folgt aktualisiert wird:

Schließlich sollte Ihre app.component.html-Datei wie folgt aussehen:

Wenn Sie den Beitrag bis zu diesem Punkt befolgt haben, können Sie die Anwendung in der Entwicklung erneut ausführen, und Ihre Fehler werden wie erwartet ordnungsgemäß behandelt.

Abschluss

Sie haben eine Einführung in Fehler und das Konzept der Fehlerbehandlung in Angular mit der errorHandler-Klasse erhalten, wobei der Schwerpunkt auf clientseitigen JavaScript-Fehlern liegt. Das nächste Tutorial wird sich mit Outsider-Fehlern, den HTTP-Interceptoren und der Fehlerverfolgung mit einem Remote-Service befassen und dabei auf allen Konzepten aufbauen, die Sie in diesem Beitrag gelernt haben. Der vollständige Code für dieses Tutorial ist auf GitHub und kann hier gefunden werden.