[BUG] Network calls aren't visualized correctly between frontend(AI-JS) / backend(Azure Otel Distro) components in Application Map

[p-hlp]

Description

Hey together!

We are currently working on a small PoC for getting a monitoring solution up and running. We basically went with the recommendations and instrumented our two web-clients with application insights sdk + react plugin and our node/express backend with with the Azure OpenTelemetry Distro + some additional otel sdks (mainly for express). Every component has their own application insights resource where the telemetry data is exported to.

Now, from a backend perspective everything seems to work fine, requests are showing up, the mongodb and other external dependencies are correctly visualized in the application map.

Looking at one of the isolated client application map, we also see everything correctly. The backend is running on localhost:8080 and the client on localhost:3000.

When clicking on 'Update map components', we get the full picture with all components.

Frontend 1 (localhost:3000), Frontend 2 (localhost:3001) and the Backend (localhost:8080). We don't see the calls from the web-clients to the backend, however what we can see are the transaction details including a full trace. I removed some identifying information here, hope thats fine.

Expected behavior

Calls should get visualized between web-clients / backend, as can be seen in #1207.

Environment

Web-Clients:

• @microsoft/applicationinsights-web - 3.0.7
• @microsoft/applicationinsights-react-js - 17.0.3

Backend:

• @azure/monitor-opentelemetry - 1.2.0

AI Setup / Web-Clients

const reactPlugin = new ReactPlugin();

const appInsights = new ApplicationInsights({
  config: {
    connectionString: import.meta.env.VITE_APPLICATION_INSIGHTS_CONNECTION_STRING,
    enableAutoRouteTracking: true, // react-router doesn't expose router history
    extensions: [reactPlugin],
    // distributedTracingMode: DistributedTracingModes.AI,
    enableCorsCorrelation: true,
    // maxBatchInterval: 0,
    // autoTrackPageVisitTime: true,
    // enableRequestHeaderTracking: true,
    // enableResponseHeaderTracking: true,
  },
});

appInsights.addTelemetryInitializer((env: ITelemetryItem) => {
  if (env.tags) env.tags['ai.cloud.role'] = 'Frontend 1';
  if (env.baseType === 'PageviewData' || env.baseType === 'PageviewPerformanceData') {
    if (env.baseData) env.baseData.name = transformUrlToPageName(window.location.pathname);
  }
});

appInsights.loadAppInsights();
appInsights.appInsights.trackPageView();

const TrackedRootApp = withAITracking(reactPlugin, RootApp);

Azure OTel Distro Setup / Backend

The setup heavily borrows from this example.

export const intializeTelemetry = () => {
  const httpInstrumentationConfig: HttpInstrumentationConfig = {
    enabled: true,
    ignoreIncomingRequestHook: (request: IncomingMessage) => {
      // Ignore OPTIONS incoming requests
      if (request.method === 'OPTIONS') {
        return true;
      }
      return false;
    },
  };

  const customResource = Resource.EMPTY;
  customResource.attributes[SemanticResourceAttributes.SERVICE_NAME] = 'Backend';

  const mongoInstrumentationConfig: MongoDBInstrumentationConfig = {
    enabled: true,
    enhancedDatabaseReporting: true,
  };

  const options: AzureMonitorOpenTelemetryOptions = {
    resource: customResource,
    azureMonitorExporterOptions: {
      connectionString: process.env.APPLICATION_INSIGHTS_CONNECTION_STRING,
    },
    instrumentationOptions: {
      http: httpInstrumentationConfig,
      mongoDb: mongoInstrumentationConfig,
    },
  };

  useAzureMonitor(options);
  addOpenTelemetryInstrumentation();
};

/**
 * Add additional OpenTelemetry instrumentation that is not bundled with Azure OpenTelemetry Distro
 */
const addOpenTelemetryInstrumentation = () => {
  const instrumentations = [new ExpressInstrumentation()];
  registerInstrumentations({
    tracerProvider: trace.getTracerProvider(),
    meterProvider: metrics.getMeterProvider(),
    instrumentations: instrumentations,
  });
};

Additional Information

We played around a bit with the configuration of app insights in the web-clients as you can see from the things commented out. Changing distributedTracingMode to only AI or W3C didn't really give a different outcome.

Request-Id and traceparent are also correctly added to the client requests headers.

I'd really appreciate any hints on how to solve this.

[MSNev]

Changing distributedTracingMode to only AI or W3C didn't really give a different outcome.

The default value for this is to send both AI and W3C headers, so I'm not surprised that this didn't change anything as you really need to have the W3C header being sent.

@siyuniu-ms Can you please drill into the details here and if necessary please engage the portal team to try and understand why the App Map is not showing the client calls.

[p-hlp]

Thanks for the swift reply! I created small repository for reproducing this here. Please let me know if you need any more information.