Jei kurį laiką dirbote su „React“, galbūt matėte pranešimą „Apsvarstykite galimybę pridėti klaidos ribą savo medį, kad pritaikytumėte klaidų apdorojimo elgseną. Galbūt matėte tai savo naršyklės konsolėje, kai naudojate komponentus avarija.
„React“ rekomenduoja naudoti klaidos ribą, kad įvykus klaidai būtų teikiama geresnė vartotojo patirtis.
Kas yra „React“ klaidų ribos klasė?
Klaidų ribos veikia kaip try/catch block vanilla JavaScript. Skirtumas tas, kad jie užfiksuoja klaidas, atsirandančias „React“ komponentuose. Jei vartotojo sąsajos komponente įvyksta klaida, „React“ atjungia to komponento medį ir pakeičia jį jūsų apibrėžta atsargine vartotojo sąsaja. Tai reiškia, kad klaida turi įtakos tik komponentui, kuriame ji įvyksta, o likusi programos dalis veikia taip, kaip tikėtasi.
Pagal Reaguoti į dokumentus, klaidų ribų klasės nefiksuoja klaidų:
- Renginių vedėjai.
- Asinchroninis kodas.
- Serverio kodas.
- Klaidos, įmestos į pačią klaidų ribą (o ne jos vaikus).
Aukščiau nurodytoms klaidoms galite naudoti bloką try/catch.
Pavyzdžiui, norėdami užfiksuoti klaidą, įvykusią įvykių vedėjas, naudokite šį kodą:
funkcijaĮvykio komponentas() {
konst [klaida, setError] = useState(nulinis)konst rankenaSpustelėkite = () => {
bandyti {
// Daryk ką nors
} sugauti (klaida) {
setError (klaida)
}
}
grąžinti (
<>
<div>{klaida? klaida: ""}div>
<mygtukąpaspaudus={handleClick}>Mygtukasmygtuką>
)
}
Naudokite klaidų ribas, kad gautumėte klaidas tik „React“ komponentuose.
Klaidų ribinės klasės kūrimas
Galite sukurti klaidos ribą apibrėždami klasę, kurioje yra vienas arba abu iš šių metodų:
- statinis getDerivedStateFromError()
- komponentasDidCatch()
Funkcija getDerivedStateFromError() atnaujina komponento būseną, kai užfiksuojama klaida, o galite naudoti komponentąDidCatch() klaidos informacijai įrašyti į konsolę. Taip pat galite siųsti klaidas pranešimų apie klaidas tarnybai.
Žemiau pateikiamas pavyzdys, rodantis, kaip sukurti paprastą klaidų ribinę klasę.
klasėErrorBoundarytęsiasiReaguoti.Komponentas{
konstruktorius(rekvizitas) {
super(rekvizitas);
tai.state = { klaida: klaidinga };
}statinisgetDerivedStateFromError(klaida){
// Atnaujinkite būseną, kad kitame atvaizdavime būtų rodoma atsarginė vartotojo sąsaja.
grąžinti { klaida: klaida };
}ComponentDidCatch (klaida, errorInfo) {
// Užregistruokite klaidą pranešimų apie klaidas tarnyboje
}render() {
jeigu (tai.valstybė.klaida) {
// Čia sukurkite tinkintą atsarginę vartotojo sąsają
grąžinti<h1>Atrodo, kad yra problema.h1>;
}
grąžintitai.rekvizitai.vaikai;
}
}
eksportuotinumatytas ErrorBoundary;
Įvykus klaidai, getDerivedStateFromError() atnaujins būseną ir suaktyvins pakartotinį pateikimą, kuriame bus rodoma atsarginė vartotojo sąsaja.
Jei nenorite sukurti klaidos ribinės klasės nuo nulio, naudokite React-error-boundary NPM paketas. Šiame pakete pateikiamas ErrorBoundary komponentas, apimantis komponentus, kurie, jūsų manymu, gali sukelti klaidų.
Klaidų ribinės klasės naudojimas
Norėdami tvarkyti klaidas, apvyniokite komponentus klaidos ribos klasės komponentu. Galite apvynioti aukščiausio lygio komponentą arba atskirus komponentus.
Jei apvyniosite aukščiausio lygio komponentą, klaidos ribos klasė apdoros visų programos „React“ komponentų išmestas klaidas.
<ErrorBoundary>
<Programėlė/>
ErrorBoundary>
Jei apvyniosite atskirą komponentą su ErrorBoundary, to komponento klaida neturės įtakos kito komponento atvaizdavimui.
<ErrorBoundary>
<Profilis/>
ErrorBoundary>
Pavyzdžiui, profilio komponento klaida neturės įtakos kito komponento, pvz., Hero komponento, pateikimui. Nors profilio komponentas gali sugesti, likusi programos dalis veiks gerai. Tai daug geriau nei pateikti bendrą baltą atsarginį ekraną, kurį teikia „React“.
„JavaScript“ klaidų tvarkymas
Programavimo klaidos gali nuliūdinti kūrėjus ir vartotojus. Nesugebėdami apdoroti klaidų, naudotojai gali susidurti su bjauria vartotojo sąsaja su sunkiai suprantamais klaidų pranešimais.
Kurdami „React“ komponentą, sukurkite klaidos ribų klasę nuo nulio arba naudodami paketą „react-error-boundary“, kad būtų rodomi patogūs klaidų pranešimai.
