React Router V5 Integration is not parameterizing transaction names

[nicholas-codecov]

trafficstars

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] 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.0.0-beta.3

Framework Version

React 18.2.0

Link to Sentry event

https://codecov.sentry.io/performance/?project=5514400&statsPeriod=14d

SDK Setup

export const setupSentry = ({
  history,
}: {
  history: ReturnType<typeof createBrowserHistory>
}) => {
  // no sentry dsn, don't init
  if (!config.SENTRY_DSN) {
    return
  }

  // configure sentry product integrations
  const replay = Sentry.replayIntegration()
  const tracing = Sentry.reactRouterV5BrowserTracingIntegration({
    history,
  })

  const integrations = [replay, tracing]

  // Only show feedback button in production
  // spotlight takes the place of the feedback widget in dev mode
  if (config.NODE_ENV === 'production') {
    const feedback = Sentry.feedbackIntegration({
      colorScheme: 'light',
      showBranding: false,
      formTitle: 'Give Feedback',
      buttonLabel: 'Give Feedback',
      submitButtonLabel: 'Send Feedback',
      nameLabel: 'Username',
      isEmailRequired: true,
    })
    integrations.push(feedback)
  }

  const tracePropagationTargets = ['api.codecov.io', 'stage-api.codecov.dev']
  // wrapped in a silent try/catch incase the URL is invalid
  try {
    const { hostname } = new URL(config.API_URL)
    // add the hostname to the tracePropagationTargets if it's not already there
    if (!tracePropagationTargets.includes(hostname)) {
      tracePropagationTargets.push(hostname)
    }
  } catch {}

  Sentry.init({
    dsn: config.SENTRY_DSN,
    debug: config.NODE_ENV !== 'production',
    release: config.SENTRY_RELEASE,
    environment: config.SENTRY_ENVIRONMENT,
    integrations,
    tracePropagationTargets,
    tracesSampleRate: config?.SENTRY_TRACING_SAMPLE_RATE,
    // Capture n% of all sessions
    replaysSessionSampleRate: config?.SENTRY_SESSION_SAMPLE_RATE,
    // Of the remaining x% of sessions, if an error happens start capturing
    replaysOnErrorSampleRate: config?.SENTRY_ERROR_SAMPLE_RATE,
    beforeSend: (event, _hint) => {
      if (checkForBlockedUserAgents()) {
        return null
      }

      return event
    },
    beforeSendTransaction: (event, _hint) => {
      if (checkForBlockedUserAgents()) {
        return null
      }

      return event
    },
    ...deClutterConfig,
  })

  if (config.NODE_ENV === 'development') {
    Spotlight.init({
      injectImmediately: true,
      integrations: [Spotlight.sentry()],
    })
  }
}

Steps to Reproduce

1. Installed v8.0.0-beta.3

Just to note, we do currently have two routes that are not wrapped with the Sentry helper.

Expected Result

Actual Result

[nicholas-codecov]

We have since bumped to beta 4 of V8.

[mydea]

Hey, just to clarify: Are you using withSentryRouting as described here:

https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/#parameterized-transaction-names

without this, you wouldn't get parametrized routes.

[nicholas-codecov]

Yes sorry, i forgot to include that portion of our Sentry file:

https://github.com/codecov/gazebo/blob/main/src/sentry.ts#L53

[mydea]

Thanks for bearing with us! I identified the problem and have a fix up here: https://github.com/getsentry/sentry-javascript/pull/11855

[nicholas-codecov]

@mydea thanks for the quick fix, wondering if this will also be included with V8?

[mydea]

@mydea thanks for the quick fix, wondering if this will also be included with V8?

Yes, it will be in the next release - most likely we'll cut v8.0.0-beta.6 early thursday!

[nicholas-codecov]

Awesome tysm!