javascript - 如何在客户端的 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类(class) which provides a hook for centralized exception handling .

因此，您的任务是创建自己的错误处理程序。我通常这样做:

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

下一步是通过依赖注入(inject)来使用您的错误处理程序。只需将其添加到您的 AppModule像这样:

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

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

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

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