2/09/2024

404 페이지

발단

OAuth 2.0 로그인을 적용을 위해서 정적 파일과 동적 파일을 분리하고 나니 문제가 발생했다. 이전에는 HTML 파일 혹은 존재하지 않는 API 경로를 입력하면 자동으로 '/' 페이지로 리다이렉션 되는데 HTTP 상태코드, 경로, 메시지를 담은 오류 메시지가 그냥 출력되었다. 사용자의 관점에서 이러한 정보는 당연히 필요도 없을 뿐더러 페이지가 아니기에 더욱더 불편하다. 이를 해결하기 위해 404 페이지를 생성하는 과정에서 마주친 여러 문제에 대해서 적어본다~


필터

404 페이지의 이름에서 알 수 있듯이 HTTP 상태코드 404에 해당하는 예외를 다룬다. 따라서, 바로 필터가 떠오른다! 검색을 통해서 필터와 HTML 페이지를 만들었는데 여기서 경로 때문에 고생을 좀 했다. HTML 파일을 담고 있는 public 디렉터리의 위치가 컴파일 전후에 따라 다르기 때문이다. 약간 더 자세하게 말하면 필터가 존재하는 디렉터리의 경로는 컴파일 여부와 관계없이 src/filters 이지만 public 디렉터리는 컴파일 전은 src/public 이지만 컴파일 후는 dist/public이다! 이러한 차이 때문에 시간을 좀 날렸다~ 그리고 루트 모듈인 AppModule에서 전역으로 필터를 설정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// not-found-exception.filter.ts
// HTTP 404 페이지 필터.
@Catch(NotFoundException)
export class NotFoundExceptionFilter implements ExceptionFilter {
  catch(exception: NotFoundException, host: ArgumentsHost) {
    const context = host.switchToHttp();
    const response = context.getResponse<Response>();
  const statusCode = exception.getStatus();
    // root 옵션은 상대적 파일 이름을 위한 루트 디렉터리.
    // 컴파일된 dist 디렉터리를 기준으로 한다.
    const options = {
       root: path.join(__dirname, '..', '..', 'public'),
     };
 
    // 주어진 경로의 파일을 전송한다.
    // root 옵션이 옵션 객체에서 설정되지 않은 경우 경로는 파일에 대한 절대 경로여야 한다.
    response.status(statusCode).sendFile('dne.html', options);
  }
}
 
// app.module.ts
@Module({
  ...
 
  providers: [
    {
      provide: APP_FILTER,
      useClass: AllExceptionFilter,
    },
    {
      provide: APP_FILTER,
      useClass: NotFoundExceptionFilter,
    },
 
  ...
  ],
})
export class AppModule implements NestModule {
  ...
}
cs


HTTP 메서드

필터를 적용하고 try-catch 문을 수정하는데 문제가 발생했다! 사용자 정보수정, 장바구니 수정, 장바구니 삭제와 같은 API는 기본적으로 읽기 연산을 수행하고 원하는 데이터가 없으면 404 상태코드 오류를 던진다. 이것이 문제였다! 컨트롤러의 HTTP 메서드는 GET이 아니지만 서비스나 레포지토리에서 404 상태코드 오류가 발생하면 404 HTML 페이지로 리다이렉션이 발생했다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// carts.service.ts
// 장바구니를 수정하는 컨트롤러에서 사용하는 서비스 메서드.
// 장바구니가 없으면 HTTP 상태코드 404를 예외로 던진다.  
async update(id: number, updateCartDto: UpdateCartDto, user: User) {
  const { quantity } = updateCartDto;
 
  const cart = await this.cartsRepository.findOne({
    where: { id, user: { id: user.id } },
  });
 
  if (!cart) {
    throw new NotFoundException('아이디에 해당하는 장바구니 없음.');
  }
 
  const price = cart.totalPrice / cart.totalQuantity;
  cart.totalQuantity = quantity;
  cart.totalPrice = price * cart.totalQuantity;
 
  return await this.cartsRepository.save(cart);
}
cs

