Bevezetés a hibakezelésbe az Angular 7-ben: 1. rész – Angular errorHandler

Ez a bemutató bemutatja a JavaScriptben előforduló hibákat, a try-catch koncepciót és annak használatát, valamint egy kis bevezetés a belső hibák kezelésébe az Angular errorHandlerrel.

Hibák

Az egyik kedvenc filmsztárom, Samuel L. Jackson volt a legelső, akitől hallottam a “tévedni emberi dolog” mondást, és bár most nem emlékszem a konkrét film címére, egyetérthetsz velem abban, hogy a kódírás során ugyanez történik a hibákkal is. Angular fejlesztőként már tudod, hogy a hibákat személyes hibák is okozhatják, például ha az Angular 7-ben az import utasításban a fájlkiterjesztés neve szerepel, és ez megjelenik a böngésződben, ha nem sikerül elkapni.

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

A hibák keletkezhetnek a tesztelés hiányából, a szerverkommunikációból vagy akár az Angular projekt kétértelműségéből, amelyen dolgozol. Emberek vagyunk, és így hajlamosak vagyunk a hibákra, ez az egyik oka annak, hogy egy jó szerkesztő, mint a VS Code mindig nyikorgó vonalakat húz, amikor elkezdesz kisiklani.

Előfeltételek

Hogy végig tudd követni a cikk bemutatását, rendelkezned kell:

• Node 11.0 verziója telepítve a gépeden.
• Node Package Manager 6.7 verzió (általában a Node telepítésével együtt szállítják).
• Angular CLI 7-es verziója.0
• Az Angular legújabb verziója (7-es verzió)

 // run the command in a terminal ng version

Visszaigazolja, hogy a 7-es verziót használja, és frissítse a 7-esre, ha nem.Egyéb dolgok, amik nice-to-have-ek lesznek:

• Az Angular keretrendszer kezdő szintű ismerete.
• Az Angular szolgáltatások ismerete előny, de nem követelmény.

A hibák típusai

A hibáknak sok típusa van, de két fő kategóriába fogom őket csoportosítani: bennfentes és kívülálló hibák.

• Bennfentes hibák: (más néven kliensoldali hibák) Ezek azok, amelyekért felelősségre vonhatóak, a szintaxis hibák, csomagkezelői hibák, hivatkozási hibák, típushibák és minden olyan típusú kliensoldali hiba, amelyet a fejlesztő az Angular alkalmazáson belül javíthat.
• Külső hibák: (más néven szerveroldali hibák) Ezek a szerverhibáktól kezdve, amelyek többnyire háromjegyű státuszkódokkal, például 500-as kóddal jelennek meg, az internetes hálózati hibákon át egészen a böngészőspecifikus hibákig terjedhetnek. Ezek alapvetően olyan hibák, amelyek kívül esnek az Angular alkalmazás hatókörén, innen az outsider elnevezés.

Ez a cikk a bennfentes hibákra fog koncentrálni, majd egy későbbi cikk a outsider hibákra fog koncentrálni.

Baba lépések: throw és catch!

Mikor egy függvényt futtatunk JavaScriptben, az a függvény egyfajta függvényvégrehajtási sorba kerül, és ahogy az alkalmazás fut és sorra kerül, kilép a sorból és végrehajtásra kerül. Ha tehát hiba lép fel, a JavaScript kivételt dob, ami azonnal eltávolítja a sorban lévő összes műveletet, amíg a kivételt nem kezelik. Alapszinten a kivételeket try/catch blokkokkal kezeljük, az egész alkalmazás összeomlik, ha a fordító nem látja ezt a try/catch blokkot. A try/catch szintaxis így néz ki:

Egy kis demonstrációban látni fogjuk a hasznosságát. Hozzunk létre egy új Angular projektet a CLI-vel, nevezzük el ngapp

 ng new ngapp

Vegyük el az útválasztó beállításait, és válasszuk a sima CSS-t stíluslapnak. Menj a app.component.ts fájlba és másold be az alábbi kódot:

Másold ezeket a app.component.html

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

Majd másold ezeket az alapvető stílusjegyeket a app.component.css

Futtasd az alkalmazást fejlesztés közben így:

 ng serve

Egyes esetekben nem fog lefordítani, ha ez megtörténik, futtasd újra és le fog fordítani.

Ez megjelenik a konzolon és legtöbbször azonnal megszakítja az egész alkalmazást, ahogy láthatjuk az általunk naplózott üzenet nem jelent meg. A try/catch blokk kecsesen kezeli ezeket a kivételeket, és az alkalmazás tovább fut. Tehát, ha ezúttal egy másik gombot kaptunk egy try catch blokkal, akkor észrevehetjük a különbséget. Másoljuk be ezt a app.component.html file :

