Routes not parameterized for React Router v5

[sighmun]

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

8.33.1

Framework Version

18.2.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

Similar to the issues reported in:

• React-Router v5 Integration - Normalized Transaction Names #3114
• React Router V5 Integration is not parameterizing transaction names #11815

we're seeing traces reported in Sentry often without parameterization. After finding the above issues, I updated our version of the SDK to latest (8.33.1), but that hasn't resolved the problem. We see a mixture of traces reported, and I haven't been able to figure out why it's sometimes parameterized correctly, sometimes with asterixes (*), and sometimes not parameterized at all, though I can confirm that we've only been seeing :id style parameterization instead of asterix-style * since upgrading the Sentry SDK from v7 to v8.

Below is our init config, and each of our Routes are using the wrapped SentryRoute component. We're also using the latest react-router-dom 5.3.4.

import {
  getCurrentScope,
  init,
  reactRouterV5BrowserTracingIntegration,
  User,
  withSentryRouting,
} from '@sentry/react';
import { Route } from 'react-router-dom';
import getClientId from 'xo/client-id';
import { env, STAGE } from '../app/env';
import history from '../hooks/history';

export const SentryRoute = withSentryRouting(Route as any);

if (!env.REACT_APP_STORYBOOK) {
  init({
    enabled: !!env.REACT_APP_SENTRY_DSN,
    dsn: env.REACT_APP_SENTRY_DSN,
    environment: STAGE,
    integrations: [
      reactRouterV5BrowserTracingIntegration({
        history,
      }),
    ],
    sendDefaultPii: false,
    release: env.REACT_APP_COMMIT_FRONTEND,
    initialScope: {
      user: {
        clientId: getClientId(),
      },
    },
    replaysOnErrorSampleRate: 0.05,
    tracesSampleRate: 1,
  });
}

Steps to Reproduce

Followed steps specified in https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/#parameterized-transaction-names to setup routing instrumentation in React app with React Router v5

Expected Result

Traces in sentry.io always appear in the form one of /fixed-root/:id when rendered with a SentryRoute component

Actual Result

Traces in sentry.io can appear in the form one of:
a. /fixed-root/the-actual-id
b. /fixed-root/:id
c. /fixed-root/*

[Lms24]

Hey @strewhella thanks for writing in! We'd like to look into fixing this but right now we don't have enough information. For instance, we don't know how you define your routes (using <SentryRoute>). Can you provide a concrete example route, ideally in the form of a minimal reproduction example (e.g. stackblitz, GH repo, etc) of a route that doesn't get parameterized correctly? Thanks!

[sighmun]

Hi @Lms24, thanks for the quick reply. I found that this problem went away in a production build, so it seems like the client can sometimes not parameterize routes in a development build, maybe due to script load order? We're using Vite for reference. I'll close this issue, thanks again