필터에서 이러한 HTTP 메서드에 대해 예외를 적용하기 위해서 요청 객체에서 HTTP 메서드, URL, 오류 메시지를 뽑아내서 예외를 클라이언트에 반환한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// HTTP 404 페이지 필터.
@Catch(NotFoundException)
export class NotFoundExceptionFilter implements ExceptionFilter {
  catch(exception: NotFoundException, host: ArgumentsHost) {
    const context = host.switchToHttp();
    const request = context.getRequest<Request>();
    const response = context.getResponse<Response>();
    const statusCode = exception.getStatus();

    // 전역으로 적용되는 필터라서 다음 HTTP 메서드는 예외를 적용한다.
    const methods = ['POST', 'PUT', 'PATCH', 'DELETE'];
    const method = request.method;

    if (methods.includes(method)) {
      const timestamp = new Date().toISOString();
      const path = request.originalUrl;
      const message = exception.message;
 
      // 반환문이 없으면 응답이 AllExceptionFilter로 전달되어 두 번의 응답이 전송되어 오류가 발생한다.
      // 반환문을 추가해 클라이언트에 응답을 전송한다.
      return response.status(statusCode).json({
        statusCode,
        message,
        timestamp,
        path,
      });
    }

    // root 옵션은 상대적 파일 이름을 위한 루트 디렉터리.
    // 컴파일된 dist 디렉터리를 기준으로 한다.
    const options = {
       root: path.join(__dirname, '..', '..', 'public'),
    };

    // 주어진 경로의 파일을 전송한다.
    // root 옵션이 옵션 객체에서 설정되지 않은 경우 경로는 파일에 대한 절대 경로여야 한다.
    // HTTP 상태코드가 없으면 장바구니 목록 페이지와 주문 목록 페이지에서 오류가 발생한다.
    response.status(statusCode).sendFile('dne.html', options);
  }
}
cs

여기서 반환문이 정말 중요한데 모든 예외를 잡는 AllExceptionFilter가 전역 필터로 설정되어 있기 때문에 반환문이 없으면 두 번의 응답이 전달되는 오류가 발생한다.


테스트

try-catch 문을 수정해서 테스트를 진행했는데 E2E 테스트에서 문제가 발생했다! 상품 상세 API에서 존재하지 않는 아이디에는 HTTP 404 오류를 던지는데 이상하게 HTTP 500 오류가 나왔다. 테스트의 로그를 보니 HTML 페이지의 위치를 못찾고 있었다. 그러다가 생각해보니 ts-jest 패키지가 떠올랐다. 테스트 실행 시 ts-jest 패키지를 사용하는데 이 패키지는 TypeScript 파일을 로드하고 즉시 JavaScript로 변환하고 실행한다. 즉, Jest가 실행 중일 때 TypeScript 파일을 직접 로드할 수 있다. 바로 여기서 문제가 발생했다! TypeScript 파일을 로드하기 때문에 src 디렉터리에 존재하는 HTML 파일의 경로를 표시해야 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// HTTP 404 페이지 필터.
@Catch(NotFoundException)
export class NotFoundExceptionFilter implements ExceptionFilter {
  catch(exception: NotFoundException, host: ArgumentsHost) {
    const context = host.switchToHttp();
    const request = context.getRequest<Request>();
    const response = context.getResponse<Response>();
    const statusCode = exception.getStatus();
 
    // 전역으로 적용되는 필터라서 다음 HTTP 요청 메서드는 예외를 적용한다.
    const methods = ['POST', 'PUT', 'PATCH', 'DELETE'];
    const method = request.method;
 
    if (methods.includes(method)) {
      const timestamp = new Date().toISOString();
      const path = request.originalUrl;
      const message = exception.message;
 
      // 반환문이 없으면 응답이 AllExceptionFilter로 전달되어 두 번의 응답이 전송되어 오류가 발생한다.
      // 반환문을 추가해 클라이언트에 응답을 전송한다.
      return response.status(statusCode).json({
        statusCode,
        message,
        timestamp,
        path,
      });
    }
 
    // 개발/운영 vs. 테스트
    const options = {
      root:
        process.env.NODE_ENV === 'test'
          ? path.join(__dirname, '..', 'public')
          : path.join(__dirname, '..', '..', 'public'),
    };
 
    // 주어진 경로의 파일을 전송한다.
    // root 옵션이 옵션 객체에서 설정되지 않은 경우 경로는 파일에 대한 절대 경로여야 한다.
    // HTTP 상태코드가 없으면 장바구니 목록 페이지와 주문 목록 페이지에서 오류가 발생한다.
    response.status(statusCode).sendFile('dne.html', options);
  }
}
cs

update: 2024.02.09
시간:
라벨: ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)
  • 인프라의 세계
    발단 리팩토링한 애플리케이션을 배포하기 위해서 가장 널리 사용되는 클라우드 서비스인 AWS를 사용하기로 했다. 위코드에서 1차 프로젝트 완료 후 배포를 하기 위해 EC2와 RDS를 사용했는데 처음 사용해서 그런지 인프라가 너무 허접하고 초라했다... ...
  • 캐싱과 Redis
    발단  AWS를 사용해서 애플리케이션을 배포하고 API를 호출했는데 상품 상세 API와 상품 목록 API 응답 속도가 너무 느렸다. 대략 속도가 362ms 정도 나왔는데 사용자 관점에서 보면 정말 불편하고 답답하다고 볼 수 있다. 검색 연산의 속도를 ...
  • Dockerfile
    발단 강의로만 듣다가 실제로 Dockerfile을 작성하는 시간이 왔다! "길을 아는 것과 길을 걷는 것의 차이가 있다."라는 영화 속의 대사처럼 강의보고 주어진 연습문제만 풀다가 실제로 적용하려고 하니 어려움이 굉장히 많았다... ...