react-router integration doesn't support root and wildcard brances

[rafael-zilberman]

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 package are you using?

@sentry/react

SDK Version

7.15.0

Framework Version

17.0.2

Link to Sentry event

No response

Steps to Reproduce

1. Configure react router v6 integration in BrowserTracing intergation:

Sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN,
    integrations: [
        new BrowserTracing({
            routingInstrumentation: Sentry.reactRouterV6Instrumentation(
                useEffect,
                useLocation,
                useNavigationType,
                createRoutesFromChildren,
                matchRoutes,
            ),
        }),
        new ExtraErrorDataIntegration(),
        new OfflineIntegration(),
        postHogIntegration
    ],
    tracesSampleRate: 1.0,
});
2. Wrap react-router `useRoutes`:
```js
const useSentryRoutes = Sentry.wrapUseRoutes(useRoutes);
const App = () => {
    return useSentryRoutes(routes);
}

3. Use the following routes example:

const routes = [
    {
        path: "/",
        element: <NavBarLayout/>,
        children: [
            {
                path: "tests",
                children: [
                  {index: true, element: <TestComponent />},
                  {path: ":testId/*",element: <OtherTestComponent />},
                ]
              },
            {path: "/", element: <Navigate to="/home"/>},
            {path: "*", element: <Navigate to="/404" replace/>},
        ],
    },
    {
        path: "/",
        element: <MainLayout/>,
        children: [
            {path: "404", element: <Error />},
            {path: "*", element: <Navigate to="/404" replace/>},
        ],
    },
];

Expected Result

Traces with the url template to be /tests/:testId when I navigate to /tests/123 and /tests when I navigate to /tests

Actual Result

Traces with the url template of /:testId/* when I navigate to /tests/123 and //tests when I navigate to /tests

[rafael-zilberman]

Workaround for now is to remove the root paths and duplicate the wildcard children:

const routes = [
    {
-       path: "/",
        element: <NavBarLayout/>,
        children: [
            {
                path: "tests",
                children: [
                  {index: true, element: <TestComponent />},
+                 {path: ":testId",element: <OtherTestComponent />},
                  {path: ":testId/*",element: <OtherTestComponent />},
                ]
              },
            {path: "/", element: <Navigate to="/home"/>},
            {path: "*", element: <Navigate to="/404" replace/>},
        ],
    },
    {
-       path: "/",
        element: <MainLayout/>,
        children: [
            {path: "404", element: <Error />},
            {path: "*", element: <Navigate to="/404" replace/>},
        ],
    },
];