[BUG] The latest version 2.4.4 cannot connect front-end with back-end on the Application Map on Application Insights

Description/Screenshot

On the Application Map, the front-end and the back-end are not connected when I use @microsoft/applicationinsights-web@2.4.4 on the Angular front-end. However, it works as expected when I use @microsoft/applicationinsights-web@2.1.0 on the Angular front-end.

Environment

I have 3 components: AngularFrontend, Backend1, and Backend2.

Components	Framework	Roles
AngularFrontend	Angular 9.0.2	WebApp
Backend1	.Net Core 3.1	WebAPI
Backend2	.Net Core 3.1	WebAPI

The AngularFrontend calls Backend1, and then Backend1 calls Backend2. The calls are via HTTPS.

Application Insights Setup

AngularFrontend

I use npm i --save @microsoft/applicationinsights-web, which installs the latest version of @microsoft/applicationinsights-web(2.4.4). Then, I followed the NPM Setup in this documentation: https://github.com/microsoft/ApplicationInsights-JS#npm-setup-ignore-if-using-snippet-setup. After that, I set cloud role name by following https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-map#clientbrowser-side-javascript.

export class MonitorService {
  public appInsights = new ApplicationInsights({
    config: {
      instrumentationKey: environment.appInsights.instrumentationKey,
      distributedTracingMode: DistributedTracingModes.W3C,
      enableCorsCorrelation: true,
    }
  })

  constructor() { 
    this.appInsights.loadAppInsights()
    this.appInsights.trackPageView();

    this.appInsights.addTelemetryInitializer((envelope) => {
      envelope.tags["ai.cloud.role"] = "AngularFrontend";
    });
  }
}

Backend1 and Backend2

I setup Application Insights on my .Net Core WebApi using https://docs.microsoft.com/en-ca/azure/azure-monitor/learn/dotnetcore-quick-start#configure-app-insights-sdk. The SDK Microsoft.ApplicationInsights.AspNetCore version is 2.12.0. Since the SDK enables distributed tracing by default, I only configure Cors and TelemetryInitializer.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy(MyAllowSpecificOrigins,
                builder =>
                {
                    builder.WithOrigins("*");
                    builder.WithHeaders("*");
                });
            });

            services.AddControllers();
            services.AddSingleton<ITelemetryInitializer, MyTelemetryInitializer>();
            services.AddApplicationInsightsTelemetry();
        }

public class MyTelemetryInitializer : ITelemetryInitializer
    {
        public void Initialize(ITelemetry telemetry)
        {
            telemetry.Context.Cloud.RoleName = "Backend1";
            //telemetry.Context.Cloud.RoleInstance = "Custom RoleInstance";
        }
    }

Problem

On the Application Map, the AngularFrontend node is not connected to the Backend1 node.

Steps to Reproduce

• OS/Browser: Windows 10 Enterprise Version 1909 OS Build 18363.657. Chrome Version 80.0.3987.132 (Official Build) (64-bit)
• SDK Version [e.g. 22]: @microsoft/applicationinsights-web 2.4.4
• How you initialized the SDK: NPM Setup

Try to create an example project where an Angular 9 front-end calls a .Net Core 3.1 WebApi via HTTPS. Both of them send telemetry to one Application Insights. Then, check the Application map on the Application Insights, it should be observed that the front-end node is not connected to the back-end.

Expected behavior

The front-end and the back-end should be connected on the Application Map

Additional context

I am having the same problem with #894. I noticed that it says the problem is solved by turning on the cors correlation option in July 2019. So, I tried version 2.1.0 that was released on July 5, 2019, and it worked as expected.

[ZhimaoLin]

Thank you. @microsoft/applicationinsights-web 2.5.1 fixed the problem.

[ZhimaoLin]

Thank you @MariuszKogut Yeah. It works as expected when I use distributedTracingMode: DistributedTracingModes.AI with @microsoft/applicationinsights-web@2.4.4. However, according to the Microsoft official document, it says, “The correlation HTTP protocol, also called Request-Id, is being deprecated.” Thus, I wish they can fix the W3C mode, and I will leave this issue open.

I suspect that the root cause is that the operation_Parent_Id of request entry does not match the id of its previous dependency entry. When I use @microsoft/applicationinsights-web with the version that is equal to or higher than 2.2.0, which means it defaults to W3C Trace-Context. the id of dependency entry is in a format of |A.B. Then, when the HTTPS call reaches my Backend1 from AngularFrontend, the request entry emitted from Backend1 only uses B as its operation_ParentId. This causes the disconnection between the front-end and back-end on the Application Map.