Missing the hash section of URLs in frontend issues

[InterstellarStella]

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/vue

SDK Version

10.22.0

Framework Version

No response

Link to Sentry event

No response

Reproduction Example/SDK Setup

Sentry.init({
   app,
   dsn: 'DSN_HERE',
   debug: true,
});

Steps to Reproduce

Have an app that uses URL hashes and manually send any event to Sentry.

Expected Result

The URL field includes the hash part of the URL, ie. https://mydomain.com/#/page/123.

Actual Result

The URL field does not include the hash part of the URL, and instead shows https://mydomain.com/ in the url tag of the event. Example event is given in the internal Linear ticket.

Additional Context

_{Tip: React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1100

[JPeer264]

Just to confirm. Where is it expected to see the URL with the hash in it?

Could you try to also use the browserTracingIntegration and check if it changes anything?

[InterstellarStella]

Hi @JPeer264 , the customer expects to see the URL with the hash in it in the url tag of an error event. They are using the browserTracingIntegration in their original setup as well.

[Lms24]

So @JPeer264 and I looked into this a bit.

Here's the reproduction we created that reproduces this issue: https://github.com/Lms24/gh-sentry-javascript-18059-vue-router-hash

Here's how the url tag is created:

• Our SDK takes window.location.href when catching an error and sending it to Sentry (see code). It sends it via event.request.url. So at this point, the hash part is still included.
• Relay/Sentry backend takes event.request.url and extracts the url tag from it. Sentry SDKs don't set tags by themselves but let Relay extract the relevant ones from various data points we send in events.
• It seems like Relay strips the fragment from the URL because when expecting the payload sent from the SDK.

I'd argue for the majority of users, this is correct behaviour to avoid high-cardinality tags which in a lot of cases contain sensitive information like session ids or tokens. For users using hash-based routing, it's not ideal. For now I'd recommend working around this.

Workaround

Users can set the url tag explicitly in their code so that Relay no longer extracts it from the SDK's request data. For Vue, I'd recommend listening to the afterEach hook like so:

router.afterEach(() => {
  // set the URL tag explicitly to override tag extraction:
  Sentry.getGlobalScope().setTag("url", window.location.href);
});

Note that based on our reproduction, Sentry.browserTracingIntegration({router}) seems to correctly handle navigations with Vue Router in hash routing mode.