My angular SPA application is calling a back end api which in turn can call multiple apis.
To see the end-to-end trace, we are using application insights sdk "@microsoft/applicationinsights-web": "^2.5.4" enabling W3C tracing mode.
The issue is that all the different api calls from the SPA are having the same trace-id. So in azure application insight end-to-end trace, I see too many request traces under the same browser parent.
what I want is a different trace-id for each new api request.
traceparent is like 00-1e9d1a6e585e4d35afc5af825fadaa86-f50cda29ee924950-01 where 1e9d1a6e585e4d35afc5af825fadaa86 is the trace-id.
No matter what i change in settings, it does not work as intended.
this.appInsights = new ApplicationInsights({
config: {
instrumentationKey: settings.appInsightsConfig.instrumentationKey,
distributedTracingMode: DistributedTracingModes.W3C,
disableCorrelationHeaders: false,
enableDebug: false,
enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableAutoRouteTracking: true,
autoTrackPageVisitTime: true,
enableAjaxErrorStatusText: true
}
});
Setting distributedTracingMode: DistributedTracingModes.W3C would enable the W3C TraceContext based distributed tracing. In current scenario, it looks like the traceID is not getting refreshed for newer operation causing every operation to be displayed in a single transaction.
You could manually refresh the Operation ID, by calling appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId().
Manually triggering a PageView event will also reset the Operation ID, but with SPA, only one page view event is generated. Therefore, I would suggest placing the setting the traceID using generateW3CId() method in code as appropriate. For more details, refer to the following