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
