Streamlining Microsoft Azure Insights Integration with Angular

Welcome to the third part of our Microsoft Azure Insights Integration documentation series! This series will guide you through various aspects of integrating Azure Insights across different technologies and platforms. Below is an overview of the topics covered in this series:

1. Getting Started with Microsoft Azure Insights Integration

2. A Step-by-Step Guide to Azure Insights Integration with .NET Core API

3. Streamlining Microsoft Azure Insights Integration with Angular (You’re here!)

4. Log Request Payloads Using Custom Events in Microsoft Azure Insights

5. Tracking Response Exceptions via Custom Event Logging in Azure Insights

In this third part, we will focus on streamlining the integration of Azure Insights within Angular applications for front-end monitoring and logging.

This guide explains how to integrate Microsoft Azure Application Insights into an Angular application. By doing so, we can monitor, diagnose, and gather critical insights into the performance and user interactions of the frontend, helping to ensure a smooth and responsive user experience.

Prerequisites

• Angular Application: Frontend built using Angular (minimum version 11 or higher).

• Azure Subscription: Access to Microsoft Azure services.

• Azure Application Insights SDKs: For JavaScript/TypeScript.

• Basic knowledge of Application Insights: Familiarity with logging and telemetry.

Step 1: Set Up Application Insights in Azure

1. Create Application Insights Resource in Azure:

   • Log in to your Azure Portal.

   • Navigate to Application Insights and create a new resource.

   • Provide a name, select the appropriate subscription and resource group, and set your region (choose the region closest to your application's hosting).

   • Once the resource is created, go to the Overview page and copy the Instrumentation Key (this will be needed for both backend and frontend integration).

2. Configure Role-Based Access Control (RBAC):

   • Ensure that the appropriate permissions are granted for accessing the telemetry data. Add necessary users or service accounts with read or contributor access.

Step 2: Install Application Insights JavaScript SDK

Azure Application Insights provides a npm package for integrating with web applications. To install it in your Angular application, follow these steps:

1. Open your Angular application in a terminal.

2. Run the following command to install the Application Insights SDK:

npm install @microsoft/applicationinsights-web

Step 3: Adding New Configurations to app-settings.json

In your src/assets/settings/app-settings.json, add the Instrumentation Key, a feature flag to enable or disable the functionality and log level configuration:

{
  "isAzureInsightsEnabled": false,
  "azureInsightsConnectionString":"ENCRYPTED_INSTRUMENTATION_KEY",
  "azureInsightsLogLevel": 0,
}

This table summarizes the JSON configuration with a simple description for each field.

The azureInsightsConnectionString can be encrypted by navigating to Camms.Risk > Administration > Internal Admin > Cryptography.

Step 4: Configure Environment-Based Settings

To streamline your integration further, you can configure different Instrumentation Keys for different environments (e.g., development, production).

1. In your src/environments/environment.ts file, add the Instrumentation Key:

   export const environment = {
     production: false,
     appInsights: {
         isAzureInsightsEnabled: false,
         connectionString: '',
         logLevel: 3,
     },
   };

2. In the src/environments/environment.prod.ts file, add the production Instrumentation Key:

   export const environment = {
     production: true,
     appInsights: {
         isAzureInsightsEnabled: false,
         connectionString: '',
         logLevel: 3,
     },
   };

Step 5: Mapping app-settings.json Configuration to Environment Variables

Map values from app-settings.json to environment variables to enhance security and flexibility. This allows dynamic configuration without hardcoding sensitive data across different environments.

1. Create and Define an AppSettings Class for Azure Insights Configuration:

   export class AppSettings {
       isAzureInsightsEnabled!: boolean;
       azureInsightsLogLevel!: 0 | 1 | 2 | 3 | 4;
       azureInsightsConnectionString!: string;
   }

2. Loading Application Settings from app-settings.json into Environment Variables using AppConfigurationService:

   import { HttpClient } from "@angular/common/http";
   import { Injectable } from "@angular/core";
   import { environment } from "@environments/environment";
   import { AppConfiguration, AppSettings } from "@models";
   import { Observable, lastValueFrom } from "rxjs";
   import { tap } from "rxjs/operators";
   
   @Injectable({
       providedIn: 'root'
   })
   
   export class AppConfigurationService {
       private readonly APP_SETTING_URL = 'assets/settings/app-settings.json';
   
       constructor(private http: HttpClient) { }
   
       public async loadAppSettings(): Promise<any> {
           return lastValueFrom(this.getAppSettingsFromJson().pipe(tap((configuration: AppSettings) => {
               environment.appInsights.isAzureInsightsEnabled = configuration.isAzureInsightsEnabled
               environment.appInsights.logLevel = configuration.azureInsightsLogLevel
               environment.appInsights.connectionString = configuration.azureInsightsConnectionString          
           })));
       }
   
       private getAppSettingsFromJson(): Observable<AppSettings> {
           return this.http.get<AppSettings>(`${this.APP_SETTING_URL}?v=${new Date().getUTCMilliseconds()}`);
       }
   }

3. Initializing Application Configuration on Startup using APP_INITIALIZER with AppConfigurationService in Angular's AppModule

   import { APP_INITIALIZER, NgModule } from '@angular/core';
   import { AppConfigurationService } from '@services';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [],
     imports: [],
     providers: [
       {
         provide: APP_INITIALIZER,
         useFactory: (configService: AppConfigurationService) => () => configService.loadAppSettings(),
         deps: [AppConfigurationService],
         multi: true
       },
     ],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }

