Next.js Discord

Discord Forum

Catch Server Error At Suspense

Unanswered
Exzotic posted this in #help-forum
Open in Discord
Im wondering if its possible to wrap "Suspense" in something like an error boundary to display a fallback component if something inside the suspense throws an error. I know next has a error.tsx file but that seems like it would just show that component instead of the page whereas I still want the rest of the page content just where the suspense is to show a different component on error.

1 Reply

British Shorthair
you can implement such component yourself, or here is an npm package:
https://www.npmjs.com/package/react-error-boundary

an example of how to use it:
<ErrorBoundary fallback={<TableError />}>
  <Suspense
    fallback={<ProductsTableLoader />}
    key={JSON.stringify(searchParams)}
  >
    <Products searchParams={searchParams} />
  </Suspense>
</ErrorBoundary>