React Router 7 Library Mode: Navigation transactions are not created

[jacquesg]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

Setup as per: https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/

Expected Result

Navigation transactions to be created.

Actual Result

No navigation transactions are created.

They are expected to be sprinkled between the NestJS lines in the screenshot. The pageload transaction is present though.

Product Area

Unknown

Link

No response

DSN

No response

Version

No response

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[jacquesg]

Extra information that may be useful:

import {
  createBrowserRouter,
  createRoutesFromChildren,
  matchRoutes,
  useLocation,
  useNavigationType,
} from 'react-router';
import * as Sentry from '@sentry/react';
import { routes } from '@generouted/react-router';

const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter);
const router = sentryCreateBrowserRouter(routes);

Sentry.init({
  dsn: config.sentry.dsn,
  environment: config.sentry.environment,
  release: `antaeus@${config.app.version}`,
  integrations: [
    Sentry.reactRouterV7BrowserTracingIntegration({
      useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
  ],
  tracesSampleRate: 1.0,
});

const element = document.getElementById('root');
if (element) {
  const root = ReactDOM.createRoot(element);
  root.render(<App router={router} />);
}

where

import { RouterProvider, RouterProviderProps } from 'react-router';

export interface AppProps {
  router: RouterProviderProps['router'];
}

export default function App({ router }: AppProps) {
  return <RouterProvider router={router} />
}

[jacquesg]

I have figure out what is going on here. Sentry.reactRouterV7BrowserTracingIntegration has a number of side-effects, which sentryCreateBrowserRouter depends on.

This means, the router object MUST be created after calling Sentry.init.

[chargome]

Hey @jacquesg, thanks for filing this. Yes this checks out, I'll leave a comment in our docs to make this more visible!