Angular 拦截http错误

Question

我想拦截每个请求和错误响应。

我已经可以拦截请求并在 headers 中设置令牌，并且我可以拦截响应以处理刷新令牌。

但是我找不到拦截的方法HttpErrorResponse。

我试了两种方法。一个带有明确的 rxjs catchError，另一个带有某种回调：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = this.auth.getToken();
    if (authToken) {
      req = req.clone({ headers: req.headers.set('accesstoken', authToken) });
    }
    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          //handle refresh token
        }
        return event;
      },
      catchError((error: any) => {
        if (error instanceof HttpErrorResponse) {
          console.log(error);
          return Observable.throw(error);
        }
      })));
  }

如果我有一个过期的令牌，每个请求都会抛出一个 HttpErrorResponse，但这个解决方案不会捕获它。

这是服务返回的。没有来自拦截器的 console.log() 的迹象。

服务如下所示：

public getData(): Observable<any> {
    return this.http
        .get<any>(url)
        .pipe(
            map(res => {
                return res;
            }),
            catchError((e): Observable<any> => {
                console.log(e);
                const res: any = {error: e};
                return of(res);
            })
        );
}

然后我尝试 "callback syntax":

return next.handle(req).pipe(
  map((event: HttpEvent<any>) => {
    if (event instanceof HttpResponse) {
      // refresh token
    }
    return event;
  }, (error: any) => {
    if (error instanceof HttpErrorResponse) {
      console.log(error);
    }
  }));

结果同上。控制台中没有任何内容。

我看到有人（https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a）在模块中注册了一个 ErrorHandler，但我还没有尝试过。

如何从我的拦截器捕获 HttpErrorResponse？

编辑：

我试过ErrorHandler方式，还是得不到任何日志。然后我从我的服务中删除了 catchError 并最终记录了一些东西...

我会尝试看看这是否能让拦截器工作...如果我必须删除所有的 catchError 就不好玩了:(

我在这里做了一个可重现的例子：https://stackblitz.com/edit/angular-m2jc9n

Answer 1

Angular 有一个错误处理挂钩 (https://angular.io/api/core/ErrorHandler)。

您可以创建一个实现 angular ErrorHandler 和实现 handleError 方法的服务，您可以在其中记录所有错误。此错误处理程序不仅会记录 HttpErrorResponse，还会记录所有错误，但您可以过滤掉您需要的错误。

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
    private static isHttpErrorResponse(error): error is HttpErrorResponse {
        return error instanceof HttpErrorResponse;
    }

    handleError(error: any): void {
        if (CustomErrorHandler.isHttpErrorResponse(error)) {
            console.log(error);
        }
    }
}

Angular 拦截http错误

Angular intercepting http errors

error-handling

interceptor

typescript

angular