Integration with React Router v6 under performs when data loaders are used

[serchavalos]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

10.1.0

Framework Version

18.3.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

Hello! 👋

My application is using the following setup with Sentry's SDK and its integration with React Router

import { createHashRouter } from 'react-router-dom'; // @v6.29.0

... 

// https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/#usage-with-react-router-64-data-api
const sentryCreateHashRouter = Sentry.wrapCreateBrowserRouterV6(createHashRouter);

const router = sentryCreateHashRouter(
[
    {
      path: ALBUM.path,
      element: <AlbumView />,
     }
  ...
],
{
  basename: '/',
  future: {
    v7_relativeSplatPath: true,
    v7_startTransition: true,
  },
});

Steps to Reproduce

1. I updated the route to use a feature from React router called data loaders (read more) with the following code

  {
    path: ALBUM.path,
    element: <AlbumView />,
+   loader: () =>
+     Promise.resolve({
+       album: {
+         id: '123',
+         name: 'Album Name',
+         artist: 'Artist Name',
+       },
+     }),
  },

2. Then I measured the performance using DevTools

Expected Result

Since the data loader is not doing much, I was expecting the performance overhead to be mininum

Actual Result

I noticed a 10x increased in the flamewar for the function startBrowserTracingNavigationSpan

Before:

After:

This overhead goes away after I remove the wrapper Sentry.wrapCreateBrowserRouterV6. There is a difference between using and not using data loaders but it's minimum.

Thanks in advance for looking into this.

[linear]

JS-834 Integration with React Router v6 under performs when data loaders are used

[Lms24]

Hey @serchavalos thanks for opening this issue!

naive question:

There is a difference between using and not using data loaders but it's minimum.

doesn't this contradict the issue title saying that the performance overhead is noticeable when data loaders are used?

Are you able to provide a minimal reproduction that demonstrates the performance increase? In general my gut feeling is that some increase must be expected when using our routing instrumentation. Especially in React since we're relying on React Router APIs within our instrumentation. However, the 10x is quite a lot so we should look into it. For instance, one of the flame graphs shows a long running "Function Call" duration but I'm not sure where this is coming from. A minimal repro would be much appreciated, thanks!

cc @onurtemizkan - any immediate ideas?

[serchavalos]

Thanks for taking a look @Lms24

There is a difference between using and not using data loaders but it's minimum.

doesn't this contradict the issue title saying that the performance overhead is noticeable when data loaders are used?

I meant to say I raised this issue because the increase I observed was considerably high. If it was lower, I wouldn't probably reported it.

Are you able to provide a minimal reproduction that demonstrates the performance increase?

Sure, I'll try to come up with an simpler example and reported here