@sentry/tracing inconsistent transaction names when using history with `basename`

[tzimmermann]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/react
• @sentry/node
• raven-js
• raven-node (raven for node)
• other: @sentry/tracing

Version:

6.4.1

Description

We're using the reactRouterV5Instrumentation and would like to generate the same route names for pageload and for navigation transactions.
For example:
Given the relative path in the browser:
/my/base/path/foo/some-dynamic-id/
then I expect to get a transaction named:
/foo/:id

The base path should be stripped from the name as its passed as basename to the history as suggested in #3107 (comment)

What we observe though is that only the navigation events are being named correctly (/foo/:id), the initial pageload receives the full path (/my/base/path/foo/some-dynamic-id/).

After some digging in the code, it's quite clear why this happens:
This

name: getTransactionName(global.location.pathname),

should be

name: getTransactionName(history.location.pathname),

The history wrapper object needs to be used (instead of global.location) in order to have the expected basename handling applied. For navigations events, this is already the case, as these are using history.listen some lines below.

Would you see any issues with that change? Otherwise I'll happily provide a PR 😃

[AbhiPrasad]

Yes this change makes sense to me! If you could open a PR that would be great :)