Om du har arbetat med React ett tag kan du ha stött på ett meddelande som lyder "Överväg att lägga till en felgräns till ditt träd för att anpassa felhanteringsbeteende." Du kanske har sett detta i din webbläsarkonsol när dina komponenter krascha.
React rekommenderar att du använder en felgräns för att ge en bättre användarupplevelse när ett fel uppstår.
Vad är felgränsklassen i React?
Felgränser fungerar som försök/fånga block i vanilj JavaScript. Skillnaden är att de fångar upp de fel som uppstår i React-komponenter. Om ett fel uppstår i en UI-komponent, avmonterar React trädet inom den komponenten och ersätter det med det reservgränssnitt som du har definierat. Det betyder att ett fel endast påverkar den komponent som det uppstår i och resten av applikationen fungerar som förväntat.
Enligt Reagera dokumentation, felgränsklasser fångar inte fel i:
- Händelsehanterare.
- Asynkron kod.
- Kod på serversidan.
- Fel som kastas i själva felgränsen (snarare än dess underordnade).
För ovanstående fel kan du använda try/catch-blocket.
Till exempel för att fånga ett fel som uppstår i händelsehanterare, använd följande kod:
fungeraEventComponent() {
konst [error, setError] = useState(null)konst handleClick = () => {
Prova {
// Göra någonting
} fånga (fel) {
setError (fel)
}
}
lämna tillbaka (
<>
<div>{fel? fel: ""}div>
<knapppåKlicka={handleClick}>Knappknapp>
)
}
Använd felgränser för att fånga upp fel endast i React-komponenter.
Skapa en felgränsklass
Du kan skapa en felgräns genom att definiera en klass som innehåller en eller båda av följande metoder:
- statisk getDerivedStateFromError()
- componentDidCatch()
Funktionen getDerivedStateFromError() uppdaterar komponenttillståndet när felet fångas medan du kan använda componentDidCatch() för att logga felinformation till konsolen. Du kan också skicka felen till en felrapporteringstjänst.
Nedan är ett exempel som visar hur man skapar en enkel felgränsklass.
klassError Boundarysträcker sigReagera.Komponent{
konstruktör(rekvisita) {
super(rekvisita);
detta.state = { fel: falsk };
}statiskgetDerivedStateFromError(fel){
// Uppdatera tillståndet så att nästa rendering visar reservgränssnittet.
lämna tillbaka { fel: error };
}componentDidCatch (error, errorInfo) {
// Logga felet till en felrapporteringstjänst
}framställa() {
om (detta.stat.fel) {
// Skapa ett anpassat reservgränssnitt här
lämna tillbaka<h1>Det verkar finnas ett problem.h1>;
}
lämna tillbakadetta.rekvisita.barn;
}
}
exporterastandard ErrorBoundary;
När ett fel uppstår kommer getDerivedStateFromError() att uppdatera tillståndet och följaktligen utlösa en omrendering som visar reservgränssnittet.
Om du inte vill skapa felgränsklassen från början, använd react-error-boundary NPM-paket. Det här paketet tillhandahåller ErrorBoundary-komponenten som omsluter komponenter som du tror kan orsaka fel.
Använda felgränsklassen
För att hantera fel, linda komponenter med felgränsklasskomponenten. Du kan linda toppnivåkomponenten eller enskilda komponenter.
Om du lindar toppnivåkomponenten kommer felgränsklassen att hantera felen från alla komponenter i React-applikationen.
<Error Boundary>
<App/>
Error Boundary>
Om du lindar en enskild komponent med en ErrorBoundary kommer ett fel i den komponenten inte att påverka hur en annan komponent renderas.
<Error Boundary>
<Profil/>
Error Boundary>
Till exempel kommer ett fel i profilkomponenten inte att påverka hur en annan komponent som Hero-komponenten återges. Även om profilkomponenten kan krascha, kommer resten av programmet att fungera bra. Detta är mycket bättre än att rendera den generiska vita reservskärmen från React.
Hantera fel i JavaScript
Programmeringsfel kan vara frustrerande för utvecklare och användare. Att misslyckas med att hantera fel kan utsätta dina användare för fula användargränssnitt med svåra att förstå felmeddelanden.
När du bygger din React-komponent, skapa en felgränsklass antingen från början eller använd paketet react-error-boundary för att visa användarvänliga felmeddelanden.
