[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.

[MatteoGauthier]

@chargome I'm refering to this section of the RR7 Framework Mode docs : https://docs.sentry.io/platforms/javascript/guides/react-router/#server-side-setup

[chargome]

@MatteoGauthier could you give me an example of your RR setup?

it's possible to create a build just for the client

Basically what are you referring to with this

[MatteoGauthier]

@chargome No special implementation, just the default starter of RR7 looks like this https://github.com/remix-run/react-router-templates/tree/main/default

[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...

[chargome]

@MatteoGauthier with this setup your pages are being rendered on the server so should just be fine with the setup from the docs.

@intsanerarity could you open a separate issue where you explain your issue in detail?

We're working on releasing an alpha version for this package within the next two weeks!

[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!