Adding Application Insights for the SPA

src/Web/WebSPA/AppSettings.cs

@@ -5,11 +5,10 @@
         public string IdentityUrl { get; set; }
         public string BasketUrl { get; set; }
         public string MarketingUrl { get; set; }
-
         public string PurchaseUrl { get; set; }
         public string SignalrHubUrl { get; set; }
-
         public string ActivateCampaignDetailFunction { get; set; }
         public bool UseCustomizationData { get; set; }
+        public string InstrumentationKey { get; set; }
     }
 }

src/Web/WebSPA/Client/modules/app.component.ts

@@ -6,6 +6,7 @@ import { SecurityService } from './shared/services/security.service';
 import { ConfigurationService } from './shared/services/configuration.service';
 import { SignalrService } from './shared/services/signalr.service';
 import { ToastrService } from 'ngx-toastr';
+import { ApplicationInsightsService } from './shared/services/appinsights.service'
 
 /*
  * App Component
@@ -25,6 +26,7 @@ export class AppComponent implements OnInit {
         private configurationService: ConfigurationService,
         private signalrService: SignalrService,
         private toastr: ToastrService,
+        private appInsights: ApplicationInsightsService,
         vcr: ViewContainerRef
     ) {
         // TODO: Set Taster Root (Overlay) container
@@ -38,7 +40,13 @@ export class AppComponent implements OnInit {
 
         //Get configuration from server environment variables:
         console.log('configuration');
-        this.configurationService.load();        
+        this.configurationService.load();
+       
+        console.log('appInsights');
+        this.configurationService.settingsLoaded$.subscribe(data => {
+            this.appInsights.load();
+        })
+        
     }
 
     public setTitle(newTitle: string) {

src/Web/WebSPA/Client/modules/shared/models/configuration.model.ts

@@ -3,5 +3,6 @@ export interface IConfiguration {
     marketingUrl: string,
     purchaseUrl: string,
     signalrHubUrl: string,
-    activateCampaignDetailFunction: boolean
+    activateCampaignDetailFunction: boolean,
+    instrumentationKey: string
 }

src/Web/WebSPA/Client/modules/shared/services/appinsights.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import * as applicationinsightsWeb from '@microsoft/applicationinsights-web';
+import { StorageService } from './storage.service';
+import { Router, NavigationEnd, NavigationStart } from '@angular/router';
+import { filter, isEmpty } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ApplicationInsightsService {
+    private appInsights: applicationinsightsWeb.ApplicationInsights;
+
+    constructor(private router: Router, private storageService: StorageService) {
+       
+    }
+    load() {
+        var aiKey = this.storageService.retrieve('instrumentationKey');
+        this.appInsights = new applicationinsightsWeb.ApplicationInsights({
+            config: {
+                instrumentationKey: aiKey,
+                enableAutoRouteTracking: true,
+                autoTrackPageVisitTime: true
+            }
+        });
+
+        this.appInsights.loadAppInsights();
+        this.loadCustomTelemetryProperties();
+        this.createRouterSubscription();
+    }
+    logTrace(message: string, properties?: { [key: string]: any }) {
+        this.appInsights.trackTrace({ message: message }, properties);
+    }
+    logMetric(name: string, average: number, properties?: { [key: string]: any }) {
+        this.appInsights.trackMetric({ name: name, average: average }, properties);
+    }
+    setUserId(userId: string) {
+        this.appInsights.setAuthenticatedUserContext(userId);
+    }
+    clearUserId() {
+        this.appInsights.clearAuthenticatedUserContext();
+    }
+    logPageView(name?: string, uri?: string, workstation?: string) {
+        let MyPageView: applicationinsightsWeb.IPageViewTelemetry = { name: name, uri: uri, properties: { ['workstation']: workstation } }
+        this.appInsights.trackPageView(MyPageView);
+    }
+    logException(error: Error) {
+        let exception: applicationinsightsWeb.IExceptionTelemetry = {
+            exception: error
+        };
+        this.appInsights.trackException(exception);
+    }
+
+    private loadCustomTelemetryProperties() {
+        this.appInsights.addTelemetryInitializer(envelope => {
+            var item = envelope.baseData;
+            item.properties = item.properties || {};
+            if (window.performance) { item.properties["Perf"] = window.performance; }
+            item.properties["ApplicationPlatform"] = "webSPA";
+            item.properties["ApplicationName"] = "eShop";
+            if (item.url === 'socket.io') { return false; }
+        }
+        );
+    }
+
+    private createRouterSubscription() {
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
+            //this.appInsights.stopTrackPage(event.url);
+            //this.logPageView(null, event.url);
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe((event: NavigationStart) => {
+            //this.appInsights.startTrackPage(event.url);
+        });
+    }
+}

src/Web/WebSPA/Client/modules/shared/services/configuration.service.ts

@@ -27,6 +27,7 @@ export class ConfigurationService {
             this.storageService.store('purchaseUrl', this.serverSettings.purchaseUrl);
             this.storageService.store('signalrHubUrl', this.serverSettings.signalrHubUrl);
             this.storageService.store('activateCampaignDetailFunction', this.serverSettings.activateCampaignDetailFunction);
+            this.storageService.store('instrumentationKey', this.serverSettings.instrumentationKey);
             this.isReady = true;
             this.settingsLoadedSource.next();
         });

src/Web/WebSPA/Client/modules/shared/shared.module.ts

@@ -12,6 +12,7 @@ import { SecurityService } from './services/security.service';
 import { ConfigurationService } from './services/configuration.service';
 import { StorageService } from './services/storage.service';
 import { SignalrService } from './services/signalr.service';
+import { ApplicationInsightsService } from './services/appinsights.service'
 
 // Components:
 import { Pager } from './components/pager/pager';
@@ -67,7 +68,8 @@ export class SharedModule {
                 SecurityService, 
                 ConfigurationService, 
                 StorageService,
-                SignalrService
+                SignalrService,
+                ApplicationInsightsService
             ]
         };
     }

src/Web/WebSPA/Server/Controllers/HomeController.cs

@@ -4,6 +4,7 @@ using eShopOnContainers.WebSPA;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
+using System;
 
 namespace eShopConContainers.WebSPA.Server.Controllers
 {
@@ -19,6 +20,7 @@ namespace eShopConContainers.WebSPA.Server.Controllers
         }
         public IActionResult Configuration()
         {
+            _settings.Value.InstrumentationKey = Environment.GetEnvironmentVariable("ApplicationInsights__InstrumentationKey");
             return Json(_settings.Value);
         }
     }

src/Web/WebSPA/package.json

@@ -36,6 +36,7 @@
     "@angular/platform-browser-dynamic": "8.2.14",
     "@angular/platform-server": "8.2.14",
     "@angular/router": "8.2.14",
+    "@microsoft/applicationinsights-web": "^2.5.11",
     "@microsoft/signalr": "3.0.1",
     "@ng-bootstrap/ng-bootstrap": "5.2.1",
     "@popperjs/core": "2.0.0",