sentry-trace and baggage headers are not attached to XHR Requests

[JustDoItSascha]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/angular

SDK Version

7.58.1

Framework Version

Angular 12.2.17

Link to Sentry event

No response

SDK Setup

Sentry.init({
  dsn: '...',
  integrations: [
    new Sentry.BrowserTracing({
      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
      tracePropagationTargets: ['localhost', /^http/],
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost', /^http/],
});

Steps to Reproduce

I have an Angular 12 application where I added sentry. But the sentry-trace header is not attached to XHR Requests initiated by HttpClient. When I'm doing a fetch() manually, then the header is set.

Expected Result

I see the sentry-trace header in the request.

Actual Result

I don't the the header in the request.

[AbhiPrasad]

Hey @JustDoItSascha, you only need to define tracePropagationTargets in the top level config.

Re: this problem, did it work before? Or has this never worked?

But the sentry-trace header is not attached to XHR Requests initiated by HttpClient

How are you making the requests with HttpClient? I would recommend adding /^\/(?!\/)/ to your tracePropagationTargets, which should match requests going to your local domain.

[JustDoItSascha]

Like always: I inject HttpClient in the constructor and then this.httpClient.get('url') for example. I already tried other targets, but with /^http/ it should also match all requests. And it's working when I do a fetch(), but not HttpClient.get(). It never worked in this Project. Installed sentry freshly in this Project.

[AbhiPrasad]

@Lms24 have you ran into this before?

[JustDoItSascha]

I also disabled all Interceptors to be sure that there are no side effects. I'm not sure how Sentry adds the header to all XHR requests. If it's even possible that there are side effects...

[AbhiPrasad]

I also disabled all Interceptors to be sure that there are no side effects. I'm not sure how Sentry adds the header to all XHR requests. If it's even possible that there are side effects...

Our BrowserTracing instrumentation controls how headers are attached.

Is there a way you can provide us a reproduction to debug further @JustDoItSascha?

[JustDoItSascha]

Unfortunately that does not explain HOW it will be attached technically or where I could start debugging to find the issue...

And no, i can't provide a reproduction, because I would have to copy the whole repository. :(

[AbhiPrasad]

Unfortunately that does not explain HOW it will be attached technically or where I could start debugging to find the issue...

Here's the part of the code that determines how headers are attached:

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

Line 124 in 2c3066e

export function instrumentOutgoingRequests(_options?: Partial<RequestInstrumentationOptions>): void {

And no, i can't provide a reproduction, because I would have to copy the whole repository. :(

Is there a way to provide a minimal repro with a plain angular 12 app?

[JustDoItSascha]

I will see if I can provide it. In the meantime I found out that this log will not appear in the faulty project:

addInstrumentationHandler('xhr', (handlerData) => {
      console.log('xhr2');
      const createdSpan = xhrCallback(handlerData, shouldCreateSpan, shouldAttachHeadersWithTargets, spans);
      if (_optionalChain([_experiments, 'optionalAccess', _3 => _3.enableHTTPTimings]) && createdSpan) {
        addHTTPTimings(createdSpan);
      }
    });

But it appears in other projects with Angular 16 for example.

Edit:

Log number #1 & #2 are coming, but not log number #3:

[AbhiPrasad]

@onurtemizkan - could you help investigate and reproduce this?

[JustDoItSascha]

I have found the bug, but not the root cause:

In instrument.js we have this:

and in object.js we then have this:

I have no idea, why it can't find "open" in XMLHttpRequest. If I log it, it's there...

[JustDoItSascha]

Ok, sorry guys, I found the issue and I hope that it will maybe help some other folks out there if the stumble across this:

The error was not Sentry, but another library called pace-js. This library overwrites the XMLHttpRequest object in that way:

window.XMLHttpRequest = function() {
  // Do pace-js stuff
  return new XMLHttpRequest();
}

Therefore Sentry cannot overwrite methods like open and send on the XMLHttpRequest prototype, because the prototype is now the function and not the initial XMLHttpRequest class.

Ater removing pace-js (a library not updated for 2 years) it works well :)

Thanks for your help. Without I wouldn't have find it because I wouldn't have known where to look in the Sentry code to debug it :)

[Lms24]

Wow, that must have been hard to pin down.

Therefore Sentry cannot overwrite methods like open and send on the XMLHttpRequest prototype, because the prototype is now the function and not the initial XMLHttpRequest class.

Yeah this seems plausible. We'd normally suggest raising an issue in the library repo but given that it's not been updated in 2 years I'm not sure this will help much. Hope you can find a replacement for it :)

Thanks for letting us know! Closing the issue for the time being.