Problem: Single Page Applications (SPA) generate a new correlationId/guid on path changes only, when logging to something like App Insights, the SPA using a framework like Angular will have a page view with multiple actions that are logged using the same guid.
Initial Hypothesis: You can work out the users journey by using the page view guid and tracing the actions to drill down to the issue. It is far easier to generate a new guid for each action making error tracing simpler/faster for 1st line support. Also performance issues are far easier to replicate and automate reporting on for changes in performance.
SPA/Angular Resolution:
import { Injectable } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class AppinsightsLoggingService {
appInsights: ApplicationInsights;
constructor() {
this.appInsights = new ApplicationInsights({
config: {
instrumentationKey: environment.appInsights.instrumentationKey,
enableRequestHeaderTracking: true,
enableCorsCorrelation: true,
loggingLevelTelemetry: 1,
enableAutoRouteTracking: true // option to log route changes
}
});
this.appInsights.loadAppInsights();
this.appInsights.trackPageView();
}
logPageView(name?: string, url?: string) { // option to call manually
alert(name);
this.appInsights.trackPageView({
name: name,
uri: url
});
}
}
public getTraceId (){
return this.appInsights.context.telemetryTrace.traceID;
}
// Call when needed
Note: Thanks to Pravesh Chourasia for showing me how to do this.
