Hvis du har arbejdet med React i et stykke tid, er du muligvis stødt på en meddelelse, der lyder "Overvej at tilføje en fejlgrænse til dit træ for at tilpasse fejlhåndteringsadfærd." Du har måske set dette i din browserkonsol, hver gang dine komponenter krak.
React anbefaler at bruge en fejlgrænse for at give en bedre brugeroplevelse, når der opstår en fejl.
Hvad er fejlgrænseklassen i React?
Fejlgrænser fungerer som prøv/fang blok i vanilje JavaScript. Forskellen er, at de fanger de fejl, der opstår i React-komponenter. Hvis der opstår en fejl i en UI-komponent, afmonterer React træet i den komponent og erstatter det med den reserve-UI, du har defineret. Det betyder, at en fejl kun påvirker den komponent, hvori den opstår, og resten af applikationen fungerer som forventet.
Ifølge Reager dokumentation, fejlgrænseklasser fanger ikke fejl i:
- Begivenhedsbehandlere.
- Asynkron kode.
- Kode på serversiden.
- Fejl kastet i selve fejlgrænsen (i stedet for dens børn).
For ovenstående fejl kan du bruge try/catch-blokken.
For eksempel at fange en fejl, der opstår i hændelseshandler, brug følgende kode:
fungereEventComponent() {
konst [fejl, setError] = useState(nul)konst handleClick = () => {
prøve {
// Gør noget
} fangst (fejl) {
setError (fejl)
}
}
Vend tilbage (
<>
<div>{fejl? fejl: ""}div>
<knappåKlik={handleClick}>Knapknap>
)
}
Brug fejlgrænser til kun at fange fejl i React-komponenter.
Oprettelse af en fejlgrænseklasse
Du kan oprette en fejlgrænse ved at definere en klasse, der indeholder en eller begge af følgende metoder:
- statisk getDerivedStateFromError()
- componentDidCatch()
GetDerivedStateFromError()-funktionen opdaterer komponenttilstanden, når fejlen er fanget, mens du kan bruge componentDidCatch() til at logge fejloplysninger til konsollen. Du kan også sende fejlene til en fejlrapporteringstjeneste.
Nedenfor er et eksempel, der viser, hvordan man opretter en simpel fejlgrænseklasse.
klasseError Boundarystrækker sigReagere.Komponent{
konstruktør(rekvisitter) {
super(rekvisitter);
det her.state = { fejl: falsk };
}statiskgetDerivedStateFromError(fejl){
// Opdater tilstanden, så den næste gengivelse viser reservebrugergrænsefladen.
Vend tilbage { fejl: fejl };
}componentDidCatch (fejl, errorInfo) {
// Log fejlen til en fejlrapporteringstjeneste
}render() {
hvis (det her.stat.fejl) {
// Opret en brugerdefineret reserve-brugergrænseflade her
Vend tilbage<h1>Der ser ud til at være et problem.h1>;
}
Vend tilbagedet her.rekvisitter.børn;
}
}
eksportStandard ErrorBoundary;
Når der opstår en fejl, vil getDerivedStateFromError() opdatere tilstanden og som følge heraf udløse en gengivelse, der viser reserve-brugergrænsefladen.
Hvis du ikke ønsker at oprette fejlgrænseklassen fra bunden, skal du bruge react-error-boundary NPM-pakke. Denne pakke indeholder ErrorBoundary-komponenten, der omslutter komponenter, som du tror kan give fejl.
Brug af fejlgrænseklassen
For at håndtere fejl skal komponenterne ombrydes med fejlgrænseklassekomponenten. Du kan indpakke komponenten på øverste niveau eller individuelle komponenter.
Hvis du ombryder komponenten på øverste niveau, vil fejlgrænseklassen håndtere de fejl, der er smidt af alle komponenterne i React-applikationen.
<Error Boundary>
<App/>
Error Boundary>
Hvis du ombryder en individuel komponent med en Error Boundary, vil en fejl i den komponent ikke påvirke, hvordan en anden komponent gengives.
<Error Boundary>
<Profil/>
Error Boundary>
For eksempel vil en fejl i profilkomponenten ikke påvirke, hvordan en anden komponent som Hero-komponenten gengives. Mens profilkomponenten kan gå ned, vil resten af applikationen fungere fint. Dette er meget bedre end at gengive den generiske hvide reserveskærm leveret af React.
Håndtering af fejl i JavaScript
Programmeringsfejl kan være frustrerende for udviklere og brugere. Undladelse af at håndtere fejl kan udsætte dine brugere for grimme brugergrænseflade med svære at forstå fejlmeddelelser.
Når du bygger din React-komponent, skal du oprette en fejlgrænseklasse enten fra bunden eller ved at bruge react-error-boundary-pakken til at vise brugervenlige fejlmeddelelser.
