javascript – Application Insights不会跟踪Angular应用中未处理的浏览器异常

我遇到了以前关闭/修复的Microsoft Application Insights SDK for JavaScript的问题： https://github.com/Microsoft/ApplicationInsights-JS/issues/282

我使用Angular CLI创建了一个全新的Angular应用程序.然后我在this article之后做了这些修改.

添加了监控服务：

import {Injectable} from '@angular/core';
import {AppInsights} from 'applicationinsights-js';

@Injectable()
export class MonitoringService {
  private config: Microsoft.ApplicationInsights.IConfig = {
    instrumentationKey: 'KEY_GOES_HERE',enableDebug: true,verboseLogging: true
  };

  constructor() {
    if (!AppInsights.config) {
      AppInsights.downloadAndSetup(this.config);
    }
  }

  logPageView(name?: string,url?: string,properties?: any,measurements?: any,duration?: number) {
    AppInsights.trackPageView(name,url,properties,measurements,duration);
  }

  logEvent(name: string,measurements?: any) {
    AppInsights.trackEvent(name,measurements);
  }

  trackException(exception: Error) {
    AppInsights.trackException(exception);
  }
}

将它添加到我的app.component.ts：

import {Component,OnInit} from '@angular/core';
import {MonitoringService} from './monitoring.service';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],providers: [MonitoringService]
})
export class AppComponent implements OnInit {
  title = 'app works!';

  constructor(private monitoringService: MonitoringService) { }

  ngOnInit() {
      this.monitoringService.logPageView();
  }

  throwAnException() {
      this.monitoringService.trackException(new Error('manually track exception'));
      throw 'this should appear in app insights'; // but it doesn't
  }
}

在我的app.component.html中制作了一个简单的按钮来抛出异常：

<h1>
  {{title}}
</h1>
<div (click)="throwAnException()">Click to throw an exception</div>

记录页面视图的工作方式,以及通过显式调用trackException来跟踪异常.通过阅读文档和各种文章,我的印象是未捕获的异常将始终自动发送到Application Insights.但是,我没有看到任何这些出现在门户网站中.

我在这里可以缺少什么？

使用这些版本：

applicationinsights-js: 1.0.11
@types/applicationinsights-js: 1.0.4

解决方法

我不认为AppInsights对Angular有任何了解,反之亦然,Angular不了解应用程序见解,因此您可能需要使用自定义ErrorHandler自行添加.看看 ErrorHandler官方文档.如果你把this.monitoringService.trackException调用放在handleError中那么它应该可以正常工作.