Error에 정보값 집어넣기

• 개발 중, 서버에서 던지는 에러에 특정 정보값을 넣을 필요성이 생겼다.
  • 서버에서 직접 에러 메시지를 던지는 대신, 별도의 에러 코드를 정의하여 사용하는 방식으로 개발을 진행하고 있었는데, 그러다 보니  ‘어떤 필드(값)에서 에러가 나타났는지’에 대한 정보를 포함할 필요성이 생겼다.
• 이를 구현하기 위해 거친 과정을 짤막히 기록한다.

---

구현 방법

  알아보면서 생각해봤는데, 자신의 프로젝트 상황에 따라서 방법이 갈릴 것 같다.

 

1. 내 프로젝트가 ECMA2022 이상을 지원한다.

⇒ 별도의 추가 개발 없이 원래의 Error 클래스를 사용하면 될 것이다. 이는 ECMA2022 부터 Error 클래스에 cause라는 속성이 지원되기 때문이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

Error: cause - JavaScript | MDN

• cause는 에러가 발생한 구체적인 원인을 알려주는 데 사용된다.
  • 여기에는 사람이 알아볼 수 있는 정보를 자유로운 형식으로 담아 넘길 수 있다(즉, 어느 타입의 데이터든 가능하다).

// cause에는 어떤 형식의 데이터든 제공할 수 있다.
throw new Error('Some error happened', { cause: { code: 'Some Error Code', value: 'random value' } });

 

 

2. 내 프로젝트가 ECMA2022 이상을 지원하지 않는다.

⇒ 하는 수 없이 직접 커스텀한다.

  내가 딱 이 케이스라서(그렇다고 프로젝트 전체의 TS버전을 올리기도 애매하고), 결국 기존의 Error 클래스를 확장하는 새로운 클래스를 만들기로 했다.

 

 

CustomError 클래스 만들기

• 이는 기존의 Error 클래스를 대체하여 사용할 수 있도록, Error를 확장하여 구현한다.
• 목표는 위에서 언급한 cause와 같이, 에러의 세부 사항에 대한 정보를 같이 전달하는 것이므로, 이를 표현하는 'detail'이라는 속성을 추가하였다.

class CustomError extends Error {
	detail: any;
	
	constructor(message: string, detail: any) {
		super(message);
		this.detail = detail;
		
		Object.setPrototypeOf(this, CustomError.prototype);
	}
}

 

setOfPrototypeOf를 설정하는 이유는, 우리가 만든 CustomError에 제대로 된 프로토타입 체인을 설정하기 위해서다. 이를 설정하지 않으면, instanceof 를 사용했을 때 제대로 동작하지 않을 가능성이 있다.

 

---

• 커스텀 에러의 구현 목적은 이미 언급했지만, 실은 에러 코드와 에러의 상세 내용의 추가 보다도 앞선 목적이 있었다. 바로 다국어화 적용이었는데, 서버 에러 메시지에도 다국어화를 적용해야하다보니 에러 코드와 번역 키를 매칭 시킬 필요가 있었던 것.
• 다행히 위와 같은 커스텀을 통해 에러 코드를 보낼 수 있게 됨과 동시에, 어떤 부분에서 에러가 나타났는 지도 번역된 문장 내에 전달할 수 있게 되어 원하던 바를 다 구현하는 것이 가능했다.