beforeNavigate isn't called for ReactRouterV6

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

Framework Version

React 17.0.2

Link to Sentry event

No response

Steps to Reproduce

1. Setup sentry instrumentation with ReactRouterV6 according to the docs
2. Implement some dummy function for “beforeNavigate” on BrowserTracing options

    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.reactRouterV6Instrumentation(
          useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes,
        ),
        beforeNavigate: (ctx) => {
          console.log(ctx);
          return ctx;
        },
      }),
    ],

1. Go into the browser and navigate across different routes

Expected Result

console would print the ctx of each navigation

Actual Result

Except pageload - initial navigation , nothing happens.

Also tried to blend into “matchRoutes” function using hoisting. Also tried to capture the event in “beforeSend” Seems like the events doesn’t go trough there. Trying to enrich the events with the route context.

[AbhiPrasad]

Ah ok, was able to reproduce with https://stackblitz.com/edit/github-7tjxzc-gabqis?file=src/App.tsx. Will take a look!

[ymatusevich]

We stuck with the same issue. Hope the solution or fix will be found soon.