I denne vejledning vil du blive introduceret til fejl i JavaScript, try-catch-konceptet, og hvordan det bruges, og en lille introduktion til håndtering af interne fejl med Angular errorHandler.
Fejl
En af mine yndlingsfilmstjerner, Samuel L. Jackson, var den allerførste person, jeg hørte sætningen “to err is human” fra, og selv om jeg ikke kan huske titlen på den pågældende film, kan du nu give mig ret i, at det samme sker med fejl, når man skriver kode. Som Angular-udvikler ved du allerede, at fejl kan skyldes personlige fejl, f.eks. at du har en import-angivelse med filudvidelsesnavnet i Angular 7, og det vises i din browser, hvis du ikke fanger det.
import { DataService } from 'src/app/services/data.service.ts';Fejl kan opstå på grund af manglende test, serverkommunikation eller endda tvetydighed i det Angular-projekt, du arbejder på. Vi er mennesker og derfor er vi tilbøjelige til at begå fejl, det er en af grundene til at en god editor som VS Code altid vil tegne pivtunge linjer, når du begynder at afspore.
Forudsætninger
For at kunne følge med i denne artikels demonstration skal du have:
- Node version 11.0 installeret på din maskine.
- Node Package Manager version 6.7 (leveres normalt med Node-installationen).
- Angular CLI version 7.0
- Den nyeste version af Angular (version 7)
// run the command in a terminal ng versionBekræft, at du bruger version 7, og opdater til 7, hvis du ikke gør det.Andre ting, der vil være rare at have, er:
- Et praktisk kendskab til Angular-rammen på begynderniveau.
- Fertighed med Angular-tjenester vil være et plus, men ikke et krav.
Typer af fejl
Der er mange typer af fejl, men jeg vil gruppere dem i to hovedkategorier: insider- og outsider-fejl.
- Insider-fejl: (også kendt som klientsidefejl) Det er dem, du kan holdes ansvarlig for, syntaksfejl, pakkehåndteringsfejl, referencefejl, typefejl og alle typer klientsidefejl, der kan rettes af udvikleren i Angular-applikationen.
- Outsider-fejl: (også kendt som fejl på serversiden) Disse kan spænde fra serverfejl, som for det meste kommer med trecifrede statuskoder som 500, til internetnetværksfejl og endda browserspecifikke fejl. Det er dybest set fejl, der er uden for Angular-applikationens rækkevidde, deraf navnet outsider.
Denne artikel vil fokusere på insider-fejlene, og en efterfølgende artikel vil fokusere på outsider-fejlene.
Baby trin: throw og catch!
Når du kører en funktion i JavaScript, kommer den pågældende funktion med i en slags kø for funktionsudførelse, og efterhånden som applikationen kører og kommer til sin tur, forlader den køen og bliver udført. Så hvis der opstår en fejl, kaster JavaScript en undtagelse, som straks fjerner alle operationer i køen, indtil undtagelsen er håndteret. På et grundlæggende niveau håndteres undtagelser med try/catch-blokke, og hele programmet går ned, hvis compileren ikke ser denne try/catch-blok. Try/catch-syntaksen ser således ud:
Du vil se nytten af det i en lille demonstration. Opret et nyt Angular-projekt med CLI’en, kald det ngapp
ng new ngappAccepter routerindstillingerne, og vælg almindelig CSS som stilark. Gå til filen app.component.ts og kopier nedenstående kode ind:
Kopier disse ind i app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Kopier derefter disse grundlæggende styling ind i app.component.css
Kør programmet i udvikling på denne måde:
ng serveI nogle tilfælde vil det mislykkes at kompilere, når dette sker, kør det igen, og det vil kompilere.
Dette vises i konsollen og bryder for det meste hele programmet med det samme, da du kan se, at den meddelelse, vi loggede, ikke blev vist. Try/catch-blokken håndterer disse undtagelser elegant, og programmet fortsætter med at køre. Så hvis du havde en anden knap med en try catch-blok denne gang, kan du spotte forskellen. Kopier dette i app.component.html file :
Kopier nedenstående kode i app.component.ts-filen:
Koden med fed skrift viser den samme referencefejlinstans, men denne gang er den pakket ind i en try-catch-blok, så den kan håndteres elegant. Når du kører appen igen, skal den se sådan ud:
Begrænsninger ved try/catch
Hvor fantastisk try/catch end er, kan du, når du tænker på applikationen, allerede se, hvordan den ikke er bæredygtig. Det skyldes, at du ikke kan gå hen og tilføje disse try/catch-blokke i hver eneste funktion i din applikation, det er ikke ressourceeffektivt. Den gode nyhed er, at Angular har en slags global try/catch, som vi kan bruge ét centralt sted til at fange alle undtagelser.
Error handler
Angular har en global fejlhåndteringsklasse kaldet errorHandler, der giver en krog til centraliseret undtagelseshåndtering i din applikation. Den opfanger grundlæggende alle de fejl, der opstår i din applikation, og logger dem alle til konsollen og forhindrer appen i at gå ned (det var derfor, at din første knap ikke fik appen til at gå ned).Syntaksen ser således ud:
Dette giver os mulighed for at ændre standardadfærden med logning af fejl til konsollen til vores egen logik, efter at vi har tilføjet den til vores providerliste i vores appmodul. Gå til filen app.component.ts og kopier nedenstående kode ind i den:
Den try catch-blok er blevet fjernet, så du bør have to pibende linjer (eller problemer) i din kodeeditor, der angiver to referencefejl. Hvis du nu vil teste Angulars globale fejlhåndtering, skal du navigere til app.module.ts-filen og kopiere koden nedenfor:
De ændringer, der er foretaget, ligesom syntaksen antyder, at vi har oprettet en global fejlhåndteringsklasse, der implementerer Angular-fejlhåndteringen, og derefter registreret den i provider-afsnittet. vores logik kontrollerer simpelthen for fejl og logger en meddelelse for eventuelle fundne fejl. Hvis du gemmer dette og kører applikationen, vil du se teksterne logget i konsollen for hver fejl, og applikationen fungerer ligesom det var en try-catch.
Error service
Nu kan du se, at al vores fejllogik er inde i core app-modulet, dette er ikke den måde Angular opfordrer os til at skrive kode på. Så i tråd med at holde alt modulært, bruger vi en service. du vil kalde det error service, og al logik om hvordan du håndterer dine fejl vil blive opbevaret i det. Først og fremmest skal du generere en Angular-service med CLI:
ng generate service erroreller
ng g s errorDernæst skal du fjerne fejlhåndteringslogikken i din app.module.ts-fil, så den kommer til at se sådan ud:
Dernæst skal du bruge CLI’en til at generere en fejlkomponent, hvor brugeren kan blive omdirigeret til, hvis der opstår en fejl.
ng g c errorNu har du fejlkomponenten, du behøver ikke at ændre den, naviger til error.service.ts-filen og kopier koden nedenfor i den:
Her er logikken ændret en smule, så den først kontrollerer, hvilken slags fejl det er, hvis det er en insiderfejl, så navigerer den brugeren til en fejlside, når fejlen opstår. Så sørg for at din app-routing.module.ts fil er opdateret med ruten som denne:
Endeligt skal din app.component.html fil se sådan ud:
Hvis du har fulgt indlægget til dette punkt, kan du køre programmet i udvikling igen, dine fejl vil blive yndefuldt håndteret som forventet.
Konklusion
Du er blevet introduceret til fejl og konceptet bag håndtering af dem i Angular med errorHandler-klassen med fokus på JavaScript-fejl på klientsiden. Den næste tutorial vil gå i dybden med outsider-fejl, HTTP interceptors og fejlsporing med en fjerntjeneste, der bygger på alle de koncepter, du har lært i dette indlæg. Den komplette kode til denne tutorial er på GitHub og kan findes her.