LeeHyoGeun

나는 지금 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를 상속받는 객체)가 콘솔에 출력될 때 기본적으로 문자열로 변환되기 때문입니다. 이 문자열 표현에는 오류 메시지와 스택 트레이스만 포함됩니다.

참 황당했지만

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

react, typescript 프로젝트에

airbnb룰을 적용했는데

import App from './App';

와 같은 형식으로 import를 했을 때 

eslint import/extensions error가 나왔다.

단순한 해결 방법으로는 뒤에 확장자를 붙여 App.tsx로 import 하는 것인데 너무 귀찮아진다.

검색해 봤을 때 

https://www.npmjs.com/package/eslint-config-airbnb-typescript?activeTab=readme

에서 해당하는 과정을 따라야 한다.

기본 airbnb룰은 typescript를 지원 안하나보다.