Navigation transactions not triggering for hash router

[AbhiPrasad]

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

Framework Version

No response

Link to Sentry event

No response

SDK Setup

Using React Router v6 instrumentation + hash router

Steps to Reproduce

enable sdk. See SDK is only generating pageloads not navigations

Expected Result

Sentry generates transactions for navigations

Actual Result

location seems to be changing just fine.

[AbhiPrasad]

@onurtemizkan can you dig into this when you get time?

[onurtemizkan]

@AbhiPrasad, I have just tried to reproduce the issue, and it looks like both usages of wrapping HashRouter are working fine with the latest versions of Sentry SDK and React Router.

One thing I suspect that may cause this behaviour is, initialising the SDK, but not instrumenting the hash router/routes properly.

The pageload transactions start on Sentry.init when we call reactRouterV6Instrumentation (so this part seems to be configured properly)

https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/#usage-with-react-router-64-data-api

For the rest of the functionality:

// We can instrument `createHashRouter` with `Sentry.wrapCreateBrowserRouter(...)`
const sentryCreateHashRouter =
  Sentry.wrapCreateBrowserRouter(createHashRouter);

const router = sentryCreateHashRouter([
  // ...
]);

or

const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);

ReactDOM.render(
  <HashRouter>
    <SentryRoutes>
      <Route path="/" element={<div>Home</div>} />
    </SentryRoutes>
  </HashRouter>
);

are needed.

Could you let me know if that's the case?

[AbhiPrasad]

The user was using SentryRoutes. The tricky part of this problem was that it worked locally, but not in prod environments. I'm not sure why.

[onurtemizkan]

Interesting, I'll try to reproduce this on a deployed app 👍

[onurtemizkan]

I'm still not able to reproduce the issue on an app deployed to Vercel: https://react-router-v6-sentry-trial-gjq5.vercel.app/