[JavaScript] React Router (v7) SDK

[chargome]

Description

This ticket is about supporting React Router v7 as a full meta-framework: https://reactrouter.com/start/framework/installation

This includes full instrumentation for both client and server side.

Overview

We will publish a new package @sentry/react-router.
To not carry over too much unneeded functionality like rsbuild support, non-otel instrumentation or support for older remix versions we will not build upon @sentry/remix and rather treat this as new SDK with the possibility of re-using remix otel instrumentation.

The starting point will be instrumenting the framework using @sentry/node and @sentry/react

Discussed approach for configuration and entrypoints:

• Create a Vite plugin for react router
• Create a wrapper for the react router config file for having access to all config params
• Create separate instrumentation files for client and server, which can be imported in the respective entry files (esm support possible)
• (Possibly) create a wrapper for the new routes.ts file
• we still need to check at which point this file is evaluated and if this will help us with parameterization
• for future compatibility this might be a good file to have from the start on

Additional tasks (issue creation tbd)

• Write a migration path from @sentry/remix to @sentry/react-router
• Wizard for @sentry/react-router

[intsanerarity]

hey,

im coming from Remix - used @sentry/remix before, but after upgrading to RRv7 there are dependencies which cant be there "react-router-dom" from some remix packages - so would be nice, if the new implementation will also work from former @sentry/remix users.

BR
Steven

[AbhiPrasad]

This probably needs to be a new package, and we also need to write out migration docs about how to go from @sentry/remix to @sentry/react-router.

[AlemTuzlak]

Anything I can do to help you guys?

[chargome]

@AlemTuzlak Not yet, we'll refine this ticket as soon as possible and provide a more detailed roadmap.

[willhoney7]

For others finding this before the full v7 framework support is available, here's the guide on how to get it working with the react and node integrations: https://docs.sentry.io/platforms/javascript/guides/react-router/. It was a bit hard for me to find, so sharing here.

[intsanerarity]

to explain it very fast.

if i create your instrument.server.mjs and i need to start up my react router app with --NODE-OPTIONS it breaks my whole application cause the "~" as my import alias is not working anymore.

[chargome]

@intsanerarity could you provide a reproduction?

[dyeoman2]

Is there anyone who made this work? I tried it with the Documentation https://docs.sentry.io/platforms/javascript/guides/react-router/ but for me it wont work - i cant use any --import stuff in my package.json cause im using ~ paths - i get an error when i do - before i didnt need such stuff with remix. My Problem is atm im paying for no reason...

Check out the Epic Stack https://github.com/epicweb-dev/epic-stack

[intsanerarity]

Is there anyone who made this work? I tried it with the Documentation https://docs.sentry.io/platforms/javascript/guides/react-router/ but for me it wont work - i cant use any --import stuff in my package.json cause im using ~ paths - i get an error when i do - before i didnt need such stuff with remix. My Problem is atm im paying for no reason...

Check out the Epic Stack https://github.com/epicweb-dev/epic-stack

thanks for this hint man! It worked!!! Finally Sentry again thank you very much!

[punkpeye]

Cannot destructure property 'authToken' of 'getSentryConfig(...)' as it is undefined.

Getting these errors, and it is really not clear why, because the value to authToken is provided.

[punkpeye]

I totally missed it that sentryConfig needs to be passed twice to vite.config.ts. It works now.

[chargome]

@punkpeye yeah this is not optimal as it is easy to overlook, will try to find a better solution for that!

[nichtsam]

@punkpeye yeah this is not optimal as it is easy to overlook, will try to find a better solution for that!

Completely overlooked this. It would be great if the documentation highlighted this configuration part.