angular - HttpInterceptor 未调用全局错误处理程序

Question

我正在执行一个尖峰以调查 Angular 中的全局错误处理程序，我试图模拟客户端和服务器端错误但是当我强制一个 http 错误（假端点）时，错误似乎被输出到控制台而不是被处理使用错误处理程序，这意味着他们甚至不会调用错误处理程序。

错误处理程序

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

  constructor(private injector: Injector) { }

    handleError(error: Error | HttpErrorResponse): void {
      const errorService = this.injector.get(ErrorService);
      const notifier = this.injector.get(NotificationService);

      let message;
      let stackTrace;
      if(error instanceof HttpErrorResponse){
          //Server error
          message = errorService.getServerMessage(error);
          stackTrace = errorService.getServerStack(error);
      }else{
          //Client Error
          message = errorService.getClientMessage(error);
          stackTrace = errorService.getClientStack(error);
      }
      notifier.showError(message);
    }
}

拦截器

export class ServerErrorInterceptorService implements HttpInterceptor {

  constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError((error: HttpErrorResponse) => {
                if (error.error instanceof ErrorEvent) {
                    // client-side error or network error

                } else {
                    // TODO: Clean up following by introducing method
                    if (error.status === 498) {
                        // TODO: Destroy local session; redirect to /login
                    }
                    if (error.status === 401) {
                        // TODO: Permission denied; show toast
                    }
                }
                return throwError(error);
            })
        )
    }
}

模块提供者：

providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
    { provide: HTTP_INTERCEPTORS, useClass: ServerErrorInterceptorService, multi: true}
]

和组件：

    export class ErrorHandlingComponent implements OnInit {

  constructor(private httpClient: HttpClient) { }

  numberArray: number[];

  ngOnInit() {
  }

  causeError(){
       this.numberArray[-1] = 1;
  }

    causeServerSideError() {
        this.httpClient.get("STUB URL").subscribe((x: number[]) => this.numberArray = x)
    }
}

标签： angular