Ja kādu laiku esat strādājis ar React, iespējams, esat saskāries ar ziņojumu “Apsveriet iespēju pievienot kļūdas robežu savu koku, lai pielāgotu kļūdu apstrādes uzvedību. Iespējams, esat to redzējis savā pārlūkprogrammas konsolē ikreiz, kad jūsu komponenti avārija.
React iesaka izmantot kļūdu robežu, lai nodrošinātu labāku lietotāja pieredzi, ja rodas kļūda.
Kāda ir kļūdu robežklase React?
Kļūdu robežas darbojas kā izmēģināt/noķert bloku vaniļas JavaScript. Atšķirība ir tāda, ka tie uztver kļūdas, kas rodas React komponentos. Ja lietotāja saskarnes komponentā rodas kļūda, React atvieno koku šajā komponentā un aizstāj to ar jūsu definēto rezerves lietotāja interfeisu. Tas nozīmē, ka kļūda ietekmē tikai to komponentu, kurā tā rodas, un pārējā lietojumprogramma darbojas, kā paredzēts.
Saskaņā ar Reaģējiet uz dokumentāciju, kļūdu robežklases neuztver kļūdas:
- Pasākumu rīkotāji.
- Asinhronais kods.
- Servera puses kods.
- Kļūdas, kas iemestas pašā kļūdu robežās (nevis tās atvasēs).
Iepriekš minētajām kļūdām varat izmantot bloku try/catch.
Piemēram, lai uztvertu kļūdu, kas rodas notikumu apstrādātājs, izmantojiet šādu kodu:
funkcijuEventComponent() {
konst [error, setError] = useState(null)konst rokturisNoklikšķiniet = () => {
mēģināt {
// Dari kaut ko
} noķert (kļūda) {
setError (kļūda)
}
}
atgriezties (
<>
<div>{kļūda? kļūda: ""}div>
<poguonClick={handleClick}>Pogapogu>
)
}
Izmantojiet kļūdu robežas, lai uztvertu kļūdas tikai React komponentos.
Kļūdu robežklases izveide
Kļūdas robežu var izveidot, definējot klasi, kurā ir viena vai abas no šīm metodēm:
- statisks getDerivedStateFromError()
- komponentsDidCatch()
Funkcija getDerivedStateFromError() atjaunina komponenta stāvokli, tiklīdz tiek konstatēta kļūda, savukārt jūs varat izmantot komponentuDidCatch(), lai konsolē reģistrētu informāciju par kļūdu. Varat arī nosūtīt kļūdas kļūdu ziņošanas pakalpojumam.
Zemāk ir piemērs, kas parāda, kā izveidot vienkāršu kļūdu robežklasi.
klasēErrorBoundarypagarinaReaģēt.Komponents{
konstruktors(rekvizīti) {
super(rekvizīti);
šis.state = { kļūda: viltus };
}statisksgetDerivedStateFromError(kļūda){
// Atjauniniet statusu, lai nākamajā renderēšanas reizē tiktu rādīts rezerves lietotāja interfeiss.
atgriezties { kļūda: kļūda };
}ComponentDidCatch (kļūda, errorInfo) {
// Reģistrējiet kļūdu kļūdu ziņošanas pakalpojumā
}render() {
ja (šis.Valsts.kļūda) {
// Šeit izveidojiet pielāgotu atkāpšanās lietotāja saskarni
atgriezties<h1>Šķiet, ka ir problēma.h1>;
}
atgrieztiesšis.rekvizīti.bērni;
}
}
eksportētnoklusējuma ErrorBoundary;
Kad rodas kļūda, getDerivedStateFromError() atjauninās stāvokli un attiecīgi aktivizēs atkārtotu renderēšanu, kas parādīs rezerves lietotāja interfeisu.
Ja nevēlaties izveidot kļūdu robežklasi no jauna, izmantojiet React-error-boundary NPM pakotne. Šī pakotne nodrošina ErrorBoundary komponentu, kas aptver komponentus, kas, jūsuprāt, var izraisīt kļūdas.
Kļūdu robežklases izmantošana
Lai apstrādātu kļūdas, aplauziet komponentus ar kļūdu robežas klases komponentu. Varat ietīt augstākā līmeņa komponentu vai atsevišķus komponentus.
Ja iesaiņojat augstākā līmeņa komponentu, kļūdu robežas klase apstrādās kļūdas, ko rada visi React lietojumprogrammas komponenti.
<ErrorBoundary>
<App/>
ErrorBoundary>
Ja iesaiņojat atsevišķu komponentu ar ErrorBoundary, šī komponenta kļūda neietekmēs cita komponenta renderēšanu.
<ErrorBoundary>
<Profils/>
ErrorBoundary>
Piemēram, kļūda profila komponentā neietekmēs cita komponenta, piemēram, Hero komponenta, renderēšanu. Lai gan profila komponents var avarēt, pārējā lietojumprogramma darbosies labi. Tas ir daudz labāk nekā React nodrošinātā vispārīgā baltā atkāpšanās ekrāna renderēšana.
Kļūdu apstrāde JavaScript
Programmēšanas kļūdas var sagādāt neapmierinātību izstrādātājiem un lietotājiem. Ja kļūdas netiek apstrādātas, lietotāji var saskarties ar neglītu lietotāja interfeisu ar grūti saprotamiem kļūdu ziņojumiem.
Veidojot React komponentu, izveidojiet kļūdu robežklasi vai nu no jauna, vai izmantojiet pakotni React-error-boundary, lai parādītu lietotājam draudzīgus kļūdu ziņojumus.