Angular Interceptor를 사용하여 사용자 정의 응답 헤더 캡처

최근 프로젝트에서 API 서버는 네트워크 요청을 고유하게 식별하는 request-id라는 사용자 지정 응답 헤더를 노출했습니다. 네트워크 요청이 실패한 경우 요청 ID를 사용하여 오류 로그에서 해당 항목을 찾을 수 있습니다. 그러나 일반적인 최종 사용자는 문제를 보고할 때 이 정보를 제공하는 방법을 모릅니다. Angular Interceptor를 사용하여 사용자 지정 응답 헤더를 캡처하는 방법을 알아보겠습니다!

HttpInterceptor

HttpInterceptor 인터페이스는 HTTP 요청과 응답을 가로채서 전달하기 전에 변환하거나 처리하는 수단을 제공합니다.

HttpInterceptor 인터페이스를 구현하는 서비스를 만들어 봅시다.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable, throwError } from 'rxjs';
import { catchError, filter } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request);
  }
}

내 특정 시나리오의 경우 HTTP 응답, 특히 내부 서버 오류(HTTP 상태 코드 500)에만 관심이 있었습니다. 파이프를 추가하고 필터 및 catchError 연산자를 사용합니다.

return next.handle(request).pipe(
  filter(event => event instanceof HttpResponse),
  catchError(error => {
    if(error.status === 500) {
      const requestId = error.headers.get('request-id');
      ...
    }

    return throwError(error);
  })
);

HTTP 응답과 관련된 항목을 필터링한 다음 발생하는 오류를 포착합니다. 오류 상태 500을 확인한 다음 request-id 헤더 값을 캡처합니다.

그런 다음 이 정보를 다른 서비스에 전달하거나 로컬 저장소에 저장할 수 있습니다. 이 정보를 최종 사용자에게 표시하는 루틴을 만들고 문제를 보고할 때 이를 포함할 수 있습니다!

인터셉터 제공

인터셉터를 실제로 사용하려면 인터셉터를 사용하려는 모든 모듈에서 공급자로 정의해야 합니다. 제 특정 사용 사례에서는 전체 애플리케이션에서 오류를 캡처할 수 있도록 앱 모듈에서 제공했습니다.

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { ErrorInterceptor } from '/path/to/interceptor';

@NgModule({
  ..
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ]
  ..
})
export class AppModule {}

여러 인터셉터를 사용할 수 있지만 Angular는 제공한 순서대로 인터셉터를 제공합니다. 예를 들어 인터셉터 A, B, C를 차례로 제공하면 요청은 A > B > C로 흐르고 응답은 C > B > A로 흐릅니다.

https://nightwolf.dev에서 당사 웹사이트를 방문하고 Facebook 및 !