Угловой перехват ошибок HTTP - PullRequest
Новая
       20

Угловой перехват ошибок HTTP

0 голосов
/ 13 марта 2019

Я хочу перехватывать каждый запрос и ответ об ошибке.

Я уже могу перехватывать запросы и устанавливать токен в заголовках и перехватывать ответы для обработки токена обновления.

ОднакоЯ не могу найти способ перехватить HttpErrorResponse.

Я пробовал 2 метода.Один с явным 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, но это решение не перехватывает его.

enter image description here

Возвращается службой.Нет никаких признаков 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);
            })
        );
}

Затем я попытался с "синтаксисом обратного вызова": 

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

1 Ответ

2 голосов
/ 13 марта 2019

Angular имеет хук для обработки ошибок (https://angular.io/api/core/ErrorHandler).

. Вы можете создать сервис, который реализует угловой 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);
        }
    }
}
...