Če ste nekaj časa delali z Reactom, ste morda naleteli na sporočilo, ki se glasi »Razmislite o dodajanju meje napake vaše drevo, da prilagodite obnašanje obravnave napak." To ste morda videli v konzoli brskalnika, kadar koli so vaše komponente strmoglavljenje.
React priporoča uporabo meje napake za zagotavljanje boljše uporabniške izkušnje, ko pride do napake.
Kaj je mejni razred napake v Reactu?
Meje napak delujejo kot poskusi/ulovi blok v vanilla JavaScript. Razlika je v tem, da ujamejo napake, ki se pojavijo v komponentah React. Če pride do napake v komponenti uporabniškega vmesnika, React odklopi drevo znotraj te komponente in ga nadomesti z nadomestnim uporabniškim vmesnikom, ki ste ga definirali. To pomeni, da napaka vpliva le na komponento, v kateri se pojavi, preostali del aplikacije pa deluje po pričakovanjih.
Glede na Dokumentacija React, mejni razredi napak ne ujamejo napak v:
- Obdelovalci dogodkov.
- Asinhrona koda.
- Koda na strani strežnika.
- Napake, vržene v samo mejo napake (namesto njenih podrejenih elementov).
Za zgornje napake lahko uporabite blok try/catch.
Na primer, če želite ujeti napako, ki se pojavi v obdelovalec dogodkov, uporabite naslednjo kodo:
funkcijoEventComponent() {
konst [napaka, setError] = useState(nič)konst handleClick = () => {
poskusi {
// Naredi kaj
} ulov (napaka) {
setError (napaka)
}
}
vrnitev (
<>
<div>{napaka? napaka: ""}div>
<gumbonClick={handleClick}>Gumbgumb>
)
}
Uporabite meje napak za lovljenje napak samo v komponentah React.
Ustvarjanje mejnega razreda napak
Mejo napake lahko ustvarite tako, da definirate razred, ki vsebuje eno ali obe od naslednjih metod:
- statični getDerivedStateFromError()
- komponentDidCatch()
Funkcija getDerivedStateFromError() posodobi stanje komponente, ko je napaka ulovljena, medtem ko lahko uporabite componentDidCatch() za beleženje informacij o napaki v konzolo. Napake lahko pošljete tudi storitvi za poročanje o napakah.
Spodaj je primer, ki prikazuje, kako ustvariti preprost razred meje napake.
razredErrorBoundaryse raztezaReagiraj.Komponenta{
konstruktor(rekviziti) {
super(rekviziti);
to.state = { napaka: lažno };
}statičnagetDerivedStateFromError(napaka){
// Posodobi stanje, da bo naslednji upodabljalnik prikazal nadomestni uporabniški vmesnik.
vrnitev { napaka: napaka };
}componentDidCatch (napaka, errorInfo) {
// Zapiši napako v storitev za poročanje o napakah
}render() {
če (to.država.napaka) {
// Tukaj ustvarite nadomestni uporabniški vmesnik po meri
vrnitev<h1>Zdi se, da obstaja težava.h1>;
}
vrnitevto.rekviziti.otroci;
}
}
izvozprivzeto ErrorBoundary;
Ko pride do napake, bo getDerivedStateFromError() posodobil stanje in posledično sprožil ponovno upodabljanje, ki bo prikazalo nadomestni uporabniški vmesnik.
Če ne želite ustvariti razreda meje napak od začetka, uporabite odziv-napaka-meja NPM paket. Ta paket ponuja komponento ErrorBoundary, ki se ovije okoli komponent, za katere menite, da bi lahko povzročile napake.
Uporaba mejnega razreda napake
Za obravnavo napak ovijte komponente s komponento razreda meje napake. Ovijete lahko komponento najvišje ravni ali posamezne komponente.
Če ovijete komponento najvišje ravni, bo razred meje napak obravnaval napake, ki jih vržejo vse komponente v aplikaciji React.
<ErrorBoundary>
<aplikacija/>
ErrorBoundary>
Če posamezno komponento ovijete z ErrorBoundary, napaka v tej komponenti ne bo vplivala na upodabljanje druge komponente.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
Napaka v komponenti profila na primer ne bo vplivala na upodabljanje druge komponente, kot je komponenta Hero. Medtem ko se komponenta profila lahko zruši, bo preostali del aplikacije deloval dobro. To je veliko boljše od upodabljanja generičnega belega rezervnega zaslona, ki ga ponuja React.
Obravnava napak v JavaScriptu
Programske napake so lahko frustrirajoče za razvijalce in uporabnike. Če napak ne boste obravnavali, lahko vaše uporabnike izpostavite grdemu uporabniškemu vmesniku s težko razumljivimi sporočili o napakah.
Ko gradite svojo komponento React, ustvarite razred meje napak bodisi od začetka bodisi z uporabo paketa react-error-boundary za prikaz uporabniku prijaznih sporočil o napakah.