Másoljuk be az alábbi kódot a app.component.ts fájlba:

A félkövérrel szedett kód ugyanazt a hivatkozási hibapéldányt mutatja, de ezúttal egy try-catch blokkba van csomagolva, így kecsesen kezelhető. Ha újra futtatjuk az alkalmazást, így kell kinéznie:

A try/catch korlátai

Amilyen nagyszerű is a try/catch, az alkalmazásba belegondolva már látjuk, hogy nem fenntartható. Ennek az az oka, hogy nem mehetsz oda, hogy ezeket a try/catch blokkokat az alkalmazás minden függvényébe beilleszted, ez nem erőforrás-hatékony. A jó hír az, hogy az Angular rendelkezik egyfajta globális try/catch-sel, amit egy központi helyen használhatunk az összes kivétel elkapására.

Hibakezelő

Angular rendelkezik egy globális hibakezelő osztállyal, az errorHandlerrel, ami egy horgot biztosít a központosított kivételkezeléshez az alkalmazáson belül. Alapvetően az összes hibát elfogja, ami az alkalmazásodban történik, és az összeset naplózza a konzolra, és megakadályozza az alkalmazás összeomlását (ez volt az oka annak, hogy az első gombod nem ütötte össze az alkalmazást).A szintaxis így néz ki:

Ez lehetővé teszi számunkra, hogy a hibák konzolra való naplózásának alapértelmezett viselkedését a saját logikánkhoz igazítsuk, miután hozzáadtuk a szolgáltatóink listájához az alkalmazásmodulunkban. Menjünk a app.component.ts fájlba, és másoljuk bele az alábbi kódot:

A try catch blokkot eltávolítottuk, így a kódszerkesztőnkben két nyikorgó sornak (vagy problémának) kell lennie, ami két hivatkozási hibát jelez. Most az Angular globális hibakezelőjének teszteléséhez navigáljunk a app.module.ts fájlba, és másoljuk be az alábbi kódot:

A változtatások úgy történtek, ahogy a szintaxis sugallja, létrehoztunk egy globális hibakezelő osztályt, amely megvalósítja az Angular hibakezelőjét, majd regisztráltuk a szolgáltató szakaszban. logikánk egyszerűen ellenőrzi a hibákat, és minden talált hiba esetén üzenetet ír ki. Ha ezt elmentjük és futtatjuk az alkalmazást, akkor minden hiba esetén látni fogjuk a konzolban naplózott szövegeket és az alkalmazás úgy működik, mintha egy try-catch lenne.

Error service

Most láthatjuk, hogy az összes hibalogikánk a core app modulon belül van, az Angular nem így ösztönöz minket a kód írására. Tehát összhangban azzal, hogy mindent modulárisan tartsunk, használunk egy szolgáltatást. hiba szolgáltatásnak fogjuk hívni, és az összes logikát, hogy hogyan kezeljük a hibáinkat, ebben fogjuk tartani. Először is generáljunk egy Angular szolgáltatást a CLI-vel:

 ng generate service error

vagy

 ng g s error

Ezután a app.module.ts fájlunkból el kell távolítani a hibakezelő logikát, hogy így nézzen ki:

Ezután a CLI segítségével generáljunk egy hibakomponenst, ahová a felhasználót átirányíthatjuk hiba esetén.

 ng g c error

Most már megvan a hiba komponens nem kell módosítani, navigálj a error.service.ts fájlhoz és másold bele az alábbi kódot:

Itt a logika egy kicsit módosul, hogy először ellenőrizze, hogy milyen hibáról van szó, ha ez egy bennfentes hiba, akkor a hiba bekövetkezésekor egy hibaoldalra navigálja a felhasználót. Tehát győződj meg róla, hogy a app-routing.module.ts fájlodat így frissítetted az útvonallal:

Végül a app.component.html fájlodnak így kell kinéznie:

Ha eddig a pontig követted a hozzászólást, akkor újra futtathatod az alkalmazást fejlesztésben, a hibákat méltóságteljesen kezeli az elvárt módon.

Következtetés

Elismerkedtél a hibákkal és a hibakezelés koncepciójával az Angularban az errorHandler osztály segítségével, a kliensoldali JavaScript hibákra összpontosítva. A következő bemutató elmélyül a külső hibák, a HTTP elfogók és a hibakövetés egy távoli szolgáltatással, az ebben a bejegyzésben megtanult fogalmakra építve. A bemutató teljes kódja a GitHubon található, és itt érhető el.