Applicationinsights-js: traceparent/tracestate not in outgoing request headers

[dlewis2017]

Description/Screenshot
Upon following the instructions here to enable distributedTracingMode with AI_AND_W3C, AI, or W3C, i'm still not seeing traceparent/tracestate on outgoing request headers.

Steps to Reproduce
Follow regular instructions for applicationinsights setup for web as well as react-native plugin and set distributedTracignMode property of ApplicationInsights config object to DistributedTracingModes.AI_AND_W3C using type IConfig | IConfiguration

import { ApplicationInsights, DistributedTracingModes, IConfig, IConfiguration } from "@microsoft/applicationinsights-web";
import { ReactNativePlugin } from "@microsoft/applicationinsights-react-native";
// ---
const appInsightsConfig: IConfig | I Configuration = {
      disableAjaxTracking: false,
      disableCorrelationHeaders: false,
      disableFetchTracking: false,
      distributedTracingMode: DistributedTracingModes.AI_AND_W3C,
      instrumentationKey,
    extensions: [RNPlugin]
};
const appInsights = new ApplicationInsights({ config: appInsightsConfig });
appInsights.loadAppInsights();
// ---

• OS/Browser: iOS, React-Native application, Typescript
• SDK Version [e.g. 22]: [email protected], [email protected]
• How you initialized the SDK: npm setup

Expected behavior
Expected to see traceparent/tracestate on outgoing requests.

Additional context
Even though this bug is resolved I tried to match the header params according to this thread just in case.

Descriptions of urls:

* General Headers
    * Request URL: https###
    * Request Method: GET
    * Status Code: 200 OK
    * Remote Address: ###
    * Referrer Policy: no-referrer-when-downgrade
* Response Headers
    * Content-Encoding: gzip
    * Content-Type: application/json; charset=utf-8
    * Date: Fri, 05 Jun 2020 20:52:06 GMT
    * Request-Context: appId=###
    * Transfer-Encoding: chunked
    * Vary: Accept-Encoding
    * x-content-type-options: nosniff
    * x-correlation-id: context.Request.Headers.GetValueOrDefault("x-correlation-id","")
    * X-Powered-By: ASP.NET
* Request Headers
    * Provisional headers are shown
    * accept: text/plain
    * authorization: ###
    * content-type: application/json
    * dwp-apim-subscription-key: ###
    * User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.10.7 Chrome/78.0.3904.130 Electron/7.1.9 Safari/537.36
    * x-app-version: 1.0
    * x-build-version: 1
    * x-correlation-id: ###
    * x-user-session-id: ###
* Query String Parametersview source
view URL encoded
    * top: 10

"###" - indicates that the field is present but left out for sensitivity reasons
@markwolff Is this what you're looking for?

I'm relatively new to App Insights so please let me know if there is not enough information or if this is not the best place to post this.

Thanks,

[markwolff]

Could you provide a network trace or describe the urls your app is on and to where requests are being sent? One thing that could be required is enableCorsCorrelation if you are sending cross origin requests here.

[markwolff]

@dlewis2017 This would be the correct place to ask! Just trying to understand what type of outgoing requests you are making:

• Is your app itself making the requests? Or is it within some sort of embedded webview that is making them?
• Are they to a url outside of your app's url? For this, you should try adding enableCorsCorrelation: true to your config and see if this resolves the issue.
• Also, are you seeing any of these requests at all in the Azure Portal?

[dlewis2017]

@markwolff Cool!

• The app itself
• Inside the app and I have set enableCorsCorrelation: true with no luck
• Yes

[alaingiller]

enableCorsCorrelation: true should be enough to get the traceparent. but tracestate is currently not supported, see https://github.com/microsoft/ApplicationInsights-JS/issues/1291

Following config must work:

const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey,
    distributedTracingMode: DistributedTracingModes.W3C,
    enableCorsCorrelation: true
  }
});
appInsights.loadAppInsights();

[dlewis2017]

@alaingiller okay thanks. I'll reduce my config to just that and see if it works.

[dlewis2017]

@alaingiller @markwolff I tried stripping down the config to what is presented above and still no luck.
I'm using the Network Inspect feature of React Native Debugger to check the requests. I also checked App Insights with no luck.

[dlewis2017]

Just to follow up @alaingiller @markwolff A teammate of mine tried to step through app insights sdk via chrome debugger and saw the correct attached headers. Seems to be a React Native Debugger issue. Thanks for the insights!

[alchau92]

I just wanted to add more details for anyone who tries to debug network requests thru React Native Debugger - this issue seems occur when enabling Network Inspect on React Native Debugger. It uses a Web Worker to send XHR requests when it gets enabled, and the mechanism in which App Insights JS SDK uses to catch those XHR events do not get hit. As soon as I turned off Network Inspect, the XHR send event callback was being hit again.