How do I track app service name on Application Insights during PageView? - azure-application-insights

Question

Using Angular SPA and Application Insights. How do I track which App Service served the request in the logs?
"#microsoft/applicationinsights-angularplugin-js": "^3.0.0",
"#microsoft/applicationinsights-web": "^2.8.9",

Answer 1

Check the below steps to create Application Insights for Angular SPA and track the events and PageViews.
In Azure Portal, Create Application Insights.
Followed angular-cli - npm to create Angular Application.
npm install -g #angular/cli
ng new my-appangular
cd my-appangular
ng serve
Thanks #Ranjit Saini for the clear steps to Integrate AppInsights in Angular Application.
Open the Application in VSCode.Navigate to the Application Root Directory and run the below command to Install the applicationinsights dependencies.
npm install applicationinsights-js --save
In package.json,under dependencies, add the ApplicationInsights Package.
"#microsoft/applicationinsights-web":"~2.4.4"
Create a new folder with name environment and add a new file with name environment.ts.
Add the below code in it.
export const environment = {
production:false,
appInsights: {
instrumentationKey: '********'
}
};
Copy the Instrumentation Key from ApplicationInsights and paste it in environment.ts.
Create a new folder with name service.
Add a new file in service folder with name logging.service.ts.
In the newly created logging.service.ts file, Add the below code related to tracking the pageViews, logs and events.
My logging.service.ts file :
import { ApplicationInsights } from '#microsoft/applicationinsights-web';
import { environment } from 'src/environments/environment';
import { Injectable } from '#angular/core';
#Injectable()
export class AppMonitoringService {
appInsights: ApplicationInsights;
constructor() {
this.appInsights = new ApplicationInsights({
config: {
instrumentationKey: '5a81860a-6144-40fc-80ff-25bd3371d3d1',
enableAutoRouteTracking: true
}
});
this.appInsights.loadAppInsights();
}
setUserId(userId: string) {
this.appInsights.setAuthenticatedUserContext(userId);
}
clearUserId() {
this.appInsights.clearAuthenticatedUserContext();
}
logPageView(name?: string, uri?: string) {
this.appInsights.trackPageView({
name: name,
uri: uri
});
}
logPageView1(name: string, average: number, properties?: { [key: string]: any }) {
this.appInsights.trackPageView({
name: "My Page View",
properties: {
ServiceName: "My Service" }});
}
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);
}
}
Integrate AppMonitoringService from logging.service.ts in app.component.ts.
In ``, First add the AppMonitoringService in providers.
providerapp.module.tss: [ AppMonitoringService]
My app.module.ts file:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppMonitoringService } from 'src/service/logging.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [AppMonitoringService],
bootstrap: [AppComponent]
})
export class AppModule { }
Inject the AppMonitoringService in app.component.ts.
My app.component.ts file:
import { Component } from '#angular/core';
import { Injectable } from '#angular/core';
import { ApplicationInsights, IExceptionTelemetry, DistributedTracingModes } from '#microsoft/applicationinsights-web';
import { Router, NavigationEnd } from '#angular/router';
import { filter } from 'rxjs/operators';
import { AppMonitoringService } from 'src/service/logging.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-appangular';
constructor(private azAppInsightService: AppMonitoringService) {
}
}
Now run the application using ng serve.
Check the Application Insights for traces.
Deploy the App to Azure App Service and now check the traces.