如何在Angular 16中配置Azure AppInsights?

06odsfpq  于 2023-08-07  发布在  Angular
关注(0)|答案(1)|浏览(125)

我已经按照下面的文章在angular 16应用程序中实现了appinsights。
https://devblogs.microsoft.com/premier-developer/angular-how-to-add-application-insights-to-an-angular-spa/
在appInsights服务类中,我有下面的代码。

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { environment } from 'src/environment';

@Injectable({
  providedIn: 'root'
})
export class AppinsightsService {

  instance: ApplicationInsights;

  constructor() {
     
    this.instance = new ApplicationInsights({ config: {
      instrumentationKey: environment.appInsights.instrumentationKey,
    //  enableCorsCorrelation: true,
      enableAutoRouteTracking: true
    } });
     
    this.instance.loadAppInsights();
    this.instance.trackPageView();
     
  }

字符串
ts文件具有以下代码

export const environment = {
    production: false,
    baseApiUrl: 'http://localhost:5257/api',
    appInsights: {
      instrumentationKey: 'xxx-xxx-xxx-xxxxx-xxx-xx'
    }
  };


在app组件的构造函数中添加了appinsights服务依赖,如下所示

constructor(private appInsightsService: AppinsightsService) {

}


不知道遗漏了什么,但不知何故,appinsights没有记录任何内容。
我错过什么了吗?

bgibtngc

bgibtngc1#

我能够从Angular 16 App将跟踪和请求记录到Application Insights。

  • 我的Angular版本:*

x1c 0d1x的数据
沿着你给的文档,我还关注了Ranjit Saini的博客。
感谢@Ranjit Saini的步骤。

  • App Insights跟踪:*


  • 性能:*



不知道遗漏了什么,但不知何故,appinsights没有记录任何内容。

  • 不要从environment.ts文件中获取Instrumentation Key,而是尝试在logging.service.ts文件中设置Instrumentation Key。
  • 如果您仍然面临问题,请将应用程序部署到Azure,启用Application Insights并检查日志。

请参阅此链接了解更多详细信息。

相关问题