Jos olet työskennellyt Reactin kanssa jonkin aikaa, olet saattanut nähdä viestin, jossa lukee "Harkitse virherajan lisäämistä puusi mukauttaaksesi virheenkäsittelykäyttäytymistä." Olet ehkä nähnyt tämän selainkonsolissasi aina kun komponentit kaatua.
React suosittelee virherajan käyttöä tarjotakseen paremman käyttökokemuksen virheen sattuessa.
Mikä on Reactin virherajaluokka?
Virherajat toimivat kuten try/catch block vanilla JavaScriptissä. Erona on, että ne havaitsevat React-komponenteissa esiintyvät virheet. Jos käyttöliittymäkomponentissa tapahtuu virhe, React irrottaa kyseisen komponentin puun ja korvaa sen määrittämäsi varakäyttöliittymällä. Tämä tarkoittaa, että virhe vaikuttaa vain komponenttiin, jossa se tapahtuu, ja muu sovellus toimii odotetulla tavalla.
Mukaan Reagoi dokumentaatioon, virherajaluokat eivät havaitse virheitä seuraavista:
- Tapahtumanjärjestäjät.
- Asynkroninen koodi.
- Palvelinpuolen koodi.
- Virheet, jotka on heitetty itse virherajaan (eikä sen lapsiin).
Yllä oleviin virheisiin voit käyttää try/catch-lohkoa.
Esimerkiksi havaitaksesi virheen, joka tapahtuu tapahtumakäsittelijä, käytä seuraavaa koodia:
toimintoTapahtumakomponentti() {
konst [error, setError] = useState(tyhjä)konst HandClick = () => {
yrittää {
// Tee jotain
} ottaa kiinni (virhe) {
setError (virhe)
}
}
palata (
<>
<div>{virhe? virhe: ""}div>
<-painikettaklikkaamalla={handleClick}>Painike-painiketta>
)
}
Käytä virherajoja havaitaksesi virheet vain React-komponenteissa.
Luodaan virherajaluokka
Voit luoda virherajan määrittämällä luokan, joka sisältää yhden tai molemmat seuraavista menetelmistä:
- staattinen getDerivedStateFromError()
- componentDidCatch()
Funktio getDerivedStateFromError() päivittää komponentin tilan, kun virhe havaitaan, kun taas voit käyttää componentDidCatch()-toimintoa virhetietojen kirjaamiseen konsoliin. Voit myös lähettää virheet virheilmoituspalveluun.
Alla on esimerkki yksinkertaisen virherajaluokan luomisesta.
luokkaaErrorBoundaryulottuuReagoi.Komponentti{
rakentaja(rekvisiitta) {
super(rekvisiitta);
Tämä.state = { virhe: väärä };
}staattinengetDerivedStateFromError(virhe){
// Päivitä tila, jotta seuraava renderöinti näyttää varakäyttöliittymän.
palata { virhe: virhe };
}componentDidCatch (error, errorInfo) {
// Kirjaa virhe virheenraportointipalveluun
}render() {
jos (Tämä.osavaltio.virhe) {
// Luo mukautettu varakäyttöliittymä täällä
palata<h1>Näyttää olevan ongelma.h1>;
}
palataTämä.props.children;
}
}
viedäoletuksena ErrorBoundary;
Kun virhe tapahtuu, getDerivedStateFromError() päivittää tilan ja käynnistää sen seurauksena uudelleen renderöinnin, joka näyttää varakäyttöliittymän.
Jos et halua luoda virherajaluokkaa tyhjästä, käytä React-error-boundary NPM-paketti. Tämä paketti sisältää ErrorBoundary-komponentin, joka kiertää komponentteja, joiden uskot aiheuttavan virheitä.
Error Boundary Class -luokan käyttö
Käsittele virheitä käärimällä komponentit virherajaluokkakomponenttiin. Voit kääriä ylätason komponentin tai yksittäisiä komponentteja.
Jos käärit ylimmän tason komponentin, virherajaluokka käsittelee kaikkien React-sovelluksen komponenttien aiheuttamat virheet.
<ErrorBoundary>
<Sovellus/>
ErrorBoundary>
Jos käärit yksittäisen komponentin ErrorBoundary-merkillä, kyseisessä komponentissa oleva virhe ei vaikuta toisen komponentin hahmontamiseen.
<ErrorBoundary>
<Profiili/>
ErrorBoundary>
Esimerkiksi profiilikomponentin virhe ei vaikuta toisen komponentin, kuten Hero-komponentin, hahmonnukseen. Vaikka profiilikomponentti saattaa kaatua, muu sovellus toimii hyvin. Tämä on paljon parempi kuin Reactin tarjoaman yleisen valkoisen varanäytön renderöinti.
JavaScriptin virheiden käsittely
Ohjelmointivirheet voivat olla turhauttavia kehittäjille ja käyttäjille. Virheiden käsittelemättä jättäminen voi altistaa käyttäjäsi rumalle käyttöliittymälle, johon liittyy vaikeasti ymmärrettäviä virheilmoituksia.
Kun rakennat React-komponenttia, luo virherajaluokka joko tyhjästä tai käyttämällä react-error-boundary -pakettia näyttääksesi käyttäjäystävälliset virheilmoitukset.
