Wprowadzenie do obsługi błędów w Angular 7: Część 1 – Angular errorHandler

W tym tutorialu, zostaniesz wprowadzony do błędów w JavaScript, koncepcji try-catch i jak jest ona używana oraz małe wprowadzenie do obsługi wewnętrznych błędów z Angular errorHandler.

Błędy

Jedna z moich ulubionych gwiazd filmowych, Samuel L. Jackson, był pierwszą osobą, od której usłyszałem zdanie „błądzić jest rzeczą ludzką”, i chociaż nie pamiętam tytułu tego filmu, teraz możesz zgodzić się ze mną, że to samo dzieje się z błędami podczas pisania kodu. Jako deweloper Angular, wiesz już, że błędy mogą być spowodowane przez osobiste błędy, takie jak posiadanie deklaracji importu z nazwą rozszerzenia pliku w Angular 7 i pokazuje się w przeglądarce, jeśli nie uda ci się go złapać.

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

Błędy mogą wynikać z braku testów, komunikacji z serwerem, a nawet niejednoznaczności projektu Angular, nad którym pracujesz. Jesteśmy ludźmi i dlatego jesteśmy podatni na błędy, to jest jeden z powodów, dla których dobry edytor, taki jak VS Code, zawsze narysuje piskliwe linie, gdy zaczniesz się wykolejać.

Wymagania wstępne

Aby móc podążać za demonstracją w tym artykule powinieneś mieć:

• Node w wersji 11.0 zainstalowany na swoim komputerze.
• Node Package Manager w wersji 6.7 (zazwyczaj dostarczany z instalacją Node).
• Angular CLI w wersji 7.0
• Najnowsza wersja Angular (wersja 7)

 // run the command in a terminal ng version

Potwierdź, że używasz wersji 7, i zaktualizuj do 7, jeśli nie jesteś.Inne rzeczy, które będą nice-to-haves to:

• Pracująca znajomość frameworka Angular na poziomie początkującym.
• Znajomość z usługami Angular będzie plusem, ale nie wymogiem.

Typy błędów

Istnieje wiele typów błędów, ale będę je grupował w dwóch głównych kategoriach: błędy wewnętrzne i zewnętrzne.

• Błędy wewnętrzne: (znane również jako błędy po stronie klienta) Są to te, za które możesz zostać pociągnięty do odpowiedzialności, błędy składni, błędy menedżera pakietów, błędy referencyjne, błędy typu i wszystkie rodzaje błędów po stronie klienta, które mogą być naprawione przez programistę w ramach aplikacji Angular.
• Błędy po stronie zewnętrznej: (znane również jako błędy po stronie serwera) Te mogą rozciągać się od błędów serwera, które w większości pochodzą z trzycyfrowymi kodami statusu, takimi jak 500 do błędów sieci internetowych, a nawet błędów specyficznych dla przeglądarki. Są to w zasadzie błędy, które są poza zasięgiem aplikacji Angular stąd nazwa outsider.

Ten artykuł skupi się na błędach wewnętrznych, a następnie kolejny artykuł skupi się na błędach zewnętrznych.

Baby steps: throw and catch!

Gdy uruchamiasz funkcję w JavaScript, ta funkcja dołącza do pewnego rodzaju kolejki wykonywania funkcji i jak aplikacja działa i dostaje się do swojej kolejki, opuszcza kolejkę i zostaje wykonana. Tak więc, jeśli wystąpi błąd, JavaScript rzuca wyjątek, który natychmiast usuwa wszystkie operacje w kolejce, dopóki wyjątek nie zostanie obsłużony. Na podstawowym poziomie, wyjątki są obsługiwane za pomocą bloków try/catch, cała aplikacja zawiesza się, jeśli kompilator nie widzi tego bloku try/catch. Składnia try/catch wygląda tak:

O przydatności tego rozwiązania przekonasz się w małej demonstracji. Utwórz nowy projekt Angular za pomocą CLI, nazwij go ngapp

 ng new ngapp

Zaakceptuj ustawienia routera i wybierz zwykły CSS jako arkusz stylów. Przejdź do pliku app.component.ts i skopiuj poniższy kod:

Kopiuj je do app.component.html

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

Potem skopiuj te podstawowe stylizacje do app.component.css

Uruchom aplikację w rozwoju w ten sposób:

 ng serve

W niektórych przypadkach nie uda się jej skompilować, gdy tak się stanie uruchom ją ponownie i skompiluje się.

