În acest tutorial, veți face cunoștință cu erorile în JavaScript, conceptul try-catch și modul în care este utilizat și o mică introducere în gestionarea erorilor interne cu Angular errorHandler.
Erori
Unul dintre starurile mele preferate din filme, Samuel L. Jackson, a fost prima persoană de la care am auzit fraza „to err is human” și, deși nu-mi amintesc titlul filmului respectiv, acum puteți fi de acord cu mine că același lucru se întâmplă și cu erorile atunci când scriem cod. În calitate de dezvoltator Angular, știți deja că erorile pot fi cauzate de greșeli personale, cum ar fi faptul că aveți o instrucțiune de import cu numele extensiei de fișier în Angular 7 și aceasta apare în browser dacă nu reușiți să o prindeți.
import { DataService } from 'src/app/services/data.service.ts';Erorile pot apărea din cauza lipsei de testare, a comunicațiilor cu serverul sau chiar a ambiguității proiectului Angular la care lucrați. Suntem ființe umane și, prin urmare, suntem predispuși la erori, acesta este unul dintre motivele pentru care un editor bun, cum ar fi VS Code, va trasa întotdeauna linii scârțâitoare atunci când începeți să deraiați.
Precondiții prealabile
Pentru a putea urmări demonstrația din acest articol ar trebui să aveți:
- Node versiunea 11.0 instalată pe mașina dumneavoastră.
- Node Package Manager versiunea 6.7 (de obicei se livrează odată cu instalarea Node).
- Angular CLI versiunea 7.0
- Cea mai recentă versiune de Angular (versiunea 7)
// run the command in a terminal ng versionConfirmați că folosiți versiunea 7 și actualizați la 7 dacă nu o folosiți.Alte lucruri pe care va fi bine să le aveți sunt:
- Cunoștințe de lucru ale cadrului Angular la un nivel începător.
- Familiaritatea cu serviciile Angular va fi un plus, dar nu o cerință.
Tipuri de erori
Există multe tipuri de erori, dar le voi grupa în două categorii principale: erori din interior și erori din exterior.
- Erori din interior: (cunoscute și sub numele de erori din partea clientului) Acestea sunt cele pentru care puteți fi considerat responsabil, erorile de sintaxă, erorile managerului de pachete, erorile de referință, erorile de tip și toate tipurile de erori din partea clientului care pot fi corectate de către dezvoltator în cadrul aplicației Angular.
- Erori exterioare: (cunoscute și sub numele de erori de partea serverului) Acestea se pot întinde de la erori de server, care de cele mai multe ori vin cu coduri de stare de trei cifre, cum ar fi 500, până la erori de rețea de internet și chiar erori specifice browserului. Practic, acestea sunt erori care nu sunt la îndemâna aplicației Angular, de unde și numele de outsider.
Acest articol se va concentra pe erorile insider, iar apoi un articol ulterior se va concentra pe erorile outsider.
Pasi mici: throw și catch!
Când executați o funcție în JavaScript, acea funcție se alătură unui fel de coadă de execuție a funcțiilor și, pe măsură ce aplicația rulează și ajunge la rândul ei, aceasta părăsește coada și este executată. Astfel, dacă apare o eroare, JavaScript aruncă o excepție, care va elimina imediat toate operațiile din coadă până când excepția este tratată. La un nivel de bază, excepțiile sunt tratate cu blocuri try/catch, întreaga aplicație se blochează dacă compilatorul nu vede acest bloc try/catch. Sintaxa try/catch arată în felul următor:
Vă veți vedea utilitatea într-o mică demonstrație. Creați un nou proiect Angular cu CLI, numiți-l ngapp
ng new ngappAcceptați setările routerului și alegeți CSS simplu ca foaie de stil. Mergeți la fișierul app.component.ts și copiați codul de mai jos:
Copiați acestea în app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Copiați apoi aceste stilizări de bază în app.component.css
Executați aplicația în dezvoltare astfel:
ng serveÎn unele cazuri nu va reuși să se compileze, când se întâmplă acest lucru reluați-o și se va compila.
Acest lucru se afișează în consolă și, de cele mai multe ori, întrerupe imediat întreaga aplicație, deoarece puteți vedea că mesajul pe care l-am înregistrat nu s-a afișat. Blocul try/catch gestionează aceste excepții în mod grațios și aplicația continuă să ruleze. Așadar, dacă ați avut un alt buton cu un bloc try catch de data aceasta, puteți observa diferența. Copiați acest lucru în fișierul app.component.html file :
Copiați codul de mai jos în fișierul app.component.ts:
Codul în bold arată aceeași instanță de eroare de referință, dar de data aceasta este înfășurată într-un bloc try-catch, astfel încât poate fi gestionată cu grație. Când rulați din nou aplicația, aceasta ar trebui să arate astfel:
Limitări ale try/catch
Oricât de grozav ar fi try/catch, dacă vă gândiți la aplicație, vedeți deja cum nu este sustenabil. Acest lucru se datorează faptului că nu vă puteți apuca să adăugați aceste blocuri try/catch în fiecare funcție din aplicație, acest lucru nu este eficient din punct de vedere al resurselor. Vestea bună este că Angular are un fel de try/catch global pe care îl putem folosi într-o locație centralizată pentru a prinde toate excepțiile.
Error handler
Angular are o clasă globală de tratare a erorilor numită errorHandler care oferă un cârlig pentru tratarea centralizată a excepțiilor în cadrul aplicației dumneavoastră. Practic, interceptează toate erorile care se întâmplă în aplicația dvs. și le înregistrează pe toate în consolă, împiedicând astfel blocarea aplicației (acesta a fost motivul pentru care primul dvs. buton nu a blocat aplicația).Sintaxa arată astfel:
Aceasta ne permite să modificăm comportamentul implicit de înregistrare a erorilor în consolă la propria noastră logică după ce am adăugat-o la lista de furnizori din modulul nostru de aplicație. Mergeți la fișierul app.component.ts și copiați codul de mai jos în el:
Blocul try catch a fost eliminat, așa că ar trebui să aveți două linii scârțâitoare (sau probleme) în editorul de cod care să semnifice două erori de referință. Acum, pentru a testa gestionarul global de erori Angular, navigați în fișierul app.module.ts și copiați codul de mai jos:
Modificările făcute la fel ca și sintaxa sugerează că am creat o clasă de gestionare a erorilor globale care implementează gestionarul de erori Angular și apoi am înregistrat-o în secțiunea furnizor. logica noastră verifică pur și simplu dacă există erori și înregistrează un mesaj pentru orice eroare găsită. Dacă salvați acest lucru și rulați aplicația, veți vedea textele înregistrate în consolă pentru fiecare eroare, iar aplicația va funcționa exact ca și cum ar fi fost un try-catch.
Serviciu de erori
Acum puteți vedea că toată logica noastră de erori se află în interiorul modulului de bază al aplicației, acesta nu este modul în care Angular ne încurajează să scriem codul. Deci, în concordanță cu păstrarea modularității, vom folosi un serviciu. îl veți numi error service și toată logica privind modul de gestionare a erorilor va fi păstrată în el. Mai întâi de toate, generați un serviciu Angular cu CLI:
ng generate service errorsau
ng g s errorApoi trebuie să eliminați logica gestionarului de erori din fișierul app.module.ts astfel încât să arate așa:
După aceea folosiți CLI pentru a genera o componentă de eroare unde utilizatorul poate fi redirecționat în cazul în care apare o eroare.
ng g c errorAcum aveți componenta de eroare nu mai este nevoie să o modificați, navigați la fișierul error.service.ts și copiați codul de mai jos în el:
Aici logica este modificată puțin pentru a verifica mai întâi tipul de eroare care este, dacă este o eroare din interior atunci navighează utilizatorul către o pagină de eroare pe măsură ce apare eroarea. Așadar, asigurați-vă că fișierul app-routing.module.ts este actualizat cu traseul astfel:
În cele din urmă, fișierul app.component.html ar trebui să arate astfel:
Dacă ați urmat postarea până în acest punct, puteți rula din nou aplicația în dezvoltare, erorile dvs. vor fi tratate cu grație, așa cum era de așteptat.
Concluzie
Ați făcut cunoștință cu erorile și cu conceptul din spatele manipulării lor în Angular cu ajutorul clasei errorHandler, cu accent pe erorile JavaScript din partea clientului. Următorul tutorial va aprofunda erorile externe, interceptorii HTTP și urmărirea erorilor cu un serviciu la distanță, bazându-se pe toate conceptele pe care le-ați învățat în această postare. Codul complet pentru acest tutorial se află pe GitHub și poate fi găsit aici.