DEV Community

Vincent Jang
Vincent Jang

Posted on

2 2

How to customize HTTP Exception In NestJS

프로젝트가 조금씩 진행되어 질 때 마다, 코드의 양이 많아 질 때마다, 다루는 데이터가 많아 질 때 마다, 서버는 최대한 견고하게 작동해야 하며, 그 응답도 통일성이 있어야 한다고 생각한다.

응답은 물론, 우리의 소망과는 별개로 오류는 어디서든 항상 존재 할 수 있으며, Front-end 에서 응답과 오류를 잘 가공하여 로직을 처리하려면, 서버에서는 항상 통일된 형태의 객체로 응답/오류를 전해주어야 한다.

현재 진행중인 프로젝트에서는 다음과 같은 응답 객체 양식을 지켜주고 있다. 에러가 난다면 다음과 같은 형식으로 내려준다.

{
  "status" : 401, // Http Status Code
  "code" : "UNAUTHORIZED_USER" // string Response code
  "error" : true // is error occurred?
  "message" : "권한이 없습니다." // message for request,
  "data" : // response data, original error object
}
Enter fullscreen mode Exit fullscreen mode

하지만, NestJS의 기능 중에 다음과 같은 기능이 존재한다.

export class SomethingDto {
  @IsNotEmpty()
  field : number
}
Enter fullscreen mode Exit fullscreen mode

를 사용한 Validation과,

throw new UnauthorizedException(object, 'description');
Enter fullscreen mode Exit fullscreen mode

과 같은 NestJS 가 지원하는 HttpException 이다.

위와 같은 기능을 사용하면서 NestJS 가 자동적으로 던지는 응답(에러)객체는 다음과 같다

{
  "statusCode" : HttpStatusCode,
  "message" : string[],
  "error" : string
}
Enter fullscreen mode Exit fullscreen mode

따라서 프로젝트에서 사용하는 형식으로 응답 객체를 바꾸어 주어야 한다.

이때 사용한 것이 예외 처리 레이어를 두는 방식이며, Filter 를 사용한다. 다음은 내가 사용한 방식이다.
피드백이 있다면 언제든 부족한 점을 알려주면 감사드린다.

  • http-exception.filter.ts
@Catch()
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: Error, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const res = ctx.getResponse<Response>();
    const req = ctx.getRequest<Request>();
  }

    if(!(exception instanceof HttpException)) {
      exception = new HttpException(new ResponseDto(~~),     
      HttpStatus.Internal_Server_Error);
    }

    let response = (exception as HttpException).getResponse();

    // 시스템이 자동으로 던진 에러에는 statusCode가 존재함.
    if(response['statusCode']) {
      // your transform response object
    }

    const log = {
      timeStamp: new Date();
      url: req.url;
      response
    };

    Logger.error(long)

    res.status((exception as 
    HttpException).getStatus()).json(response);
}
Enter fullscreen mode Exit fullscreen mode

이렇게 작성한 이후 main.ts 에서 다음과 같이 사용했다.

// 중략

app.useGlobalFilters(new HttpExceptionFilter());
await app.listen(8080);

// 후략
Enter fullscreen mode Exit fullscreen mode

이렇게 했더니 다음과 같이 시스템에서 던진 에러메세지가 잘 변형되어 내려왔다.

Image description

나와 같이 헤메이는 초보자에게 힘이 되었으면 좋겠다.

Reference

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay