Tässä opetusohjelmassa tutustutaan JavaScriptin virheisiin, try-catch-käsitteeseen ja sen käyttöön sekä sisäisten virheiden käsittelyyn Angular errorHandlerin avulla.
Virheet
Yksi lempielokuvatähdistäni, Samuel L. Jackson, oli ensimmäinen henkilö, jolta kuulin lauseen ”erehtyä on inhimillistä”, ja vaikken nyt muistakaan kyseisen elokuvan nimeä, voitte olla kanssani samaa mieltä siitä, että sama asia tapahtuu virheiden kanssa koodia kirjoittaessa. Angular-kehittäjänä tiedät jo, että virheet voivat johtua henkilökohtaisista virheistä, kuten siitä, että Angular 7:ssä on import-lauseke, jossa on tiedostopäätteen nimi, ja se näkyy selaimessasi, jos et saa sitä kiinni.
import { DataService } from 'src/app/services/data.service.ts';Virheet voivat johtua testauksen puutteesta, palvelimen kommunikaatiosta tai jopa sen Angular-projektin epäselvyydestä, jonka parissa työskentelet. Olemme ihmisiä ja siksi alttiita virheille, se on yksi syy siihen, että hyvä editori, kuten VS Code, vetää aina vinkuvat viivat, kun alat suistua raiteilta.
Edellytykset
Voidaksesi seurata tämän artikkelin demonstraatiota sinun tulee olla:
- Koneellesi on asennettu Noden versio 11.0.
- Node Package Managerin versio 6.7 (toimitetaan yleensä Noden asennuksen mukana).
- Angular CLI:n versio 7.0
- Uudemman Angular-version (versio 7)
// run the command in a terminal ng versionVarmista, että käytät versiota 7, ja päivitä versio 7:ään, jos et käytä.Muita mukavia asioita ovat:
- Angular-kehyksen tuntemus alkeistasolla.
- Tuntemus Angular-palveluista on plussaa, mutta ei vaatimus.
Virhetyypit
Virhetyyppejä on monenlaisia, mutta ryhmittelen ne kahteen pääryhmään: sisäpiirivirheet ja ulkopuoliset virheet.
- Sisäpiirivirheet: (tunnetaan myös nimellä asiakaspuolen virheet) Nämä ovat niitä, joista sinua voidaan pitää vastuussa, syntaksivirheet, paketinhallintavirheet, viittausvirheet, tyyppivirheet ja kaikenlaiset asiakaspuolen virheet, jotka kehittäjä voi korjata Angular-sovelluksen sisällä.
- Ulkopuoliset virheet: (tunnetaan myös palvelinpuolen virheinä) Nämä voivat ulottua palvelimen virheistä, jotka useimmiten tulevat kolminumeroisilla tilakoodeilla, kuten 500, internetverkon virheisiin ja jopa selainkohtaisiin virheisiin. Nämä ovat periaatteessa virheitä, jotka ovat Angular-sovelluksen ulottumattomissa, mistä nimi outsider.
Tässä artikkelissa keskitytään sisäpiirivirheisiin, ja myöhemmässä artikkelissa keskitytään outsider-virheisiin.
Vauvojen askeleet: throw- ja catch-virheet!
Kun suoritat funktiota JavaScriptaissa, funktio liittyy eräänlaiseen funktioiden suoritusjonoon, ja sovelluksen pyöriessä ja saavuttaessa vuoron, se irtoaa suoritusjonosta ja se suoritetaan. Jos siis tapahtuu virhe, JavaScript heittää poikkeuksen, joka poistaa välittömästi kaikki jonossa olevat toiminnot, kunnes poikkeus on käsitelty. Perustasolla poikkeuksia käsitellään try/catch-lohkoilla, koko sovellus kaatuu, jos kääntäjä ei näe tätä try/catch-lohkoa. Try/catch-syntaksi näyttää tältä:
Hyödyllisyyden näet pienessä demonstraatiossa. Luo uusi Angular-projekti CLI:llä, kutsu sitä ngapp
ng new ngappHyväksy reitittimen asetukset ja valitse tyylilomakkeeksi plain CSS. Mene tiedostoon app.component.ts ja kopioi sinne alla oleva koodi:
Kopioi nämä tiedostoon app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Kopioi sitten nämä perusmuotoilut tiedostoon app.component.css
Käynnistä sovellus kehityskäytössä näin:
ng serveJossain tapauksissa se ei onnistu kääntämään, kun näin käy, suorita se uudestaan ja se kääntyy.
Tämä näkyy konsolissa ja useimmiten rikkoo koko sovelluksen välittömästi, kuten näet kirjaamamme viesti ei näkynyt. Try/catch-lohko käsittelee nämä poikkeukset tyylikkäästi ja sovellus jatkaa toimintaansa. Joten, jos sinulla oli toinen painike, jossa oli try catch-lohko tällä kertaa, voit huomata eron. Kopioi tämä tiedostoon app.component.html file :
Kopioi alla oleva koodi tiedostoon app.component.ts:
Lihavoidussa koodissa näkyy sama referenssivirhe-esimerkki, mutta tällä kertaa se on kiedottu try-catch-lohkoon, jotta se voidaan käsitellä armollisesti. Kun suoritat sovelluksen uudelleen, sen pitäisi näyttää tältä:
Pyrkimyksen/catchin rajoitukset
Niin hieno kuin try/catch onkin, sovellusta ajatellen näet jo, miten se ei ole kestävä. Tämä johtuu siitä, että et voi mennä lisäämään näitä try/catch-lohkoja sovelluksen jokaiseen funktioon, se ei ole resurssitehokasta. Hyvä uutinen on, että Angularissa on eräänlainen globaali try/catch, jota voimme käyttää yhdessä keskitetyssä paikassa pyydystämään kaikki poikkeukset.
Virheenkäsittelijä
Angularissa on globaali virheenkäsittelyluokka nimeltä errorHandler, joka tarjoaa koukun keskitettyyn poikkeuskäsittelyyn sovelluksesi sisällä. Se periaatteessa sieppaa kaikki sovelluksessasi tapahtuvat virheet ja kirjaa ne kaikki konsoliin ja estää sovelluksen kaatumisen (tämän takia ensimmäinen painikkeesi ei kaatanut sovellusta). syntaksi näyttää tältä:
Tämän avulla voimme muuttaa oletuskäyttäytymistä virheiden kirjaamisesta konsoliin omalla logiikallamme sen jälkeen, kun olemme lisänneet sen palveluntarjoajaluetteloon sovellusmoduulissamme. Siirry tiedostoon app.component.ts ja kopioi siihen alla oleva koodi:
Try catch -lohko on poistettu, joten koodieditorissasi pitäisi olla kaksi vinkuvaa riviä (tai ongelmaa), jotka merkitsevät kahta viitevirhettä. Jos haluat nyt testata Angularin globaalia virheenkäsittelijää, siirry tiedostoon app.module.ts ja kopioi alla oleva koodi:
Muutokset on tehty aivan kuten syntaksista voi päätellä, että loimme globaalin virheenkäsittelijäluokan, joka toteuttaa Angularin virheenkäsittelijän, ja rekisteröimme sen sitten palveluntarjoajaosioon. logiikkamme yksinkertaisesti tarkistaa virheet ja kirjaa viestin kaikista löytyneistä virheistä. Jos tallennat tämän ja suoritat sovelluksen, näet konsoliin kirjautuvat tekstit jokaisesta virheestä ja sovellus toimii aivan kuin se olisi try-catch.
Virhepalvelu
Nyt näet, että kaikki virhelogiikkamme on sovelluksen ydinmoduulin sisällä, tämä ei ole tapa, jolla Angular kannustaa meitä kirjoittamaan koodia. Joten kaiken modulaarisuuden säilyttämisen mukaisesti käytämme palvelua. kutsut sitä virhepalveluksi ja kaikki virheiden käsittelyyn liittyvä logiikka säilytetään siinä. Luo ensin Angular-palvelu CLI:llä:
ng generate service errortai
ng g s errorSitten sinun täytyy poistaa virheenkäsittelylogiikka app.module.ts-tiedostostasi niin, että se näyttää tältä:
Sen jälkeen käytä CLI:tä luodaksesi virhekomponentin, johon käyttäjä voidaan ohjata, jos virhe tapahtuu.
ng g c errorNyt sinulla on virhekomponentti sinun ei tarvitse muokata sitä, siirry error.service.ts tiedostoon ja kopioi alla oleva koodi siihen:
Tässä logiikkaa on muokattu hieman, jotta ensin tarkistetaan minkälainen virhe on kyseessä, jos kyseessä on sisäpiirivirhe, niin sitten se navigoi käyttäjän virhesivulle virheen sattuessa. Varmista siis, että app-routing.module.ts-tiedostosi on päivitetty reitti näin:
Loppujen lopuksi app.component.html-tiedostosi pitäisi näyttää tältä:
Jos seurasit viestiä tähän pisteeseen asti, voit ajaa sovelluksen kehityskäytössä uudestaan, virheet käsitellään sulavasti odotetulla tavalla.
Johtopäätös
Olet tutustunut virheisiin ja niiden käsittelyn käsitteeseen Angularissa errorHandler-luokan avulla keskittyen asiakaspuolen JavaScript-virheisiin. Seuraavassa opetusohjelmassa syvennytään ulkopuolisiin virheisiin, HTTP-sieppaajiin ja virheiden seurantaan etäpalvelun avulla rakentuen kaikille tässä postauksessa opituille käsitteille. Tämän tutoriaalin täydellinen koodi on GitHubissa ja löytyy täältä.