JavaScript Error 객체와 Axios Error 객체 정리

들어가며

프론트엔드에서 에러 처리를 하다 보면
JavaScript 기본 Error와 Axios에서 발생하는 Error를 구분하지 못해
헷갈리는 경우가 많다.

이 글에서는 두 에러 객체의 차이와 구조를 정확히 정리하고,
서버에서 내려주는 에러 응답이 Axios 에러 객체의 어디에 담기는지까지 설명한다.

1. JavaScript 기본 Error 객체

JavaScript에서 에러는 Error 객체를 기준으로 동작한다.

throw new Error('에러 발생');

//에러 객체 구조
interface Error {
  name: string;
  message: string;
  stack?: string;
}

특징

• 코드 실행 중 문제를 표현

• HTTP, 서버, 네트워크 개념 없음

• 브라우저 / 런타임 내부 오류 표현용

try {
  JSON.parse('{ invalid json }');
} catch (error) {
  console.log(error.message);
}

👉 이 에러는 서버와 아무 관련이 없다

2. Axios Error 객체 (AxiosError)

Axios는 요청이 실패했을 때
기본 Error를 확장한 Axios 전용 에러 객체를 만든다.

즉,

• instanceof Error === true

• 거기에 HTTP 요청/응답 정보가 추가됨

interface AxiosError<T = any> extends Error {
  config: AxiosRequestConfig;
  request?: any;
  response?: AxiosResponse<T>;
  code?: string;
  isAxiosError: boolean;
}

3. 서버 에러 응답은 어디에 담길까?

서버에서 아래와 같은 응답을 보낸다고 가정하자.

{
  "success": false,
  "status": "Invalid Value",
  "code": 400,
  "detailCode": 40001,
  "message": "요청 값이 올바르지 않습니다."
}

그리고 HTTP 상태 코드가 400이라면,

👉 이 응답은 AxiosError.response.data에 그대로 담긴다.

4. 실제 AxiosError 구조 예시

error = {
  name: 'AxiosError',
  message: 'Request failed with status code 400',
  isAxiosError: true,

  response: {
    status: 400,
    statusText: 'Bad Request',
    data: {
      success: false,
      status: 'Invalid Value',
      code: 400,
      detailCode: 40001,
      message: '요청 값이 올바르지 않습니다.'
    },
    headers: {},
    config: {}
  },

  config: {...},
  request: XMLHttpRequest
}

Axios 성공 응답(response) 객체 정리

Axios는 HTTP 요청이 성공(2xx) 했을 때
에러 객체가 아니라 응답(Response) 객체를 반환한다.

이 글에서는 Axios가 반환하는 성공 응답 객체의 구조와
서버에서 내려주는 실제 데이터가 어디에 담기는지를 정확히 정리한다.

1. Axios에서 말하는 “성공”이란?

Axios 기준에서 성공이란:

• HTTP 상태 코드가 2xx

  • 200 OK

  • 201 Created

  • 204 No Content

👉 이 경우 then()으로 흐름이 이어진다.

axios.get('/api/example').then((response) => {
  // 성공
});

2. Axios 성공 응답 객체 구조

interface AxiosResponse<T = any> {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

3. 각 필드의 의미

4. 서버 성공 응답 예시

서버에서 아래와 같은 JSON을 내려준다고 가정하자.

{
  "success": true,
  "status": "OK",
  "code": 200,
  "detailCode": 20000,
  "results": [],
}

response = {
  data: {
      "success": true,
      "status": "OK",
      "code": 200,
      "detailCode": 20000,
      "results": [],
    },
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {}
}