Using sentry while having an active baseURL

[ruudandriessen]

Using sentry when your application is not hosted on the root of the domain seems to require a lot of configuration out of the box to make it properly function.

For example, we are hosting our application on domain.com/<organization>/<account>/projectName/....
However, this results in:

• All of our issues not being correctly grouped (since issues happening across orgs/accounts have different stack traces).
• All of our transactions not being correctly grouped (similar reason).

The only option it seems we have is overriding all url related properties in beforeSend and beforeTransactionSend.

Is there no other way to handle this? i.e. by specifying a baseURL in a single spot that will automatically do this?

[AbhiPrasad]

Hey @ruudandriessen thanks for writing in!

We have the RewriteFrames integration that is meant to be used for scenarios like this. I recommend you take a look at that!

All of our transactions not being correctly grouped (similar reason).

What framework do you use for your URL? You might want to look at creating a custom routing instrumentation.

sentry-javascript/packages/tracing-internal/src/browser/browsertracing.ts

Line 135 in 4f44046

routingInstrumentation<T extends Transaction>(

export function customRoutingInstrumentation(
  customStartTransaction,
  startTransactionOnPageLoad,
  startTransactionOnLocationChange,
): void {
  if (startTransactionOnPageLoad) {
    // make sure name is paramaterized (for ex. use /users/:id instead of /users/123)
    const name = getBestTransactionName();
    customStartTransaction({ op: 'pageload', name });
  }
  
  if (startTransactionOnLocationChange) {
    // some example frontend router
    frontendRouter.onPageChange(name => {
      customStartTransaction({ op: 'navigation', name });
    });
  }
}

// later

Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [
    new Sentry.BrowserTracing({ routingInstrumentation: customRoutingInstrumentation }),
  ],
});

[AbhiPrasad]

Based on your feedback we're also going to be looking at improving out of the box grouping defaults for issues, please stay tuned for that!

[ruudandriessen]

First off: Thanks for the help! This was a great starting point and it solved some things already. I found some things out while working through it though. I'll place some of my notes here since some of them might be (un)known bugs.

RewriteFrames

It looks like RewriteFrames doesn't actually work as how I expected. It has a root property and I expected if I place the baseURL in there it would work. However, it seems that the integration assumes the filenames to only include the path and not the domain (which it does). That meant, the root property effectively did nothing.

For example:

filename: "https://domain.com/dynamic/app/index.js"

Would not be transformed into:

filename: "app/index.js"

I wrote a simpler iteratee which does work:

iteratee: (frame) => ({
    ...frame,
    filename: frame.filename?.replace(document.baseURI, ''),
}),

Transactions

It looks like this the above does not impact transactions at all. We're currently using the react router (with 6.4 data API) integration. React router is setup with a correct basename, so I'd expect this to function correctly when using this integration 🤔 - taking into account the baseName could be something that would have to be implemented in that integration though?

I'll have a look into having custom routing instrumentation in the meantime though.

Suggestions

For us, and I reckon everyone running sentry from a domain that's not the root - the ideal state would be that sentry would automatically pick up a base tag if it exists and apply this type of filtering automatically. Alternatively, this can be opt in.

However, I'm unsure what impact that may have, so I can't judge the size of that change. Alternatively, the solutions I provided above can also be a way - but that would likely need some docs updates to explain it as such.