Support Remix v2

[AbhiPrasad]

https://remix.run/docs/en/main/pages/v2

Coming soon - let's make sure our SDK can work with it!

Tasks

Beta Give feedback

An error occurred while loading your tasklist. Please try refreshing the page, or edit + save the issue body.

1. Add integration tests for enabled v2 features - test(remix): Add Remix v2 future flags integration tests. #8397
2. Instrument ErrorBoundary for client-side error reporting - feat(remix): Add v2 support #8415
3. Instrument handleError for server-side error reporting - feat(remix): Add v2 support #8415
4. Update documentation - Document Remix v2 support. sentry-docs#7320

[onurtemizkan]

Made a mini research on what needs to be done to support Remix v2, looking at their pre-release document.

File System Route Convention

Not likely to affect us, as we are instrumenting routes by iterating the server build, instead of following folder structures, filenames.
Will still need to check if anything inside the server build folder changed.

Route meta

We use this API not just for monkey-patching. We also use and patch it to inject sentry-trace and baggage headers.

Looks like both the API and the route behaviour will change here. 👇

In addition, will no longer render meta for every route in the hierarchy. Only data returned from meta in the leaf route will be rendered. You can still choose to include meta from the parent route by accessing matches in the function's arguments.

Will need to come up with a new solution here, as we were using the previous behaviour to inject sentry-trace and baggage headers.

Update: I just tested it with the v2_meta feature flag, and it's working fine with our current SDK.

CatchBoundary and ErrorBoundary

In v1, a thrown Response will render the closest CatchBoundary while all other unhandled exceptions render the ErrorBoundary. In v2 there is no CatchBoundary and all unhandled exceptions will render the ErrorBoundary, response or otherwise.

Wrapping those to get client-side errors reported (also fallback screened) consistently is already discussed at #5762. Remix merging CatchBoundary and ErrorBoundary will probably make it easier.

Additionally, the error is no longer passed to ErrorBoundary as props but is accessed with the useRouteError hook.

We should also look at how to instrument the new useRouteError hook.

We can stop auto-wrapping root component with @sentry/react's ErrorBoundary, and instrument Remix's ErrorBoundary instead. This way we will report any error that Remix considers an error.

This will require some changes in usage, making client-side error-tracking opt-in. See: #5762 (comment)

serverModuleFormat

The default server module output format will be changing from cjs to esm.

We may also need to investigate whether this will create any issues during server-side auto-instrumentation.

[dmarkow]

v1.17.0 (released today) has some new features for dealing with server-side errors that may be useful to integrate as well.

[AbhiPrasad]

We'll have to make sure we work with the Remix's future flags: https://remix.run/docs/en/main/pages/api-development-strategy

[huw]

Just FYI the current solution will fail once Remix actually release v2, because the future flags will be deleted. I am not aware of a way to test for v2 or not; you might be able to check for other API changes. This is somewhat urgent because v2 will be the next release.

[AbhiPrasad]

@huw, thanks for the heads up! Created #8681 to track this.