Suspensive vs react-error-boundary

Choosing an error boundary library for React? Here’s how @suspensive/react compares to react-error-boundary, @sentry/react, and React’s built-in class component approach.

Feature Comparison

What Makes Suspensive Different

shouldCatch — Catch Only the Errors You Want

Unlike any other solution, @suspensive/react lets you filter which errors an ErrorBoundary catches. Pass an Error constructor, a callback, or a boolean:

// Only catch validation errors in this boundary
<ErrorBoundary shouldCatch={ZodError} fallback={<ValidationErrorUI />}>
  <Form />
</ErrorBoundary>
 
// Catch everything except network errors
<ErrorBoundary
  shouldCatch={(error) => !(error instanceof NetworkError)}
  fallback={<GeneralErrorUI />}
>
  <App />
</ErrorBoundary>

This enables layered error handling strategies where parent and child boundaries handle different error types — something impossible with react-error-boundary.

ErrorBoundaryGroup — Reset Multiple Boundaries at Once

Managing multiple error boundaries? With react-error-boundary, you need to pass resetKeys through props to every boundary. With Suspensive, just wrap them in an ErrorBoundaryGroup:

<ErrorBoundaryGroup>
  <ErrorBoundaryGroup.Consumer>
    {({ reset }) => <button onClick={reset}>Reset All</button>}
  </ErrorBoundaryGroup.Consumer>
  <ErrorBoundary fallback={<UserError />}>
    <UserSection />
  </ErrorBoundary>
  <ErrorBoundary fallback={<PostsError />}>
    <PostsSection />
  </ErrorBoundary>
</ErrorBoundaryGroup>

No prop drilling. No state management. All boundaries reset together.

Safe Fallback Error Handling

In react-error-boundary, if your fallback component throws an error, it causes a recursive catch loop. In @suspensive/react, errors thrown in fallback components are passed to the parent ErrorBoundary — providing predictable, safe error propagation.

useErrorBoundaryFallbackProps — No Prop Drilling in Fallbacks

Access error and reset anywhere inside a fallback tree without passing props:

const DeepFallbackChild = () => {
  const { error, reset } = useErrorBoundaryFallbackProps()
  return <button onClick={reset}>{error.message}</button>
}

This is especially useful in React Server Component environments where you can’t pass callback functions as props.

Code Comparison

import { ErrorBoundary } from '@suspensive/react'
 
const App = () => (
  <ErrorBoundary
    fallback={({ error, reset }) => (
      <div>
        <p>{error.message}</p>
        <button onClick={reset}>Retry</button>
      </div>
    )}
    onError={(error) => logToService(error)}
  >
    <MyComponent />
  </ErrorBoundary>
)

import { ErrorBoundary } from 'react-error-boundary'
 
const App = () => (
  <ErrorBoundary
    fallbackRender={({ error, resetErrorBoundary }) => (
      <div>
        <p>{error.message}</p>
        <button onClick={resetErrorBoundary}>Retry</button>
      </div>
    )}
    onError={(error) => logToService(error)}
  >
    <MyComponent />
  </ErrorBoundary>
)

Beyond ErrorBoundary

Suspensive isn’t just an ErrorBoundary library. It’s a complete toolkit for React’s async rendering:

• <Suspense/> — Enhanced React Suspense with SSR support and clientOnly prop
• <Delay/> — Prevent flash-of-loading-state UX issues
• <ClientOnly/> — Safe client-side only rendering
• <SuspenseQuery/> — Declarative data fetching without hook constraints
• <DefaultPropsProvider/> — Global default fallbacks for all Suspense/Delay components

Migration from react-error-boundary

Migrating is straightforward — the API is similar by design:

npm install @suspensive/react

See the full ErrorBoundary API reference for detailed documentation.