Hvis du har jobbet med React en stund, kan det hende du har møtt en melding som lyder "Vurder å legge til en feilgrense til treet ditt for å tilpasse feilhåndteringsatferd." Du har kanskje sett dette i nettleserkonsollen når komponentene dine brak.
React anbefaler å bruke en feilgrense for å gi en bedre brukeropplevelse når en feil oppstår.
Hva er feilgrenseklassen i React?
Feilgrenser fungerer som prøv/fang blokk i vanilje JavaScript. Forskjellen er at de fanger opp feilene som oppstår i React-komponenter. Hvis det oppstår en feil i en brukergrensesnittkomponent, demonterer React treet i den komponenten og erstatter det med reservegrensesnittet du har definert. Dette betyr at en feil kun påvirker komponenten den oppstår i og resten av applikasjonen fungerer som forventet.
Ifølge Reager dokumentasjon, feilgrenseklasser fanger ikke opp feil i:
- Hendelsesbehandlere.
- Asynkron kode.
- Kode på serversiden.
- Feil kastet i selve feilgrensen (snarere enn dens barn).
For de ovennevnte feilene kan du bruke try/catch-blokken.
For eksempel for å fange en feil som oppstår i hendelsesbehandler, bruk følgende kode:
funksjonEventComponent() {
konst [error, setError] = useState(null)konst handleClick = () => {
prøve {
// Gjør noe
} å fange (feil) {
setError (feil)
}
}
komme tilbake (
<>
<div>{feil? feil: ""}div>
<knappved trykk={handleClick}>Knappknapp>
)
}
Bruk feilgrenser kun for å fange opp feil i React-komponenter.
Opprette en feilgrenseklasse
Du kan opprette en feilgrense ved å definere en klasse som inneholder én eller begge av følgende metoder:
- statisk getDerivedStateFromError()
- componentDidCatch()
GetDerivedStateFromError()-funksjonen oppdaterer komponenttilstanden når feilen er fanget, mens du kan bruke componentDidCatch() til å logge feilinformasjon til konsollen. Du kan også sende feilene til en feilmeldingstjeneste.
Nedenfor er et eksempel som viser hvordan du lager en enkel feilgrenseklasse.
klasseFeilgrensestrekkerReagere.Komponent{
konstruktør(Rekvisitter) {
super(Rekvisitter);
dette.state = { feil: falsk };
}statiskgetDerivedStateFromError(feil){
// Oppdater tilstanden slik at neste gjengivelse viser reservegrensesnittet.
komme tilbake { feil: feil };
}componentDidCatch (feil, errorInfo) {
// Logg feilen til en feilrapporteringstjeneste
}render() {
hvis (dette.stat.feil) {
// Opprett et tilpasset reservegrensesnitt her
komme tilbake<h1>Det ser ut til å være et problem.h1>;
}
komme tilbakedette.rekvisitter.barn;
}
}
eksportmisligholde ErrorBoundary;
Når det oppstår en feil, vil getDerivedStateFromError() oppdatere tilstanden og følgelig utløse en gjengivelse som viser reservegrensesnittet.
Hvis du ikke vil opprette feilgrenseklassen fra bunnen av, bruk react-error-boundary NPM-pakke. Denne pakken inneholder ErrorBoundary-komponenten som omslutter komponenter du tror kan gi feil.
Bruke feilgrenseklassen
For å håndtere feil, pakk komponenter med feilgrenseklassekomponenten. Du kan pakke inn toppnivåkomponenten eller individuelle komponenter.
Hvis du pakker inn toppnivåkomponenten, vil feilgrenseklassen håndtere feilene som genereres av alle komponentene i React-applikasjonen.
<Feilgrense>
<App/>
Feilgrense>
Hvis du bryter en individuell komponent med en Error Boundary, vil ikke en feil i den komponenten påvirke hvordan en annen komponent gjengis.
<Feilgrense>
<Profil/>
Feilgrense>
For eksempel vil en feil i profilkomponenten ikke påvirke hvordan en annen komponent som Hero-komponenten gjengis. Selv om profilkomponenten kan krasje, vil resten av programmet fungere fint. Dette er mye bedre enn å gjengi den generiske hvite reserveskjermen levert av React.
Håndtering av feil i JavaScript
Programmeringsfeil kan være frustrerende for utviklere og brukere. Unnlatelse av å håndtere feil kan utsette brukerne dine for stygg brukergrensesnitt med vanskelige å forstå feilmeldinger.
Når du bygger din React-komponent, lag en feilgrenseklasse enten fra bunnen av eller bruk react-error-boundary-pakken for å vise brukervennlige feilmeldinger.
