# JavaScript Error 객체와 Axios Error 객체 정리

### 들어가며

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

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

### 1\. JavaScript 기본 Error 객체

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

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

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

### 특징

* **코드 실행 중 문제**를 표현
    
* HTTP, 서버, 네트워크 개념 없음
    
* 브라우저 / 런타임 내부 오류 표현용
    

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

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

### 2\. Axios Error 객체 (AxiosError)

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

즉,

* `instanceof Error === true`
    
* 거기에 **HTTP 요청/응답 정보가 추가됨**
    

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

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

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

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

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

👉 이 응답은 [**AxiosError.response.data**](http://AxiosError.response.data)에 그대로 담긴다.

### 4\. 실제 AxiosError 구조 예시

```javascript
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()`으로 흐름이 이어진다.

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

### 2\. Axios 성공 응답 객체 구조

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

## 3\. 각 필드의 의미

| 필드 | 의미 |
| --- | --- |
| `data` | **서버에서 내려준 실제 응답 데이터** |
| `status` | HTTP 상태 코드 |
| `statusText` | 상태 메시지 |
| `headers` | 응답 헤더 |
| `config` | 요청 설정 |
| `request` | 실제 요청 객체 |

### 4\. 서버 성공 응답 예시

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

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

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