In deze tutorial maak je kennis met fouten in JavaScript, het try-catch concept en hoe het wordt gebruikt en een kleine introductie tot het afhandelen van interne fouten met de Angular errorHandler.
Fouten
Een van mijn favoriete filmsterren, Samuel L. Jackson, was de allereerste van wie ik de uitdrukking “to err is human” hoorde, en hoewel ik me de titel van de specifieke film niet meer kan herinneren, kunt u het nu met me eens zijn dat hetzelfde gebeurt met fouten bij het schrijven van code. Als Angular-ontwikkelaar weet je al dat fouten kunnen worden veroorzaakt door persoonlijke fouten, zoals het hebben van een import statement met de naam van de bestandsextensie in Angular 7 en het verschijnt in je browser als je het niet opvangt.
import { DataService } from 'src/app/services/data.service.ts';Errors kunnen ontstaan door gebrek aan testen, servercommunicatie of zelfs ambiguïteit van het Angular-project waar je aan werkt. We zijn mensen en dus vatbaar voor fouten, dat is een van de redenen dat een goede editor als VS Code altijd piepende lijnen zal trekken als je begint te ontsporen.
Voorvereisten
Om de demonstratie van dit artikel te kunnen volgen, moet u:
- Node versie 11.0 op uw machine geïnstalleerd hebben.
- Node Package Manager versie 6.7 (wordt meestal meegeleverd met de installatie van Node).
- Angular CLI versie 7.0
- De nieuwste versie van Angular (versie 7)
// run the command in a terminal ng versionBevestig dat u versie 7 gebruikt, en update naar 7 als dat niet het geval is.Andere dingen die nice-to-haves zullen zijn:
- Een werkende kennis van het Angular framework op een beginnersniveau.
- Bekendheid met Angular services is een plus, maar geen vereiste.
Typen fouten
Er zijn veel soorten fouten, maar ik zal ze groeperen in twee hoofdcategorieën: insider en outsider fouten.
- Insider fouten: (ook bekend als client side errors) Dit zijn degenen waarvoor u verantwoordelijk kunt worden gehouden, de syntaxis fouten, package manager fouten, referentiefouten, type fouten en alle soorten client side fouten die kunnen worden opgelost door de ontwikkelaar binnen de Angular applicatie.
- Buitenstaander fouten: (ook bekend als server side errors) Deze kunnen variëren van server fouten, die meestal komen met drie cijferige status codes zoals 500 tot internet netwerk fouten, tot zelfs browser specifieke fouten. Dit zijn in principe fouten die buiten het bereik van de Angular applicatie liggen vandaar de naam outsider.
Dit artikel zal zich richten op de insider errors en een volgend artikel zal zich richten op de outsider errors.
Baby steps: throw and catch!
Wanneer je een functie in JavaScript uitvoert, komt die functie in een soort van functie executie wachtrij en als de applicatie loopt en aan de beurt komt verlaat het de wachtrij en wordt uitgevoerd. Dus, als er een fout optreedt, gooit JavaScript een exceptie, die onmiddellijk alle bewerkingen in de wachtrij zal verwijderen totdat de exceptie is afgehandeld. Op een basis niveau worden excepties afgehandeld met try/catch blokken, de hele applicatie crasht als de compiler dit try/catch blok niet ziet. De try/catch syntax ziet er als volgt uit:
Het nut zul je zien in een kleine demonstratie. Maak een nieuw Angular-project met de CLI, noem het ngapp
ng new ngappAccepteer de router-instellingen en kies plain CSS als stylesheet. Ga naar het app.component.ts-bestand en kopieer de onderstaande code:
Kopieer deze naar de app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Kopieer vervolgens deze basisstyling naar de app.component.css
Run de applicatie in ontwikkeling op deze manier:
ng serveIn sommige gevallen zal het niet compileren, wanneer dit gebeurt voert u het opnieuw uit en zal het compileren.
Dit wordt weergegeven in de console en meestal wordt de hele toepassing onmiddellijk afgebroken, zoals u kunt zien in het bericht dat we hebben gelogd en dat niet is weergegeven. Het try/catch blok handelt deze uitzonderingen netjes af en de applicatie blijft draaien. Dus, als je een andere knop had met een try catch blok deze keer, kun je het verschil zien. Kopieer dit in de app.component.html file :
Kopieer de code hieronder in het app.component.ts bestand:
De vetgedrukte code toont dezelfde referentiefout instantie, maar deze keer is het verpakt in een try-catch blok, zodat het sierlijk kan worden afgehandeld. Als u de app opnieuw uitvoert, zou deze er zo uit moeten zien:
Beperkingen van try/catch
Hoe goed try/catch ook is, als u over de toepassing nadenkt, ziet u al hoe onhoudbaar het is. Dit komt omdat je niet kunt gaan over het toevoegen van deze try / catch blokken in elke functie in uw aanvraag, dat is niet resource effectief. Het goede nieuws is, Angular heeft een soort van globale try/catch die we kunnen gebruiken in een gecentraliseerde locatie om alle uitzonderingen te vangen.
Error handler
Angular heeft een globale foutafhandeling klasse genaamd errorHandler dat een haak voor gecentraliseerde uitzondering afhandeling binnen uw applicatie biedt. Het onderschept in principe alle fouten die in uw toepassing gebeuren, en logt ze allemaal naar de console, en voorkomt dat de app crasht (dit was de reden waarom uw eerste knop de app niet liet crashen).De syntax ziet er als volgt uit:
Dit laat ons het standaard gedrag van het loggen van fouten naar de console aanpassen aan onze eigen logica nadat we het hebben toegevoegd aan onze providers lijst in onze app module. Ga naar het app.component.ts bestand en kopieer de onderstaande code erin:
Het try catch blok is verwijderd, dus je zou twee piepende regels (of problemen) in je code editor moeten hebben die twee referentie fouten aangeven. Om nu de Angular global error handler te testen, navigeer naar het app.module.ts bestand en kopieer de onderstaande code:
De veranderingen zijn net als de syntaxis suggereert dat we een global error handler klasse hebben gemaakt die de Angular error handler implementeert en deze vervolgens hebben geregistreerd in de provider sectie.Onze logica controleert gewoon op fouten en logt een bericht voor alle gevonden fouten. Als je dit opslaat en de applicatie uitvoert, zie je de teksten die in de console worden gelogd voor elke fout en de applicatie werkt net alsof het een try-catch was.
Error service
Nu kun je zien dat al onze error logica in de core app module zit, dit is niet de manier waarop Angular ons aanmoedigt om code te schrijven. Dus in lijn met het modulair houden van alles, gebruiken we een service. je zult het error service noemen en alle logica over hoe om te gaan met je fouten zal daarin worden bewaard. Allereerst genereer je een Angular service met de CLI:
ng generate service errorof
ng g s errorDaarna verwijder je de error handler logica in je app.module.ts bestand zodat het er als volgt uitziet:
Daarna gebruik je de CLI om een error component te genereren waar de gebruiker naar kan worden doorgestuurd als er een fout optreedt.
ng g c errorNu je de error component hebt hoef je deze niet aan te passen, navigeer naar het error.service.ts bestand en kopieer de onderstaande code erin:
Hier wordt de logica een beetje aangepast om eerst te controleren wat voor soort fout het is, als het een insider error is dan navigeert het de gebruiker naar een error pagina als de fout optreedt. Dus zorg ervoor dat uw app-routing.module.ts bestand is bijgewerkt met de route zoals deze:
Ten slotte moet uw app.component.html bestand er als volgt uitzien:
Als u de post tot dit punt hebt gevolgd, kunt u de applicatie opnieuw in ontwikkeling uitvoeren, uw fouten zullen gracieus worden afgehandeld zoals verwacht.
Conclusie
Je hebt kennis gemaakt met fouten en het concept achter het afhandelen ervan in Angular met de errorHandler klasse met de nadruk op client side JavaScript fouten. De volgende tutorial zal dieper ingaan op outsider errors, de HTTP interceptors en error tracking met een remote service, voortbouwend op alle concepten die je in deze post hebt geleerd. De volledige code voor deze tutorial staat op GitHub en kan hier worden gevonden.