To pokazuje w konsoli i większość czasu, łamie całą aplikację natychmiast, jak widać wiadomość, którą zalogowaliśmy nie pokazała się. Blok try/catch obsługuje te wyjątki z wdziękiem i aplikacja kontynuuje działanie. Tak więc, jeśli miałeś inny przycisk z blokiem try catch tym razem, możesz zauważyć różnicę. Skopiuj poniższy kod do pliku app.component.html file :

Kopiuj poniższy kod do pliku app.component.ts:

Kod pogrubioną czcionką pokazuje ten sam błąd referencji, ale tym razem jest on zawinięty w blok try-catch, więc może być obsługiwany z wdziękiem. Kiedy uruchomisz aplikację ponownie, powinna wyglądać tak:

Ograniczenia try/catch

Tak wspaniałe jak try/catch jest, myśląc o aplikacji już widzisz jak to nie jest zrównoważone. Dzieje się tak dlatego, że nie możesz iść o dodaniu tych bloków try/catch w każdej funkcji w swojej aplikacji, to nie jest efektywne pod względem zasobów. Dobrą wiadomością jest to, że Angular ma rodzaj globalnego try/catch, który możemy wykorzystać w jednym scentralizowanym miejscu, aby złapać wszystkie wyjątki.

Error handler

Angular ma globalną klasę obsługi błędów o nazwie errorHandler, która zapewnia hak do scentralizowanej obsługi wyjątków wewnątrz aplikacji. W zasadzie przechwytuje ona wszystkie błędy, które zdarzają się w aplikacji i loguje je do konsoli, a także zatrzymuje aplikację przed awarią (to dlatego Twój pierwszy przycisk nie zawiesił aplikacji).Składnia wygląda tak:

To pozwala nam zmodyfikować domyślne zachowanie logowania błędów do konsoli do naszej własnej logiki po dodaniu go do naszej listy dostawców w naszym module aplikacji. Przejdź do pliku app.component.ts i skopiuj do niego poniższy kod:

Blok try catch został usunięty, więc powinieneś mieć dwie piskliwe linie (lub problemy) w swoim edytorze kodu oznaczające dwa błędy referencyjne. Teraz, aby przetestować globalny handler błędów Angulara, przejdź do pliku app.module.ts i skopiuj poniższy kod:

Zmiany dokonane tak jak składnia sugeruje, że stworzyliśmy globalną klasę obsługi błędów, która implementuje handler błędów Angulara, a następnie zarejestrowaliśmy ją w sekcji provider.Our logika po prostu sprawdza błędy i rejestruje komunikat dla każdego znalezionego błędu. Jeśli zapiszesz to i uruchomisz aplikację, zobaczysz teksty zalogowane w konsoli dla każdego błędu i aplikacji działającej tak, jak to było try-catch.

Obsługa błędów

Teraz widzisz, że cała nasza logika błędów znajduje się wewnątrz modułu głównego aplikacji, nie jest to sposób w jaki Angular zachęca nas do pisania kodu. Tak więc zgodnie z utrzymaniem wszystkiego w modularności, użyjemy usługi. nazwiemy ją error service i cała logika dotycząca obsługi błędów będzie w niej przechowywana. Po pierwsze, wygeneruj usługę Angulara za pomocą CLI:

 ng generate service error

lub

 ng g s error

Potem musisz usunąć logikę obsługi błędów w swoim pliku app.module.ts tak, aby wyglądał on tak:

Potem użyj CLI do wygenerowania komponentu błędu, do którego użytkownik może zostać przekierowany w przypadku wystąpienia błędu.

 ng g c error

Teraz masz komponent błędu, nie musisz go modyfikować, przejdź do pliku error.service.ts i skopiuj poniższy kod:

Tutaj logika jest trochę zmodyfikowana, aby najpierw sprawdzić rodzaj błędu, jeśli jest to błąd wewnętrzny to przekierowuje użytkownika na stronę błędu w momencie wystąpienia błędu. Więc upewnij się, że twój plik app-routing.module.ts jest zaktualizowany o trasę w ten sposób:

W końcu twój plik app.component.html powinien wyglądać tak:

Jeśli podążałeś za postem do tego punktu, możesz ponownie uruchomić aplikację w rozwoju, twoje błędy będą z wdziękiem obsługiwane zgodnie z oczekiwaniami.

Zakończenie

Zostałeś wprowadzony do błędów i koncepcji ich obsługi w Angular za pomocą klasy errorHandler z naciskiem na błędy JavaScript po stronie klienta. Następny tutorial będzie zagłębiał się w błędy zewnętrzne, przechwytywanie HTTP oraz śledzenie błędów za pomocą zdalnej usługi bazując na wszystkich koncepcjach, których nauczyłeś się w tym poście. Kompletny kod tego tutoriala znajduje się na GitHubie i można go znaleźć tutaj.