Parameterized paths not picked up when using `react-router-v6` with `basename`

[rottbers]

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.69.0

Framework Version

React 18

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

Hope another test case is sufficient as reproduction, it's based on the existing ones in reactrouterv6.4.test.tsx:

it('works with parameterized paths and `basename`', () => {
  const [mockStartTransaction] = createInstrumentation();
  const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createMemoryRouter as CreateRouterFunction);

  const router = sentryCreateBrowserRouter(
    [
      {
        path: '/',
        element: <Navigate to="some-org-id/users/some-user-id" />,
      },
      {
        path: ':orgId',
        children: [
          {
            path: 'users',
            children: [
              {
                path: ':userId',
                element: <div>User</div>,
              },
            ],
          },
        ],
      },
    ],
    {
      initialEntries: ['/admin'],
      basename: '/admin',
    },
  );

  // @ts-expect-error router is fine
  render(<RouterProvider router={router} />);

  expect(mockStartTransaction).toHaveBeenCalledTimes(2);
  expect(mockStartTransaction).toHaveBeenLastCalledWith({
    name: '/admin/:orgId/users/:userId',
    op: 'navigation',
    origin: 'auto.navigation.react.reactrouterv6',
    tags: { 'routing.instrumentation': 'react-router-v6' },
    metadata: { source: 'route' },
  });
});

Expected Result

Expect name to contain parameter names (i.e. /admin/:orgId/users/:id)

Actual Result

Name contains the parameter values (e.g. /admin/some-org-id/users/some-user-id)

[AbhiPrasad]

This fix was released with https://github.com/getsentry/sentry-javascript/releases/tag/7.71.0. Thanks for reporting @rottbers!

[rottbers]

This fix was released with https://github.com/getsentry/sentry-javascript/releases/tag/7.71.0. Thanks for reporting @rottbers!

I've tested the fix but unfortunately the parameter values path (e.g. /admin/some-org-id/...) still appears as the transaction name in the sentry dashboard instead the parameter names path (e.g. /admin/:orgId/...)

• @sentry/react: 7.71.1
• react-router-dom: 6.14.1

[AbhiPrasad]

@onurtemizkan mind taking a look?

[onurtemizkan]

@rottbers, could you provide us a reproduction? The patch is tested with the new case, so we need to see the specifics to get the root of it.