CorrelationId thoughts for improved logging in SPAs

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:

1. import { Injectable } from '@angular/core'; 

2. import { ApplicationInsights } from '@microsoft/applicationinsights-web'; 

3. import { environment } from 'src/environments/environment'; 

4.  

5. @Injectable({ 

6.   providedIn: 'root' 

7. }) 

8. export class AppinsightsLoggingService { 

9.   appInsights: ApplicationInsights; 

10.   constructor() { 

11.     this.appInsights = new ApplicationInsights({ 

12.       config: { 

13.         instrumentationKey: environment.appInsights.instrumentationKey, 

14.         enableRequestHeaderTracking: true, 

15.         enableCorsCorrelation: true, 

16.         loggingLevelTelemetry: 1, 

17.         enableAutoRouteTracking: true // option to log route changes 

18.       } 

19.     }); 

20.     this.appInsights.loadAppInsights(); 

21.     this.appInsights.trackPageView(); 

22.   } 

23.  

24.   logPageView(name?: string, url?: string) { // option to call manually 

25.     alert(name); 

26.     this.appInsights.trackPageView({ 

27.       name: name, 

28.       uri: url 

29.     }); 

30.   } 

47. } 

48. 
    

1.  public  getTraceId (){ 

2.     return this.appInsights.context.telemetryTrace.traceID; 

3.   } 

4. // Call when needed

Note: Thanks to Pravesh Chourasia for showing me how to do this.