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

[ZhimaoLin]

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.

[MariuszKogut]

I had a similar issue in React. I figured out that

      distributedTracingMode: DistributedTracingModes.W3C,

is the problem. Using

      distributedTracingMode: DistributedTracingModes.AI

works great for me. I'm on "@microsoft/applicationinsights-web": "^2.4.4",.

[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.

[MariuszKogut]

Makes sense to me, @ZhimaoLin. I would also prefer W3C over AI, because it's a good choice to rely on standards. Hopefully Microsoft will fix this issue...

[rikkiprince]

This is also affecting our team. We spent a lot of time debugging because the applicationinsights-web documentation recommends using DistributedTracingModes.W3C because .AI is being deprecated, so we assumed it would work with .W3C.

[AyubAhmed133]

Yes my team and I have also been having problems with this and we would rather not update later when .AI becomes deprecated. I agree hopefully Microsoft can resolve this issue for us.

[MSNev]

The above #1213 is included in the next version 2.5.1 which has already been released to NPM and is scheduled to be released to the main CDN channel tomorrow.

[ZhimaoLin]

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

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.