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

Question

我遇到了 Microsoft Application Insights SDK for JavaScript 的问题，该问题前一段时间已关闭/已修复：https : //github.com/Microsoft/ApplicationInsights-JS/issues/282

我使用 Angular CLI 创建了一个全新的 Angular 应用程序。然后我按照这篇文章进行了这些更改。

添加了监控服务：

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, properties?: any, measurements?: any) {
    AppInsights.trackEvent(name, properties, 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
  }
}

制作了一个简单的按钮，用于在 my 中抛出异常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

Answer 1

我认为 AppInsights 对 Angular 没有任何了解，相反，Angular 不了解应用程序洞察，因此您可能必须使用自定义 ErrorHandler 自己添加它。查看ErrorHandler官方文档。如果你把this.monitoringService.trackException电话放在那里，handleError它应该可以正常工作。