Begrip: Error Boundary

Een error boundary is een component die, net als suspense, rond een stuk code gezet wordt en foutmeldingen opvangt. Net als bij suspense kan je een fallback component tonen wanneer er een fout optreedt.

Er bestaat echter geen kant-en-klare ErrorBoundary component, zoals in de documentatie te lezen is moet je zelf een error boundary bouwen en dit gaat enkel via class components, een outdated manier om componenten te schrijven in React. Aangezien we in deze cursus enkel functionele componenten gebruiken kiezen we ervoor om een ErrorBoundary component te installeren via npm

pnpm add react-error-boundary

import {ErrorBoundary} from 'react-error-boundary'

const SomeComponent: FunctionComponent = () => {
  return (
    <ErrorBoundary fallback={<SomeFallbackComponent/>}>
      <Suspense fallback={<SomeFallbackComponent/>}>
        <SomeComponentThatLoadsDataThroughALibraryThatSupportsSuspense/>
      </Suspense>
    </ErrorBoundary>
  )
}