Felhantering i React

Vad är en Error Boundary?

• En Error Boundary är en React-komponent som fångar upp fel som uppstår i komponenter som ligger under den i komponentträdet.

Exempel:

import React from 'react';

<ErrorBoundary fallback={<div>Something went wrong</div>}>
    <Component1 />
    <Component2 />
</ErrorBoundary>

Om ett fel uppstår

• Om ett fel uppstår i en underliggande komponent kommer Error Boundary-komponenten att fånga upp felet och rendera en fallback-komponent istället.
• Fallback-komponenten kan vara en komponent som visar ett felmeddelande eller en komponent som visar en länk till en annan sida.

Att tänka på

• Fångar bara upp fel som uppstår i render-metoden eller i konstruktorn i underliggande komponenter.
• Fångar inte upp fel som uppstår i eventhanterare, asynkron kod eller i serverkomponenter.

Installera

npm i react-error-boundary

Exempel

import React from 'react';

const ErrorFallback = () => (
    <div>
        <h1>Oops! Something went wrong.</h1>
        <p>Try refreshing the page.</p>
    </div>
);

const ErrorBoundary = ({ children }) => (
    <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => window.location.reload()}
    >
        {children}
    </ErrorBoundary>
);

export default ErrorBoundary;

Hur många Error boundaries behöver man?

• Varje enkild komponent behöver inte wrappas i en egen error boundary
• Fundera ut var det är lämpligt att placera en error boundary i komponentträdet
• Var är det lämpligt att visa upp ett felmeddelande?

Skapa en egen Error Boundary

• Man kan skapa en egen Error Boundary-komponent genom att skapa en komponent som implementerar componentDidCatch-metoden.
• Fungerar endast för klasskomponenter.

https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary