If the basename option is used with React Router 6 transactions are not created for navigation events.

[ngelotte]

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

7.56.0

Framework Version

React 18

Link to Sentry event

No response

SDK Setup

Sentry.init({
        dsn:
            'MYDSN',
        integrations: [
            new Sentry.BrowserTracing({
                beforeNavigate: (context) => {
                    console.log("Navigating");
                    console.log(context);
                    return context;
                },
                // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
                tracePropagationTargets: ["graphql"],
                // See docs for support of different versions of variation of react router
                // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
                routingInstrumentation: Sentry.reactRouterV6Instrumentation(
                    React.useEffect,
                    useLocation,
                    useNavigationType,
                    createRoutesFromChildren,
                    matchRoutes
                ),
            }),
            new Sentry.Replay({
                networkDetailAllowUrls: ["graphql"],
                maskAllText: false,
                maskAllInputs: false,
                blockAllMedia: false
              })
        ],
        tracesSampleRate: 1.0,
        replaysSessionSampleRate: 1.0,
        replaysOnErrorSampleRate: 1.0,
        environment: config.EnvironmentName
    });

Steps to Reproduce

Setup React Router 6 like this:

const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRouter);
const router = suppressRouter
    ? null
    : sentryCreateBrowserRouter(
        createRoutesFromChildren(
            <Route
                path="/"
                element={RootElement}
                 <Fragment>
                  <Route
                      path="/stuff"
                      element={<Stuff />} />
                  <Route path="/" element={<Home />} />
              </Fragment>
           </Route>
        ) ,
        {
            basename: "/myapp"
        }
    );

Expected Result

Sentry would correctly hook into React Router and create transactions when navigating on the site even when basename is specified for React Router

Actual Result

Only the home page is captured all other navigations are ignored. If you comment out the option element where it has basename then everything works correctly. However, because of the way we are hosting multiple sites together I need to use the basename option.
This also means that the sentry-trace header is not attached to any requests that are not on the homepage.

[lforst]

Hey, is your setup snippet correct? You're passing { basename: '/myapp' } as second argument to sentryCreateBrowserRouter which only takes one argument.

[ngelotte]

Yes I am passing a second argument. And it is flowing to createBrowserRouter correctly.

Sentry.wrapCreateBrowserRouter takes one argument which is createBrowserRouter from react-router-dom
The returned object is wrapping createBrowserRouter which excepts 2 arguments (routes: RouteObject[], opts?: DOMRouterOpts)
So the sentryCreateBrowserRouter that is returned from Sentry.wrapCreateBrowserRouter also takes those 2 arguments. The DOMRouterOpts object is getting passed to createBrowserRouter because the app routing functions correctly with a baseName. If I take it out then all of the routing changes to be / based. So the second argument is definitely working for react-router-dom but causing problems for Sentry.

[lforst]

Ah, that makes sense. Thanks! We'll look into it.