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

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

[AlemTuzlak]

At least the framework mode of react-router v7, library indeed doesn't

[chargome]

@denissisic the framework does use these files: https://reactrouter.com/explanation/special-files#entryservertsx

Would you mind creating a separate issue with a reproduction so we can investigate what is causing the problem?

[denissisic]

@denissisic the framework does use these files: https://reactrouter.com/explanation/special-files#entryservertsx

Would you mind creating a separate issue with a reproduction so we can investigate what is causing the problem?

Hey guys! Sorry for jumping to wrong conclusions due to misunderstanding on my part. It seems that all works now.

[NGimbal]

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.

New issue here #16086 🙏

[gijsroge]

@chargome I saw @mydea removed many of the instrumentation todo's from the milestone what does this mean for the stable SDK release?

[chargome]

@gijsroge that was just some internal restructuring, we're still actively working towards a stable release atm