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

[punkpeye]

Subscribing

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

[tomerzcod7]

Any updates on this guys? I'm integrating Sentry into our projects and we just upgraded to RR7 so we are waiting on this one :)

[andreiborza]

hi @tomerzcod7, thanks for showing interest! We are probably going to kick this off some time this week, you'll be able to follow progress on this tracking issue.

[MatteoGauthier]

Suggestion : The documentation states that the SDK must be implemented on both the client and server input. However, with React Router v7 in framework mode, it's possible to create a build just for the client. Could you clarify whether server-side implementation is still required in this case?

Thanks for your awesome work ! Have a nice day!

[chargome]

@MatteoGauthier are you referring to the usage of createBrowserRouter ?

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

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

[MoSattler]

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

Same here!

[NGimbal]

I'm working on an app based on the Epic Stack and have followed the example there to the character for Sentry integration post react-router v7 upgrade, and everything is working except for frontend performance monitoring. Is this a limitation of the current implementation or am I doing something wrong?

I've just gone back through the Epic Stack implementation and upgraded the sentry packages but it still doesn't look like I'm getting anything in this dashboard.

    "@sentry/profiling-node": "^9.12.0",
    "@sentry/react-router": "^9.12.0",

I'm seeing the events being sent from my frontend in the network tab like the one below, which is indicating to me that things are set up correctly on the frontend to send this data? This is the request copied as node-fetch from the Chrome network panel.

fetch("https://xxx/envelope/?sentry_version=7&sentry_key=xxx&sentry_client=sentry.javascript.react-router%2F9.5.0", {
  "headers": {
    "accept": "*/*",
    "accept-language": "en-US,en;q=0.9",
    "content-type": "text/plain;charset=UTF-8",
    "priority": "u=1, i",
    "sec-ch-ua": "\"Chromium\";v=\"134\", \"Not:A-Brand\";v=\"24\", \"Google Chrome\";v=\"134\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"macOS\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "cross-site",
    "Referer": "xxx",
    "Referrer-Policy": "strict-origin"
  },
  "body": "{\"sent_at\":\"2025-04-12T15:41:38.217Z\",\"sdk\":{\"name\":\"sentry.javascript.react-router\",\"version\":\"9.5.0\"}}\n{\"type\":\"session\"}\n{\"sid\":\"xxx\",\"init\":true,\"started\":\"2025-04-12T15:41:38.217Z\",\"timestamp\":\"2025-04-12T15:41:38.217Z\",\"status\":\"ok\",\"errors\":0,\"attrs\":{\"release\":\"xxx\",\"environment\":\"production\",\"user_agent\":\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36\"}}",
  "method": "POST"
});

It's easy to see where in the graph below I upgraded to rr v7 and the new Sentry react-router package.

[chargome]

Hey @NGimbal! Would you mind creating a separate issue for this where you share your SDK setup? This would help us a lot to pin down your problem.

[denissisic]

Hi! We're using React Router v7 Framework with Vite. I tried to integrate Sentry by following official documentation for RR7, but the documentation was way off.

First of all, there's no entry.client.tsx and entry.server.tsx files in RR7.

Some of the given code doesn't work, e.g. export default Sentry.sentryHandleRequest(handleRequest); throws an error - there's no sentryHandleRequest in Sentry.

[chargome]

Hey @denissisic, thanks for reaching out! You probably missed the part of exposing your hooks with npx react-router reveal – after this you should be able to see these files and wrap handleRequest in entry.server.tsx

[denissisic]

Hey @denissisic, thanks for reaching out! You probably missed the part of exposing your hooks with npx react-router reveal – after this you should be able to see these files and wrap handleRequest in entry.server.tsx

Hi @chargome! I haven't miss revealing. What I meant is that RR7 Framework doesn't use those files (like Remix does). Even after I added those files (for Sentry), the code from documentation didn't work.

[AlemTuzlak]

@denissisic yes it does, and they can be revealed, by default they use the internal default entry.client and entry.server files which you can reveal if you need to make changes to them.