Error 객체를 상속받은 객체

나는 지금 HTTP Error를 Error를 상속받은 객체로 관리하고 있는데

export class HttpError extends Error {
  status: number;
  errors?: Record<string, string>;

  constructor(
    status: number,
    message: string,
    errors?: Record<string, string>
  ) {
    super(message);
    this.status = status;
    this.name = "HttpError";
    this.errors = errors;
  }
}

 

서버에서 받아오는 error 메시지와 각 속성들을 확인하기 위해 

if (!response.ok) {
      const errorObj = new HttpError(
        response.status,
        `HTTP 오류! 상태: ${response.status} 메시지: ${data.message}`,
        data.errors
      );
      console.log(errorObj);
      throw errorObj;
    }

console에 출력하는데 자꾸 

HttpError: HTTP 오류! 상태: 422 메시지: Adding the event failed due to validation errors.
    at request (apiClient.ts:37:24)
    at async addNewEvent (eventService.ts:29:22)
    at async action (newEvent.tsx:18:5)
    at async react-router-dom.js?v=db8409c2:3023:19
    at async callLoaderOrAction (react-router-dom.js?v=db8409c2:3082:16)
    at async Promise.all (index 0)
    at async defaultDataStrategy (react-router-dom.js?v=db8409c2:2966:17)
    at async callDataStrategyImpl (react-router-dom.js?v=db8409c2:2990:17)
    at async callDataStrategy (react-router-dom.js?v=db8409c2:2189:17)

이런 문자열로 출력되는 것이다

난 분명 객체로 만들어서 콘솔에 내보내는데 문자열로 출력되니깐 한참을 해메였다

gpt도 첨에 이해를 못해서 이상한 답변을 줘 한참을 헤메이다

드디어 이해해서 답변을 받았다

 

답변: 

이런 현상이 발생하는 이유는 Error 객체(그리고 HttpError와 같은 Error를 상속받는 객체)가 콘솔에 출력될 때 기본적으로 문자열로 변환되기 때문입니다. 이 문자열 표현에는 오류 메시지와 스택 트레이스만 포함됩니다.

 

참 황당했지만

덕분에 에러 관리에 대해 더 이해하게 되었다