如何记录客户端 Angular 应用程序中发生的所有可能的控制台错误？

Question

目前，我的 Angular 应用程序包含大量子模块和组件。Angular 应用程序对 html 渲染错误非常敏感。例如，如果我们从 API 获取 NULL 对象并尝试访问其属性，则会部分中断应用程序的呈现。

考虑到应用程序不断增长，处理和测试此类情况非常困难。您知道是否可以创建一个脚本来记录控制台中出现的所有错误？

这是我得到的：

1)一个 http 请求错误句柄来记录来自 API 的损坏请求：

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

2）客户端记录器，但无论出于何种原因，它只记录来自爬虫的错误:)

<script>
  window.onerror = function(m,u,l,c) {
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
      var data = "msg="+encodeURIComponent(m)
        +"&url="+encodeURIComponent(u)
        +"&line="+l
        +"&col="+c
        +"&href="+encodeURIComponent(window.location.href);
      xhr.open("GET", "logger.php?"+data, true);
      xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
      xhr.send();
    }
  };
</script>

获取一个可以简单地从控制台记录所有错误的脚本将非常有用

Answer 1

如果您希望捕获并记录 Angular 应用程序中的所有错误（不仅是 HTTP 性质的错误），我建议您使用Sentry和其他错误跟踪器使用的方式。

Angular 有一个ErrorHandler类，它提供了一个用于集中异常处理的钩子。

所以你的任务是创建你自己的错误处理程序。我通常这样做：

import {ErrorHandler, Injectable} from '@angular/core';
import {LoggerService} from './some/logger.service';

@Injectable()
export class CustomErrorHandlerService extends ErrorHandler {

    constructor(private logger: LoggerService) {
        super();
    }

    handleError(error) {
        // Here you can provide whatever logging you want
        this.logger.logError(error);
        super.handleError(error);
    }
}

下一步是通过依赖注入来使用你的错误处理程序。只需AppModule像这样添加它：

import {CustomErrorHandlerService} from '~/app/_services/custom-error-handler.service';

@NgModule({
    imports: [...],
    declarations: [...],
    providers: [
        ...
        {provide: ErrorHandler, useClass: CustomErrorHandlerService},
    ],
    bootstrap: [AppComponent]
})

就是这样。这种实现的关键特性是该服务处理所有可能的错误，出现在您的应用程序中（就像您在问题中提出的那样），包括 HTTP 错误和其他错误。

如果您有任何其他问题，请留下您的意见。