V tomto tutoriálu se seznámíte s chybami v JavaScriptu, s konceptem try-catch a jeho použitím a s malým úvodem do zpracování interních chyb pomocí Angular errorHandler.
Chyby
Jedna z mých oblíbených filmových hvězd, Samuel L. Jackson, byla úplně první osobou, od které jsem slyšel větu „chybovat je lidské“, a i když si teď nemohu vzpomenout na název konkrétního filmu, můžete se mnou souhlasit, že s chybami při psaní kódu je to stejné. Jako vývojáři Angularu už víte, že chyby mohou být způsobeny osobními chybami, například tím, že v Angularu 7 máte příkaz import s názvem přípony souboru a ten se vám zobrazí v prohlížeči, pokud ho nezachytíte.
import { DataService } from 'src/app/services/data.service.ts';Chyby mohou vzniknout z nedostatku testování, komunikace se serverem nebo dokonce z nejednoznačnosti projektu Angular, na kterém pracujete. Jsme lidé, a tak jsme náchylní k chybám, to je jeden z důvodů, proč dobrý editor, jako je VS Code, vždy nakreslí pískavé čáry, když začnete vykolejovat.
Předpoklady
Abyste mohli postupovat podle ukázky v tomto článku, měli byste mít:
- Node verze 11.0 nainstalovaný na vašem počítači.
- Správce balíčků Node verze 6.7 (obvykle se dodává s instalací Node).
- Angular CLI verze 7.0
- Nejnovější verze Angularu (verze 7)
// run the command in a terminal ng versionOvěřte si, že používáte verzi 7, a pokud ne, aktualizujte ji na 7. Další věci, které bude dobré mít, jsou:
- Pracovní znalost frameworku Angular na úrovni začátečníka.
- Znalost služeb Angular bude výhodou, ale ne podmínkou.
Typy chyb
Existuje mnoho typů chyb, ale budu je rozdělovat do dvou hlavních kategorií: vnitřní a vnější chyby.
- Vnitřní chyby: (známé také jako chyby na straně klienta) Jsou to ty, za které můžete být zodpovědní, chyby syntaxe, chyby správce balíčků, referenční chyby, typové chyby a všechny typy chyb na straně klienta, které může opravit vývojář v rámci aplikace Angular.
- Chyby na straně klienta: (známé také jako chyby na straně serveru) Tyto chyby mohou sahat od chyb serveru, které většinou přicházejí s třímístnými stavovými kódy jako 500, přes chyby internetové sítě až dokonce po chyby specifické pro prohlížeč. Jedná se v podstatě o chyby, které jsou mimo dosah aplikace Angular, proto název outsider.
Tento článek se zaměří na chyby insider a následný článek se pak bude věnovat chybám outsider.
Baby steps: throw a catch!“
Při spuštění funkce v JavaScriptu se tato funkce zařadí do jakési fronty provádění funkcí a jakmile se aplikace spustí a dostane se na řadu, frontu opustí a provede se. Pokud tedy dojde k chybě, JavaScript vyhodí výjimku, která okamžitě odstraní všechny operace ve frontě, dokud není výjimka vyřízena. Na základní úrovni se výjimky ošetřují pomocí try/catch bloků, celá aplikace spadne, pokud kompilátor tento try/catch blok nevidí. Syntaxe try/catch vypadá takto:
Užitečnost uvidíte v malé ukázce. Vytvořte pomocí CLI nový projekt Angular, nazvěte jej ngapp
ng new ngappPřijměte nastavení směrovače a jako stylový list zvolte prosté CSS. Přejděte do souboru app.component.ts a zkopírujte do něj níže uvedený kód:
Zkopírujte je do app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Poté zkopírujte tyto základní styly do app.component.css
Spusťte aplikaci ve vývoji takto:
ng serveV některých případech se ji nepodaří zkompilovat, když se to stane, spusťte ji znovu a zkompiluje se.
To se projeví v konzoli a většinou se celá aplikace okamžitě přeruší, jak vidíte, hlášení, které jsme zaznamenali, se nezobrazilo. Blok try/catch si s těmito výjimkami elegantně poradí a aplikace běží dál. Pokud jste tedy tentokrát měli další tlačítko s try catch blokem, můžete si všimnout rozdílu. Zkopírujte to do souboru app.component.html file :
Následující kód zkopírujte do souboru app.component.ts:
Kód vyznačený tučně zobrazuje stejnou chybovou instanci reference, ale tentokrát je zabalena do bloku try-catch, takže může být elegantně zpracována. Když aplikaci spustíte znovu, měla by vypadat takto:
Omezení try/catch
Jakkoli je try/catch skvělý, při přemýšlení o aplikaci už vidíte, jak není udržitelný. Je to proto, že se nemůžete pustit do přidávání těchto try/catch bloků do každé funkce v aplikaci, to není efektivní z hlediska zdrojů. Dobrou zprávou je, že Angular má jakýsi globální try/catch, který můžeme použít na jednom centralizovaném místě pro zachycení všech výjimek.
Obsluha chyb
Angular má globální třídu pro obsluhu chyb s názvem errorHandler, která poskytuje háček pro centralizovanou obsluhu výjimek uvnitř vaší aplikace. V podstatě zachytí všechny chyby, které se ve vaší aplikaci vyskytnou, a všechny je zaznamená do konzole a zabrání pádu aplikace (to byl důvod, proč vaše první tlačítko aplikaci neshodilo). syntaxe vypadá takto:
Tato funkce nám umožňuje upravit výchozí chování zaznamenávání chyb do konzole podle naší vlastní logiky poté, co jsme ji přidali do seznamu poskytovatelů v našem modulu aplikace. Přejděte do souboru app.component.ts a zkopírujte do něj níže uvedený kód:
Blok try catch byl odstraněn, takže byste měli mít v editoru kódu dva pískavé řádky (nebo problémy) označující dvě chyby odkazu. Chcete-li nyní otestovat globální obsluhu chyb systému Angular, přejděte do souboru app.module.ts a zkopírujte níže uvedený kód:
Změny provedené stejně jako syntaxe naznačují, že jsme vytvořili třídu globální obsluhy chyb, která implementuje obsluhu chyb systému Angular, a poté ji zaregistrovali v sekci provider. naše logika jednoduše kontroluje chyby a u každé nalezené chyby zaznamená zprávu. Pokud toto uložíte a aplikaci spustíte, uvidíte v konzoli texty zaznamenané u každé chyby a aplikace bude fungovat stejně, jako by šlo o try-catch.
Služba chyb
Nyní vidíte, že veškerá naše chybová logika je uvnitř modulu jádra aplikace, což není způsob, kterým nás Angular vybízí k psaní kódu. Takže v souladu s tím, aby vše bylo modulární, použijeme službu. nazveme ji chybová služba a veškerá logika, jak ošetřit chyby, bude uložena v ní. Nejprve si pomocí CLI vygenerujte službu Angular:
ng generate service errornebo
ng g s errorPoté musíte ze svého souboru app.module.ts odstranit logiku obsluhy chyb, takže bude vypadat takto:
Poté pomocí CLI vygenerujte chybovou komponentu, kam může být uživatel přesměrován, pokud dojde k chybě.
ng g c errorTeď už máte chybovou komponentu, kterou nemusíte nijak upravovat, přejděte do souboru error.service.ts a zkopírujte do něj níže uvedený kód:
Tady je logika trochu upravena, aby nejprve zkontrolovala, o jaký druh chyby se jedná, pokud se jedná o vnitřní chybu, pak uživatele naviguje na chybovou stránku, jakmile k chybě dojde. Ujistěte se tedy, že váš soubor app-routing.module.ts je aktualizován o trasu takto:
Nakonec by váš soubor app.component.html měl vypadat takto:
Pokud jste postupovali podle příspěvku až sem, můžete aplikaci znovu spustit ve vývoji, vaše chyby budou elegantně zpracovány podle očekávání.
Závěr
Byli jste seznámeni s chybami a koncepcí jejich zpracování v systému Angular pomocí třídy errorHandler se zaměřením na chyby JavaScriptu na straně klienta. V příštím tutoriálu se budeme hlouběji věnovat chybám outsiderů, interceptorům HTTP a sledování chyb pomocí vzdálené služby, přičemž budeme vycházet ze všech konceptů, které jste se naučili v tomto příspěvku. Kompletní kód tohoto tutoriálu je na GitHubu a najdete jej zde.