Question

今天，我决定对Angular应用程序进行一些集中式错误报告。我在MichaelKarén（https://medium.com/angular-in-depth/expecting-the-unexpected-best-practices-for-error-handling-in-angular-21c3662ef9e4）的《 Medium》上写了一篇很棒的文章，解释了如何处理客户端和服务器端问题并记录它们。

在我的示例项目中，我有一个非常简单的拦截器：

export class HttpInterceptor implements NgHttpInterceptor {
  constructor(
    private auth : AuthService
  ) { }
  intercept(request : HttpRequest<any>, next : HttpHandler) : Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(1),
        catchError((error : HttpErrorResponse) => {
          return throwError(error);
        })
      );
  }
}

非常简单的ErrorHandler：

@Injectable()
export class AppErrorHandler implements ErrorHandler {
  constructor(
    private readonly injector : Injector
  ) { }
  handleError(error : Error | HttpErrorResponse) {
    /** injectables */
    const errorService = this.injector.get(ErrorService);
    const loggingService = this.injector.get(LoggingService);
    /** initialize empty variables */
    let message : string;
    let stackTrace : string;
    if (error instanceof HttpErrorResponse) {
      console.log('server');
    } else {
      console.log('client');
    }
  }
}

是的，到目前为止，它并不是真正的日志记录，但这不是问题。但是，我注意到的是，当使用Angular的HttpClient时，或者1）使用toPromise()方法而不是订阅，或者2）订阅响应错误时，错误处理程序会说error instanceof HttpErrorResponse是假的。所以..

这将正确记录“服务器”：

this.httpClient.get('foo').subscribe()

这将错误地记录“客户端”：

this.httpClient.get('foo').subscribe(
  data => console.log,
  error => console.error
)

这也会错误地记录“客户端”：

await this.httpClient.get('foo').toPromise()

由于我完全不了解这里到底发生了什么，为什么会出现问题，请有人帮我正确报告HTTP错误吗？我当时正在考虑在HttpInterceptor中记录这些错误，但是当抛出这些错误时，ErrorHandler会将它们再次记录为客户端错误。

我为什么要使用回调 回调的使用主要是因为所有这些调用都在各自的服务中。例如，用户服务从端点获取数据，对数据进行某些处理，然后解析承诺（或完成观察者的操作），

编辑：

我创建了一个StackBlitz示例来说明问题：https://stackblitz.com/edit/angular-ivy-gjtxk2

Answer 1

我已经检查了您的StackBlitz样品。如果您在处理HTTP-Broken 2中的错误时遇到问题，请修改您的代码以捕获错误并将其扔给GlobalHandler-

  httpBroken2() {
    this.httpClient.get(this.randomUrl()).pipe(catchError((errors: HttpErrorResponse) => {
      // anything you want to do (i.e. modify error)
      return throwError(errors);
    })).subscribe(
      (data) => {
        alert(data);
      }
    )
  }

Angular ErrorHandler和HttpErrorResponse

1 个答案: