ApplicationInsights-JS: [BUG] Unable to include telemetry correlation headers

Description We using this SDK in an SPA using fetch. The requests to the my .NET Web APIs do not include the telemetry correlation headers (‘Request-Id’ and ‘Request-Context’). Dependency telemetry is being collected just fine.

Request Headers
  Request URL: https://api.domain.com:8082/resource
  Request Method: GET
  Status Code: 200 
  Referrer Policy: no-referrer-when-downgrade
  :authority: api.domain.com:8082
  :method: GET
  :path: /resource
  :scheme: https
  accept: application/json
  accept-encoding: gzip, deflate, br
  accept-language: en-US,en;q=0.9,es;q=0.8,uk;q=0.7
  content-type: application/json
  origin: https://client.domain.com
  referer: https://client.domain.com
  sec-fetch-dest: empty
  sec-fetch-mode: cors
  sec-fetch-site: cross-site
  user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
  Chrome/80.0.3987.149 Safari/537.36

Response headers
  access-control-allow-credentials: true
  access-control-allow-origin: https://client.domain.com
  access-control-expose-headers: Request-Context
  content-encoding: gzip
  content-length: 361
  content-type: application/json; charset=utf-8
  date: Sat, 28 Mar 2020 17:18:46 GMT
  request-context: appId=cid-v1:<some id>
  server: Microsoft-IIS/10.0
  status: 200
  x-powered-by: ASP.NET

OS/Browser: Windows / Chrome (Version 80.0.3987.149)
SDK Version [e.g. 22]: Version 2.5.2
How you initialized the SDK: NPM setup / webpack

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

export class Logger {
  _ai;

  constructor() {
    this._init();
  }

  _init() {
    var options = {
     config: {
       instrumentationKey: 'my key',
       appId: 'my-app',
       autoTrackPageVisitTime: true,
       disableAjaxTracking: true,
       disableFetchTracking: false,
       enableCorsCorrelation: true,
       enableRequestHeaderTracking: true,
       enableDebug: true,
       loggingLevelConsole: 2,
    }
    this._ai = new ApplicationInsights(options);
    this._ai.loadAppInsights();
  }
  // Logging methods excluded
}

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17

Most upvoted comments

Now also fully deployed to primary CDN

MSNev on Apr 8, 2020

Fixed deployed as NPM and next CDN channels

MSNev on Apr 8, 2020

@MSNev I have tested now and found that you were right about your findings.

But I also found that the fetch “interception” provided by applicationinsights-js (where you append the correlation headers) has flaws, since it only happens when calling fetch with a string (the URL) as first argument. It does not happen when using a Request object.

The fetch function in the Fetch API has different oveloads:

// The actual signature:
fetch(info: string | Request, init?: RequestInit): Promise<Response>;

// The same, written as overloads:
fetch(url: string): Promise<Response>;
fetch(url: string, init: RequestInit): Promise<Response>;
fetch(request: Request): Promise<Response>;
fetch(request: Request, init: RequestInit): Promise<Response>;

The Request constructor has this signature:

new (url: string, init?: RequestInit);

And the headers property in RequestInit can be undefined, a <string, string> object literal or a Headers object.

interface RequestInit {
    //...
    headers: undefined | Record<string, string> | Headers;
    //...
}

All these variations need to be covered by your fetch “interception”.

You seem to intercept the fetch method correctly to append correlation header only when fetch is called with the URL (string) as the first argument, but it does not handle when sending a Request instance.

Please review my findings (see tests below). All these fetch calls should end up with correlation headers, but it seems only some of them work:

        const url = "/api/values";

        // 1. Not working:
        await fetch(url);

        // 2. Works:
        await fetch(url, {});

        // 3. Works:
        await fetch(url, {
            headers: {}
        });

        // 4. Works:
        await fetch(url, {
            headers: new Headers()
        });

        // 5. Does not work:
        await fetch(new Request(url));

        // 6. Does not work:
        await fetch(new Request(url, {}));

        // 7. Does not work:
        await fetch(new Request(url, {
            headers: {}
        }));

        // 8. Does not work:
        await fetch(new Request(url, {
            headers: new Headers()
        }));

Please update the code and test suite to cover all these scenarios.

josundt on Apr 3, 2020

I added following to my existing config and the headers were still not added.

correlationHeaderDomains: ['api.domain.com', 'client.domain.com', 'domain.com']

tcihak-fqa on Apr 2, 2020