Felfångare
Implementera klassbaserade felfångare med componentDidCatch och getDerivedStateFromError för att förhindra att ofångade renderingsfel kraschar hela appen.
Felfångare är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Varför Error Boundaries?
Ett ohanterat fel under rendering, i en livscykelmetod eller i en konstruktor kraschar hela React-trädet som standard. Error Boundaries fångar dessa fel i ett underträd och låter er rendera en reservvy i stället.
Endast klasskomponenter
Error Boundaries måste vara klasskomponenter (fortfarande 2026 – det finns ännu ingen motsvarighet som hook). Hooken useErrorBoundary finns i bibliotek som react-error-boundary.
getDerivedStateFromError
En statisk metod som anropas när en underordnad komponent kastar ett fel. Returnera en tillståndsuppdatering som utlöser rendering av reservvyn.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch för loggning
Använd componentDidCatch för att logga felet till en tjänst (Sentry, Datadog) – metoden får både felet och React-komponentstacken.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Omslut appens rot
Omslut App-komponenten på toppnivå med en Error Boundary för att förhindra den vita dödsskärmen.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Finkorniga Error Boundaries per route eller widget
En global boundary är det minsta man bör ha. Lägg till boundaries per route så att en krasch i en sektion inte gör hela appen tom.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>Vad Error Boundaries INTE fångar
Error boundaries fångar INTE: fel i eventhanterare, fel i asynkron kod (setTimeout, promises), fel som kastas under SSR samt fel i själva error boundary-komponenten. Använd try/catch på dessa ställen.
Fel i eventhanterare
Omslut eventhanterare med try/catch och anropa en manuell reportError-funktion.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}Biblioteket react-error-boundary
Communitypaketet react-error-boundary erbjuder ett API som är anpassat för funktionskomponenter och har stöd för återställning.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Återställning vid återhämtning
Erbjud ett sätt att återhämta sig, till exempel en försöksknapp eller ett ruttbyte. Error boundaryn bör återställa sitt tillstånd så att den slutar visa sin fallback.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Utveckling kontra produktion
I utvecklingsläge visar React fortfarande den röda felöverlagringen även med en boundary – det är avsiktligt. I produktion visas bara boundaryns fallback.
Bästa metoder
1) Global boundary vid appens rot. 2) Boundaries per rutt. 3) Finkorniga boundaries runt fristående widgetar. 4) Logga alltid till en spårningstjänst. 5) Visa återställningsåtgärder, till exempel försök igen eller gå hem. 6) Svälj inte fel i tysthet.
Snabbkontroll
Vilken typ av fel fångar React Error Boundaries INTE?
Sammanfattning: Error Boundaries
Klasskomponent med static getDerivedStateFromError + componentDidCatch. Omsluter ett delträd för att fånga fel som uppstår under rendering. Fångar inte fel i eventhanterare, asynkron kod eller SSR. Placera en global boundary vid appens rot samt boundaries per rutt och widget. Logga till Sentry. Erbjud en återställningsåtgärd. Biblioteket react-error-boundary ger en smidigare utvecklarupplevelse.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Felfångare” gratis?
Ja – hela texten till ”Felfångare” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Felfångare”?
Implementera klassbaserade felfångare med componentDidCatch och getDerivedStateFromError för att förhindra att ofångade renderingsfel kraschar hela appen. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Felfångare”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Sammansatta komponenter med Context
- Render props- och HOC-mönster
- Portaler för modaler och tooltips
- Felfångare