Skip to content

Remix: Sentry conflict with Remix's Error Boundaries #5762

@dmarkow

Description

@dmarkow

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/remix

SDK Version

7.13.0

Framework Version

React 18.2.0 / Remix 1.7.1

Link to Sentry event

No response

Steps to Reproduce

Set up a new Remix app and add Sentry. Add an ErrorBoundary export to the root file:

// app/root.tsx

// ...

export const ErrorBoundary: ErrorBoundaryComponent = () => {
  return <div>REMIX BOUNDARY</div>;
}

function App() {
  // ...
}

export default withSentry(App, {
  wrapWithErrorBoundary: true,
  errorBoundaryOptions: {
    fallback: <div>SENTRY BOUNDARY</div>;
  }
})

Expected Result

I should be able to use Remix's own ErrorBoundary functionality both at the root level and in child routes and still have Sentry know when/when not to report errors.

Alternatively, if there are limitations in Remix that won't let this work as expected, the documentation should be clearer about server/client error handling and error boundaries.

Actual Result

The custom "REMIX BOUNDARY" ErrorBoundary above only gets displayed if the error was server side. All client-side errors use the "SENTRY BOUNDARY" error set in withSentry (unless you have a route-level ErrorBoundary, then client-side errors never make it to Sentry. My guess is that the withSentry fallback/wrapper completely ignores all server-side errors to avoid double-reporting.)There are a bunch of combinations of server/client errors and server/client rendering (I'm sure I'm missing some):

  • SSR/CSR loader/action error: Sentry reports this server-side and does not report it client-side. The Remix boundary is displayed. If I remove the Remix boundary export, a raw error trace is rendered. Sentry's fallback is never displayed.
  • CSR rendering error: Sentry reports the error and the Sentry fallback is displayed. The Remix boundary is not shown.
  • SSR rendering error: Sentry reports the error server-side. Same result client-side as the loader/action errors in the first bullet above.

If I add a custom Remix ErrorBoundary export to a child route, the behavior is the same with one exception:

  • CSR rendering error: Sentry does not report any error and the Remix boundary is shown. This seems to be the most common spot for errors to go unreported.

It seems the only viable solution until this is addressed is:

  • Add a root-level Remix error boundary AND a custom fallback to Sentry that are essentially duplicates of each other so you get consistent error screens.
  • Don't use route-level error boundaries (which goes against the whole point of Remix's nested route handling), or if you do, manually call Sentry.captureException(...) in them, though that could possibly report duplicate issues from both the server and client side.

Metadata

Metadata

Assignees

Labels

Package: remixIssues related to the Sentry Remix SDK

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions