Application Insights tidak melacak pengecualian browser yang tidak tertangani di aplikasi Angular

Saya mengalami masalah dengan Microsoft Application Insights SDK untuk JavaScript yang ditutup/diperbaiki beberapa waktu lalu: https://github.com/Microsoft/ApplicationInsights-JS/issues/282

Saya membuat aplikasi Angular baru menggunakan Angular CLI. Lalu saya membuat perubahan ini, mengikuti artikel ini.

Menambahkan layanan pemantauan:

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

Menambahkannya ke app.component.ts saya:

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

Membuat tombol sederhana untuk melemparkan pengecualian di app.component.html saya:

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

Mencatat tampilan halaman berfungsi, seperti halnya melacak pengecualian dengan memanggil trackException secara eksplisit. Dari membaca dokumentasi dan berbagai artikel, saya mendapat kesan bahwa pengecualian yang tidak tertangkap akan selalu dikirim secara otomatis ke Application Insights. Namun, saya tidak melihat satupun yang muncul di portal.

Apa yang mungkin saya lewatkan di sini?

Menggunakan versi ini:

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

azure javascript angular azure-application-insights
person chinaowl    schedule 22.08.2017    source sumber
comment
sepertinya Anda juga membuka ini sebagai masalah di github kami: github.com/Microsoft /ApplicationInsights-JS/issues/505 saya akan mempostingnya sebagai saran :)   -  person John Gardner    schedule 23.08.2017
comment
Ya, itu aku!   -  person chinaowl    schedule 23.08.2017

Jawaban (2)


arrow_upward
2
arrow_downward

Saya mengalami kesulitan dengan hal yang sama dan berikut adalah hal-hal yang perlu Anda ketahui untuk meretasnya:

Apa yang sedang terjadi?

Angular menangkap semua pengecualian (menelannya!) dan mencatatnya di dalam konsol. Saya belum melihat perilaku ini secara eksplisit diceritakan dalam dokumentasi apa pun, tapi saya sudah mengujinya dalam kode, jadi percayalah. Di sisi lain, hanya pengecualian yang tidak tertangkap yang otomatisdikumpulkan! (lihat di sini). Untuk mengumpulkan pengecualian yang tertangkap (seperti yang sering terjadi saat menggunakan kerangka sudut), Anda harus memanggil trackException() secara eksplisit dalam kode Anda.

Cara mengatasinya:

Kami akan mengimplementasikan layanan (disebut MonitoringService dalam kode di bawah) untuk berkomunikasi dengan wawasan aplikasi Azure. Kemudian kami akan memberi tahu sudut untuk menggunakan layanan ini untuk mencatat pengecualian di Azure ai, alih-alih masuk ke konsol browser, dengan memperluas kelas ErrorHandler.

1) menerapkan MonitoringService:

Kami akan menggunakan layanan bernama MonitoringService untuk berkomunikasi dengan wawasan aplikasi Azure. Terapkan layanan itu seperti ini:

import { Injectable } from "@angular/core";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { environment } from "@env/environment";

@Injectable({
  providedIn: "root",
})
export class MonitoringService {
  private appInsights: ApplicationInsights;
  constructor() {}
  startMonitoring(): void {
    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: environment.appInsights.instrumentationKey,
      },
    });
    this.appInsights.loadAppInsights();
    this.appInsights.trackPageView();
  }  

  logException(exception: Error, severityLevel?: number) {
    this.appInsights.trackException({
      exception: exception,
      severityLevel: severityLevel,
    });
  }
}

startMonitoring() harus dipanggil saat aplikasi dimulai.

2) mulai memantau saat aplikasi dimulai:

Proyek sudut sebagian besar memiliki file app.component.ts yang termasuk dalam modul root dan di-bootstrap/diinisialisasi sebagai komponen pertama. Yang saya maksud dengan istilah saat aplikasi dimulai adalah saat komponen ini diinisialisasi.
Kita akan membuat instance MonitoringService dan memulai tugasnya:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(
    private monitoringService: MonitoringService
  ) {
    this.monitoringService.startMonitoring();
  }
}

3) Catat kesalahan ke dalam wawasan aplikasi, sebelum kesalahan tersebut ditelan oleh kerangka kerja:

Perluas kelas ErrorHandler di proyek Anda. Kelas ini sebenarnya adalah hook untuk penanganan pengecualian terpusat di spa sudut. Gunakan kait ini, untuk mencatat pengecualian sebelum ditelan oleh kerangka kerja:

import { Injectable, ErrorHandler } from '@angular/core';
import { MonitoringService } from './monitoring.service';

@Injectable({
  providedIn: 'root'
})
export class GlobalErrorHandlerService implements ErrorHandler {

  constructor(private monitoringService: MonitoringService) { }
  handleError(error: any): void {
    console.error(error);
    this.monitoringService.logException(error);
  }
}

4) Daftarkan ErrorHandler dengan Angular:

Di AppModule pastikan untuk mendaftarkan Handler ini dengan Angular:

@NgModule({
  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandlerService}]
})
class AppModule {}
person Shahryar Saljoughi    schedule 16.05.2020

arrow_upward
1
arrow_downward

Saya rasa AppInsights tidak memiliki pengetahuan tentang Angular dan sebaliknya, Angular tidak mengetahui tentang wawasan aplikasi jadi Anda mungkin harus menambahkannya sendiri menggunakan ErrorHandler khusus. Lihat dokumentasi resmi ErrorHandler. Jika Anda memasukkan panggilan this.monitoringService.trackException ke handleError di sana, panggilan itu akan berfungsi dengan baik.

person Almund    schedule 13.11.2018
comment
Meskipun demikian, dengan memilah-milah penerapan AppInsights, mereka memiliki fungsi untuk menangkap pengecualian secara global. Saya kira kerangka Angular mungkin melakukan hal yang sama dan menghentikan pengecualian agar tidak dimunculkan ke window.onerror: github.com/Microsoft/ApplicationInsights-JS/blob/ - person Almund; 13.11.2018