Step 6: Configure Application Insights in Angular

1. Open your Angular project in an editor.

2. Navigate to the src/app/services/logging folder, and open or create an Application Insights Service (for example, app-insights.service.ts).

3. Import and configure Application Insights:

   import { Injectable } from '@angular/core';
   import { environment } from '@environments/environment';
   import { ApplicationInsights, ITelemetryItem } from '@microsoft/applicationinsights-web';
   import { AppConfigurationService } from '@services/app-configuration.service';
   import { CammsCryptoService } from '@services/camms-crypto.service';
   
   @Injectable({
     providedIn: 'root',
   })
   export class AppInsightsService {
     appInsights: ApplicationInsights = {} as ApplicationInsights;
   
     constructor(private appConfigurationService: AppConfigurationService) {
       this.loadAzureInsightConfig();
     }
     
     private loadAzureInsightConfig() {
       this.appConfigurationService.loadAppSettings().then(() => {
         if (environment.appInsights.isAzureInsightsEnabled) {
           this.appInsights = new ApplicationInsights({
             config: {
               enableCorsCorrelation: true,
               enableAutoRouteTracking: true,
               connectionString: CammsCryptoService.getDecryptedKeyValue(environment.appInsights.connectionString),
               loggingLevelConsole: environment.appInsights.logLevel,
               loggingLevelTelemetry: environment.appInsights.logLevel,
             }
           });
   
           this.appInsights.loadAppInsights();
           this.loadCustomTelemetryProperties();
         }
       });
     }
     
     private loadCustomTelemetryProperties() {
       this.appInsights.addTelemetryInitializer((envelope: ITelemetryItem) => {
         var item = envelope.baseData;
         if (item) {
           item["properties"] = item["properties"] || {};
           item["properties"]["ApplicationPlatform"] = "Web";
           item["properties"]["ApplicationName"] = "APPLICATION_NAME";
         }
       });
     }
   
     logPageView(name?: string, url?: string) {
       this.appInsights.trackPageView({ name: name, uri: url });
     }
   
     logEvent(name: string, properties?: { [key: string]: any }) {
       this.appInsights.trackEvent({ name: name }, properties);
     }
   
     logMetric(name: string, average: number, properties?: { [key: string]: any }) {
       this.appInsights.trackMetric({ name: name, average: average }, properties);
     }
   
     logException(exception: Error, severityLevel?: number) {
       this.appInsights.trackException({ exception: exception, severityLevel: severityLevel });
     }
   
     logTrace(message: string, properties?: { [key: string]: any }) {
       this.appInsights.trackTrace({ message: message }, properties);
     }
   }

Step 7: Integrate Application Insights into Angular Components

Once the Application Insights service is configured, it can be integrated into any Angular component to track telemetry data, such as page views, exceptions, and custom events.

1. Open the Component File:

   • Open the relevant component where telemetry data needs to be tracked (for example, app.component.ts or any other component).

2. Inject the AppInsightsService:

   • In the component’s TypeScript file, import the AppInsightsService and inject it through the constructor.
     

import { Component, OnInit } from '@angular/core';
import { AppInsightsService } from '@services/app-insights.service';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.css'],
})
export class Component implements OnInit {
  constructor(private appInsightsService: AppInsightsService) {}

  ngOnInit() {
    this.appInsightsService.logPageView('ComponentPage');
  }

  handleError(error: Error) {
    this.appInsightsService.logException(error);
  }

  trackUserAction() {
    this.appInsightsService.logEvent('UserAction', { action: 'ClickedButton' });
  }
}

1. Create a Custom Error Handler

2. Modify the App Module to Use the Custom Error Handler

3. Test the Integration

Step 7: Monitor Telemetry Data in Azure

Once your application is live and users begin interacting with it, you can monitor telemetry data in the Azure portal.

1. Go to your Application Insights resource in Azure.

2. Navigate to sections like Live Metrics, Failures, Performance, and Custom Events to see real-time data and insights.
   

   

3. Use these insights to identify performance bottlenecks, errors, and user behavior, and make informed improvements to your application.
   

   

To view frontend application insights data, please ensure that the Browser toggle is selected instead of Server. This will enable visibility of telemetry related to client-side activities such as user interactions, page views, and JavaScript errors.

Conclusion

In this guide, we've covered the process of integrating Microsoft Azure Application Insights with an Angular application. By implementing this integration, you can monitor key metrics such as page views, custom events, and exceptions, providing valuable insights into your application's frontend performance and user behavior. Additionally, by configuring the default error handler, all uncaught exceptions are automatically logged, simplifying troubleshooting and enhancing the overall health of the application. This setup ensures proactive monitoring and allows for data-driven improvements in your Angular application.