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

Created on 5 Mar 2020 · 7Comments · Source: microsoft/ApplicationInsights-JS

Description/Screenshot

On the Application Map, the front-end and the back-end are not connected when I use @microsoft/[email protected] on the Angular front-end. However, it works as expected when I use @microsoft/[email protected] 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.

Source

ZhimaoLin

👍1

All 7 comments

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",.

MariuszKogut on 5 Mar 2020

👍1

Thank you @MariuszKogut
Yeah. It works as expected when I use distributedTracingMode: DistributedTracingModes.AI with @microsoft/[email protected]. 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.

ZhimaoLin on 5 Mar 2020

👍1

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

MariuszKogut on 5 Mar 2020

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.

rikkiprince on 5 Mar 2020

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.

AyubAhmed133 on 5 Mar 2020

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.