In questo tutorial, sarete introdotti agli errori in JavaScript, il concetto try-catch e come viene usato e una piccola introduzione alla gestione degli errori interni con Angular errorHandler.
Errori
Una delle mie star preferite, Samuel L. Jackson, è stata la prima persona da cui ho sentito la frase “errare è umano”, e anche se non ricordo il titolo del film in particolare, ora potete essere d’accordo con me che la stessa cosa accade con gli errori quando si scrive codice. Come sviluppatore Angular, sai già che gli errori possono essere causati da errori personali, come avere una dichiarazione di importazione con il nome dell’estensione del file in Angular 7 e si presenta nel tuo browser se non riesci a prenderlo.
import { DataService } from 'src/app/services/data.service.ts';Gli errori possono nascere dalla mancanza di test, dalle comunicazioni del server, o anche dall’ambiguità del progetto Angular a cui stai lavorando. Siamo esseri umani e quindi siamo inclini agli errori, questo è uno dei motivi per cui un buon editor come VS Code disegnerà sempre le linee stridenti quando si inizia a deragliare.
Prequisiti
Per essere in grado di seguire la dimostrazione di questo articolo dovreste avere:
- Node versione 11.0 installato sulla vostra macchina.
- Node Package Manager versione 6.7 (solitamente viene fornito con l’installazione di Node).
- Angular CLI versione 7.0
- L’ultima versione di Angular (versione 7)
// run the command in a terminal ng versionConfermare che si sta utilizzando la versione 7, e aggiornare alla 7 se non lo si è.Altre cose che sarà bello avere sono:
- Una conoscenza lavorativa del framework Angular ad un livello principiante.
- La familiarità con i servizi Angular sarà un vantaggio ma non un requisito.
Tipi di errori
Ci sono molti tipi di errori ma li raggrupperò in due categorie principali: errori interni ed esterni.
- Errori interni: (noti anche come errori lato client) Questi sono quelli di cui si può essere ritenuti responsabili, gli errori di sintassi, gli errori del gestore dei pacchetti, gli errori di riferimento, gli errori di tipo e tutti i tipi di errori lato client che possono essere risolti dallo sviluppatore all’interno dell’applicazione Angular.
- Errori esterni: (conosciuti anche come errori lato server) Questi possono spaziare da errori del server, che per lo più vengono con codici di stato a tre cifre come 500 a errori di rete internet, fino a errori specifici del browser. Questi sono fondamentalmente errori che sono fuori dalla portata dell’applicazione Angular, da cui il nome outsider.
Questo articolo si concentrerà sugli errori insider e poi un articolo successivo si concentrerà sugli errori outsider.
Baby steps: throw and catch!
Quando si esegue una funzione in JavaScript, quella funzione si unisce a una sorta di coda di esecuzione delle funzioni e come l’applicazione gira e arriva al suo turno lascia la coda e viene eseguita. Quindi, se si verifica un errore, JavaScript lancia un’eccezione, che rimuove immediatamente tutte le operazioni nella coda fino a quando l’eccezione viene gestita. A livello di base, le eccezioni sono gestite con blocchi try/catch, l’intera applicazione va in crash se il compilatore non vede questo blocco try/catch. La sintassi try/catch assomiglia a questa:
Vedrai l’utilità in una piccola dimostrazione. Create un nuovo progetto Angular con la CLI, chiamatelo ngapp
ng new ngappAccettate le impostazioni del router e scegliete i semplici CSS come foglio di stile. Vai al file app.component.ts e copia il codice qui sotto:
Copia questi nel app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Poi copia questi stili di base nel app.component.css
Esegui l’applicazione in sviluppo in questo modo:
ng serveIn alcuni casi non riuscirà a compilare, quando ciò accade riesegui e verrà compilata.
Questo viene mostrato nella console e la maggior parte delle volte, interrompe immediatamente l’intera applicazione come potete vedere il messaggio che abbiamo registrato non è stato mostrato. Il blocco try/catch gestisce queste eccezioni con grazia e l’applicazione continua a funzionare. Quindi, se avete un altro pulsante con un blocco try catch questa volta, potete notare la differenza. Copia questo nel file app.component.html file :
Copia il codice qui sotto nel file app.component.ts:
Il codice in grassetto mostra la stessa istanza di errore di riferimento, ma questa volta è avvolto in un blocco try-catch in modo che possa essere gestito con grazia. Quando esegui di nuovo l’applicazione, dovrebbe apparire così:
Limitazioni del try/catch
Per quanto grande sia il try/catch, pensando all’applicazione vedi già come non sia sostenibile. Questo perché non si può andare ad aggiungere questi blocchi try/catch in ogni funzione della vostra applicazione, che non è efficace in termini di risorse. La buona notizia è che Angular ha una sorta di try/catch globale che possiamo usare in una posizione centralizzata per catturare tutte le eccezioni.
Gestore degli errori
Angular ha una classe globale di gestione degli errori chiamata errorHandler che fornisce un gancio per la gestione centralizzata delle eccezioni all’interno della vostra applicazione. Fondamentalmente intercetta tutti gli errori che si verificano nella vostra applicazione, e li registra tutti nella console, e impedisce all’applicazione di andare in crash (questo è il motivo per cui il vostro primo pulsante non ha mandato in crash l’applicazione).La sintassi assomiglia a questa:
Questo ci permette di modificare il comportamento predefinito di registrare gli errori nella console con la nostra logica dopo averla aggiunta alla nostra lista di fornitori nel nostro modulo dell’applicazione. Andate al file app.component.ts e copiate il codice qui sotto:
Il blocco try catch è stato rimosso, quindi dovreste avere due linee stridenti (o problemi) nel vostro editor di codice che indicano due errori di riferimento. Ora per testare il gestore di errori globale di Angular, navigate al file app.module.ts e copiate il codice qui sotto:
Le modifiche apportate proprio come la sintassi suggerisce abbiamo creato una classe di gestore di errori globale che implementa il gestore di errori di Angular e poi l’abbiamo registrata nella sezione provider.La nostra logica controlla semplicemente gli errori e registra un messaggio per ogni errore trovato. Se salvate questo ed eseguite l’applicazione vedrete i testi registrati nella console per ogni errore e l’applicazione che funziona proprio come se fosse un try-catch.
Servizio errori
Ora potete vedere che tutta la nostra logica degli errori è all’interno del modulo principale dell’applicazione, questo non è il modo in cui Angular ci incoraggia a scrivere codice. Quindi, in linea con il mantenere tutto modulare, usiamo un servizio. Lo chiameremo error service e tutta la logica su come gestire gli errori sarà tenuta in esso. Prima di tutto, generate un servizio Angular con la CLI:
ng generate service erroro
ng g s errorPoi dovete rimuovere la logica del gestore degli errori nel vostro file app.module.ts in modo che assomigli a questo:
Dopo di che usate la CLI per generare un componente di errore dove l’utente può essere reindirizzato se si verifica un errore.
ng g c errorOra che avete il componente di errore non avete bisogno di modificarlo, navigate al file error.service.ts e copiate il codice qui sotto:
Qui la logica è modificata un po’ per controllare prima il tipo di errore, se è un errore insider allora naviga l’utente verso una pagina di errore quando l’errore si verifica. Quindi assicurati che il tuo file app-routing.module.ts sia aggiornato con il percorso come questo:
Infine, il tuo file app.component.html dovrebbe assomigliare a questo:
Se hai seguito il post fino a questo punto, puoi eseguire nuovamente l’applicazione in sviluppo, i tuoi errori saranno gestiti con grazia come previsto.
Conclusione
Si sono introdotti gli errori e il concetto dietro la loro gestione in Angular con la classe errorHandler con particolare attenzione agli errori JavaScript lato client. Il prossimo tutorial approfondirà gli errori esterni, gli intercettatori HTTP e il tracciamento degli errori con un servizio remoto basandosi su tutti i concetti che avete imparato in questo post. Il codice completo di questo tutorial è su GitHub e può essere trovato qui.