making error boundary optional or less coupled from suspense

[intergalacticspacehighway]

Hi there 👋

I want to discuss some use cases where keeping ErrorBoundary optional might make sense.

Example

As shown below, B is using useSWR with suspense enabled, ErrorBoundary wrapping B is responsible to catch errors.

Simple ErrorBoundary

function A() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<Spinner />}>
        <B />
      </Suspense>
    </ErrorBoundary>
  );
}

This usecase makes sense and has no issues.

ErrorBoundary with a retry button

function A() {
  return (
    <ErrorBoundary retry={() => {/* needs mutate function from the hook, but hook is in B */}}>
      <Suspense fallback={<Spinner />}>
        <B />
      </Suspense>
    </ErrorBoundary>
  );
}

In this example, it becomes a bit of a problem to pass retry functionality to ErrorBoundary. We can use global mutate but IMO won't be very neat.

ErrorBoundary that shows error message along with previously fetched data.

function A() {
  return (
    <ErrorBoundary 
      retry={() => {/* needs mutate function from the hook, but hook is in B */}} 
      data={/* need to show previously fetched data but UI is defined in B */}>
      <Suspense fallback={<Spinner />}>
        <B />
      </Suspense>
    </ErrorBoundary>
  );
}

This becomes a bit inconvenient as the UI is defined in B and we need to show data along with an error message.

Suggestions

A boolean argument named maybe errorBoundary in hook similar to suspense.

 const { data } = useSWR('/api/user', fetcher, { suspense: true, errorBoundary: false })

errorBoundary Behaviour

• If set to true or suspense is true, all errors will be thrown to the error boundary.
• If set to false and suspense is false, errors are returned as state.
• If set to false and suspense is true, errors are returned as state.

References

• react query has a similar parameter named useErrorBoundary that can be useful to opt out of ErrorBoundary.

Alternatives

• A component that provides reset behaviour similar to QueryErrorResetBoundary in react-query.

Let me know if it makes sense or if there is a better approach to handle this.

[3pleFly]

Seems good to me... I am currently struggling a bit since I have to wrap a lot of mini components with error boundary. I have an HOC for that, but still it's a bit annoying to do everywhere that I am using suspense and that might error.