Skip to main content

errorBoundary

Description: Defines if the error should be thrown. The suspense property has to be true in order for this to work.

Default Value: false.

  • How To: Set errorBoundary: true when you want errors from useFetch to be caught by the nearest React Error Boundary. Doing this, you can replace a broken UI section with a standardized Error component rather than rendering half-broken component with missing data. Always use in conjunction with suspense: true. 
    // Correct: Errors will be caught by the nearest ErrorBoundary
    useFetch(
        'critical-component-data',
        fetchCriticalData,
        { suspense: true, errorBoundary: true }
    );
  • Best Practice: Avoid setting errorBoundary: true without suspense: true, as it won't function as intended. The useFetch hook relies on Suspense to propagate errors to the boundary. 
    // Avoid this: `errorBoundary` won't work without `suspense: true`
    useFetch(
        'data',
        () => fetchData(),
        { 
            suspense: false,
            errorBoundary: true
        }
    );

Component Setup​

<ErrorBoundary fallback={<ErrorMessage />}>
    <Suspense fallback={<LoadingSpinner />}>
        <UserList />
    </Suspense>
</ErrorBoundary>

Why​

  • Errors are propagated to the nearest Error Boundary
  • Prevents component errors from crashing the entire app
  • Keeps UI predictable and fault-tolerant