如何在 PageView 期间跟踪 Application Insights 上的应用服务名称？

Question

使用 Angular SPA 和 Application Insights。如何在日志中跟踪哪个应用服务为请求提供服务？

"@microsoft/applicationinsights-angularplugin-js": "^3.0.0",
"@microsoft/applicationinsights-web": "^2.8.9",

Answer 1

检查以下步骤为 Angular SPA 创建 Application Insights 并跟踪事件和 PageViews。

在 Azure Portal 中，创建 Application Insights。

跟随angular-cli - npm 创建 Angular 应用程序。

npm install -g @angular/cli
ng new my-appangular
cd my-appangular
ng serve

感谢@Ranjit Saini 在 Angular 应用程序中集成 AppInsights 的明确步骤。

• 打开 VSCode 中的应用程序。导航到应用程序根目录并运行以下命令以安装 applicationinsights 依赖项。

npm install applicationinsights-js --save 

• 在package.json中，在dependencies下，添加ApplicationInsights包。

"@microsoft/applicationinsights-web":"~2.4.4"

• 创建一个名为 environment 的新文件夹并添加一个名为 environment.ts 的新文件。
• 在其中添加以下代码。

export  const  environment = {
    production:false,
    appInsights: {
        instrumentationKey:  '********'
    }
};

• 从ApplicationInsights 复制检测密钥并将其粘贴到environment.ts。

• 创建一个名为service 的新文件夹。
• 在service 文件夹中添加一个名为logging.service.ts 的新文件。
• 在新创建的logging.service.ts文件中，添加以下与跟踪pageViews、logs和events相关的代码。

我的logging.service.ts 文件：

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);
    }
}

• 将 logging.service.ts 中的 AppMonitoringService 整合到 app.component.ts 中。

• 在``中，首先在providers中添加AppMonitoringService。

providerapp.module.tss: [ AppMonitoringService]

我的app.module.ts 文件：

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 { }

• 在app.component.ts中注入AppMonitoringService。

我的app.component.ts 文件：

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) {
  }
}

现在使用ng serve 运行应用程序。

• 检查Application Insights 的痕迹。

• 将应用部署到 Azure 应用服务，现在检查跟踪。