Als je een tijdje met React hebt gewerkt, ben je mogelijk een bericht tegengekomen met de tekst "Overweeg een foutgrens toe te voegen aan uw boomstructuur om het foutafhandelingsgedrag aan te passen.” Je hebt dit misschien in je browserconsole gezien wanneer je componenten Botsing.
React raadt aan om een foutgrens te gebruiken om een betere gebruikerservaring te bieden wanneer er een fout optreedt.
Wat is de foutgrensklasse in React?
Foutgrenzen werken zoals de try/catch blok in vanille JavaScript. Het verschil is dat ze de fouten opvangen die optreden in React-componenten. Als er een fout optreedt in een UI-component, ontkoppelt React de boom binnen die component en vervangt deze door de terugval-UI die u hebt gedefinieerd. Dit betekent dat een fout alleen van invloed is op het onderdeel waarin deze optreedt en dat de rest van de applicatie werkt zoals verwacht.
Volgens de Documentatie reageren, foutengrensklassen vangen geen fouten op in:
- Gebeurtenishandlers.
- Asynchrone code.
- Code aan de serverzijde.
- Fouten die in de foutgrens zelf worden gegenereerd (in plaats van de kinderen).
Voor de bovenstaande fouten kunt u het try/catch-blok gebruiken.
Om bijvoorbeeld een fout op te vangen die optreedt in het gebeurtenishandler, gebruik de volgende code:
functieEventComponent() {
const [fout, setError] = useState(nul)const handleClick = () => {
poging {
// Doe iets
} vangst (fout) {
setError (fout)
}
}
opbrengst (
<>
<div>{fout? fout: ""}div>
<knopbij klikken={handleClick}>Knopknop>
)
}
Gebruik foutgrenzen om alleen fouten in React-componenten op te vangen.
Een foutgrensklasse maken
U kunt een foutgrens maken door een klasse te definiëren die een of beide van de volgende methoden bevat:
- statisch getDerivedStateFromError()
- componentDidCatch()
De functie getDerivedStateFromError() werkt de componentstatus bij zodra de fout is opgevangen, terwijl u componentDidCatch() kunt gebruiken om foutinformatie in de console te loggen. U kunt de fouten ook naar een foutrapportageservice sturen.
Hieronder ziet u een voorbeeld dat laat zien hoe u een eenvoudige foutgrensklasse maakt.
klasErrorBoundarystrekt zich uitReageer.Onderdeel{
constructeur(rekwisieten) {
super(rekwisieten);
dit.staat = { fout: vals };
}statischgetDerivedStateFromError(fout){
// Update status zodat de volgende render de terugval-UI toont.
opbrengst { fout: fout };
}componentDidCatch (fout, foutinfo) {
// Meld de fout bij een foutrapportageservice
}veroorzaken() {
als (dit.staat.fout) {
// Maak hier een aangepaste terugval-UI
opbrengst<h1>Er lijkt een probleem te zijn.h1>;
}
opbrengstdit.rekwisieten.kinderen;
}
}
exporterenstandaard Foutgrens;
Wanneer er een fout optreedt, zal getDerivedStateFromError() de status bijwerken en dientengevolge een nieuwe weergave activeren die de fallback-gebruikersinterface weergeeft.
Als u de foutgrensklasse niet helemaal opnieuw wilt maken, gebruikt u de reactie-foutgrens NPM-pakket. Dit pakket bevat de ErrorBoundary-component die zich om componenten heen wikkelt waarvan u denkt dat ze fouten kunnen veroorzaken.
De foutgrensklasse gebruiken
Om fouten af te handelen, wikkelt u componenten met de foutgrensklassecomponent. U kunt de component op het hoogste niveau of afzonderlijke componenten omwikkelen.
Als u de component op het hoogste niveau inpakt, zal de foutgrensklasse de fouten afhandelen die door alle componenten in de React-toepassing worden veroorzaakt.
<ErrorBoundary>
<app/>
ErrorBoundary>
Als u een afzonderlijke component omsluit met een ErrorBoundary, heeft een fout in die component geen invloed op hoe een andere component wordt weergegeven.
<ErrorBoundary>
<Profiel/>
ErrorBoundary>
Een fout in de profielcomponent heeft bijvoorbeeld geen invloed op hoe een andere component, zoals de Hero-component, wordt weergegeven. Hoewel de profielcomponent kan crashen, werkt de rest van de toepassing prima. Dit is veel beter dan het generieke witte terugvalscherm van React weergeven.
Omgaan met fouten in JavaScript
Programmeerfouten kunnen frustrerend zijn voor ontwikkelaars en gebruikers. Het niet afhandelen van fouten kan uw gebruikers blootstellen aan een lelijke gebruikersinterface met moeilijk te begrijpen foutmeldingen.
Wanneer u uw React-component bouwt, maakt u een geheel nieuwe foutgrensklasse of gebruikt u het react-error-boundary-pakket om gebruiksvriendelijke foutmeldingen weer te geven.
