[TIL-0517] Axios 에러 vs. 일반 에러

jiny·2025년 6월 5일
TILaxios

캡스톤2

목록 보기
21/22
post-thumbnail

Axios 에러와 일반 에러는 자바스크립트에서 네트워크 요청을 처리할 때 발생하는 에러 유형 중 두 가지이다.
Axios를 사용할 때 각각 어떤 상황에서 발생하는지, 어떤 정보를 가지고 있는지, 어떻게 처리해야 하는지를 이해하는 것이 중요하다.

🌟 일반 에러 (Error)

  • 개념

    • 자바스크립트에서 발생하는 기본 내장 에러 객체이다.
    • 이 객체는 다양한 속성(property)을 가지고 있으며, 일부는 기본적으로 포함되고 일부는 환경(node.js, 브라우저 등)에 따라 다를 수 있다.
    • 기본적으로 모든 에러는 Error 객체를 상속받은 인스턴스이다.
    • 네트워크 요청과는 관계없이, 코드 실행 중 논리 오류나 문법 오류, 또는 수동으로 throw new Error()로 던진 예외일 수 있다.

  • 예시

    try {
  throw new Error("이건 일반 에러야.");
} catch (error) {
  console.log(error instanceof Error); // true
  console.log(error.message); // "이건 일반 에러야."
}

    • 이 코드는 의도적으로 에러를 발생시키고, 그 에러를 catch 블록에서 잡아서 처리하는 구조이다.

    • throw new Error(...)는 자바스크립트에서 일반적인 예외 처리 방식이다.

      🔍 try { ... }

      • try 블록은 예외가 발생할 수 있는 코드를 담는 공간이다.
      • 이 안에서 문제가 생기면 즉시 실행이 중단되고, catch 블록으로 흐름이 넘어간다.

      🔍 throw new Error("이건 일반 에러야.");

      • throw는 예외를 강제로 던지는 키워드이다.
      • new Error("이건 일반 에러야.")는 자바스크립트 내장 클래스 Error의 인스턴스를 생성한다.
        📌 message : "이건 일반 에러야."가 저장됨
        📌 name : 기본값 "Error"
        📌 stack : 에러가 발생한 코드 위치를 나타내는 stack trace가 자동으로 생성됨
      • 이 줄에서 프로그램의 흐름이 즉시 중단되고 catch 블록으로 점프한다.

      🔍 catch (error) { ... }

      • 이 블록은 위 throw로 던져진 에러를 잡아서 처리하는 공간이다.
      • error 변수는 throw된 에러 객체(Error)를 자동으로 받는다.
      • 여기서 error는 Error 클래스의 인스턴스이다.

      🔍 console.log(error instanceof Error);

      • instanceof는 객체가 어떤 클래스의 인스턴스인지 확인하는 연산자이다.
      • 여기서 error는 new Error(...)로 생성됐기 때문에, error instanceof Error는 true가 출력된다.

      🔍 console.log(error.message);

      • error 객체는 message 속성을 갖고 있다.
      • 아까 new Error("이건 일반 에러야.")에서 지정한 "이건 일반 에러야"가 출력된다.

  • 자바스크립트 Error 객체의 주요 속성

    속성타입설명표준 여부
    namestring에러의 이름(타입)으로, 기본값은 "Error"이다.
    TypeError, SyntaxError 등 하위 에러 클래스에서는 다르게 설정된다.    		✅ 표준
    messagestring에러 메시지로, new Error("메시지")와 같이 설정할 수 있다.✅ 표준
    stackstring에러 발생 위치의 스택 추적 정보로, 디버깅에 사용된다.
    (브라우저/Node.js 환경에서 다르게 보일 수 있다.)    		⚠️ 비표준
    (하지만 대부분의 환경에서 제공됨)
    causeanyError의 원인으로, Error 객체를 중첩해서 전달할 때 사용된다.✅ 표준 (ES2022 이후)

🌟 Axios 에러 (AxiosError)

  • 개념

    • Axios가 HTTP 요청을 보내고, 요청이 실패했을 때 던지는 특수한 에러 객체이다.
    • AxiosError는 Error를 상속받은 Axios 전용 에러 클래스이므로, AxiosError instanceof Error === true이다.
    • 즉, Axios는 네트워크 오류를 일반 에러에 비해 더 풍부하게 해석할 수 있도록 구조화된 에러 객체를 제공한다.
    • 이 에러는 상태 코드(status code)가 4xx, 5xx일 때뿐만 아니라, 네트워크 단절, CORS 문제, timeout, 잘못된 URL 등 다양한 네트워크 문제에서 발생한다.

  • 예시

    import axios from "axios";

try {
  await axios.get("https://some.invalid.url");
} catch (error) {
  if (axios.isAxiosError(error)) {
    console.log("Axios 에러입니다!");
    console.log("상태 코드: ", error.response?.status); // HTTP status code
    console.log("요청 정보: ", error.config); // 요청에 대한 정보
  } else {
    console.log("일반 에러입니다!");
  }
}

    🔍 try { ... }

    • try 블록은 예외가 발생할 수 있는 코드를 담는 공간이다.
    • 이 안에서 문제가 생기면 즉시 실행이 중단되고, catch 블록으로 흐름이 넘어간다.

    🔍 await axios.get(...)

    • GET 요청을 보내는데, 여기에 있는 URL은 잘못된 주소이므로 실패하게 된다.
    • Axios는 내부적으로 브라우저 환경에서는 XMLHttpRequest, Node.js 환경에서는 http, https 모듈을 사용하여 네트워크 요청을 보내고, 실패할 경우 AxiosError를 발생시킨다.
    • 이 줄에서 네트워크 요청이 실패하면, 즉시 catch 블록으로 흐름이 넘어간다.

    🔍 catch (error) { ... }

    • catch 블록은 요청이 실패했을 때 실행된다.
    • error는 Axios가 throw한 에러 객체이다.
      • 이 에러는 AxiosError일 수도 있고,
      • 다른 일반 Error일 수도 있다. (예: JSON 파싱 오류, 다른 예외 등)

    🔍 if (axios.isAxiosError(error))

    • axios.isAxiosError(error)는 Axios가 제공하는 타입 가드 함수이다.
    • 이 함수는 전달된 에러가 Axios 내부에서 발생한 네트워크 에러인지를 확인한다.
    • 이 조건이 true이면 if문 내부 블록이 실행된다.

    🔍 console.log("상태 코드: ", error.response?.status);

    • error.response는 서버가 응답한 데이터가 담긴 객체이다. 실패한 경우에도 응답은 온다. (예: 404, 500 등)
    • ?.status는 optional chaining을 사용한 것으로, response가 없으면 undefined를 반환한다.
    • 만약 서버 응답이 전혀 없었던 경우(예: DNS 오류, 네트워크 끊김), error.response는 undefined가 된다.
    • 이 status는 HTTP 상태 코드이다.
      • 404 → Not Found
      • 500 → Server Error
      • 401 → Unauthorized

    🔍 console.log("요청 정보: ", error.config);

    • error.config는 실패했던 Axios 요청의 구체적인 구성 정보이다.
    • 여기에는 다음과 같은 정보가 들어 있다.
      📌 url : 요청한 주소
      📌 method : 요청 방식 (get, post 등)
      📌 headers : 요청 시 보낸 헤더
      📌 params : 쿼리 파라미터
      📌 data : 요청 본문 (POST, PUT 등에서 사용)
    • 디버깅 시 어떤 요청을 보냈는지를 파악하는 데 매우 유용하다.

    🔍 else { console.log("일반 에러입니다."); }

    • axios.isAxiosError(error)가 false일 경우 실행된다.
    • 이 경우는 네트워크 요청 자체가 아닌 다음 오류들을 의미한다.
      • 코드 상의 문법 오류
      • 비동기 함수 내부에서 발생한 다른 throw new Error(...)
      • Axios 내부에서 발생하지 않은 일반 예외
    • Axios 외의 일반적인 자바스크립트 오류 처리를 위한 분기이다.

  • AxiosError 객체의 주요 속성

    속성명타입설명예시
    namestring에러 이름으로, 항상 "AxiosError"이다."AxiosError"
    messagestring에러 메시지로, 실패 이유에 대한 간단한 설명을 제공한다."Request failed with status code 404"
    stackstring에러가 발생한 위치의 스택 트레이스"AxiosError: ...\n at..."
    configAxiosRequestConfig실패한 요청의 구성 정보 (url, method, headers, data 등){ url: "/api/test", method: "get", ... }
    code`stringundefined`에러 코드. 네트워크/타임아웃 관련 식별자
    request`XMLHttpRequestClientRequestundefined`
    response`AxiosResponseundefined`서버의 응답 데이터 (4xx, 5xx 응답 포함)
    isAxiosErrortrueAxios에서 발생한 에러임을 식별하는 플래그true
    causeany (선택적)이 에러의 원인이 된 다른 에러 (ES2022부터 지원)new Error("DB 연결 실패")

  • config : 실패한 요청의 모든 정보가 담겨 있음

    {
  url: "/api/user",
  method: "post",
  headers: { "Content-Type": "application/json" },
  data: { name: "test" },
  timeout: 5000
}

  • response : 서버가 응답을 한 경우에만 존재함

    {
  status: 400,
  statusText: "Bad Request",
  headers: { ... },
  data: {
    message: "입력 값이 잘못되었습니다.",
    errorCode: "INVALID_INPUT"
  },
  config: { ... }, // 요청 정보
}

    ➡️ 여기서 data 안이 백엔드가 보내준 에러 메시지를 포함하는 부분임

  • code : Axios가 붙이는 에러 코드로, 어떤 종류의 네트워크/요청 에러인지 구분하는 데 사용됨

    코드의미
    "ECONNABORTED"요청이 타임아웃으로 중단됨
    "ERR_NETWORK"네트워크 자체 오류
    "ERR_BAD_REQUEST"응답은 왔지만 상태 코드가 400~499
    undefined응답이 없는 일반적인 에러일 경우

  • isAxiosError : Axios 전용 에러임을 판별할 수 있는 유일한 플래그 (true 고정)
    ➡️ axios.isAxiosError(error) 또는 error.isAxiosError === true로 확인 가능함

🌟 일반 에러 vs. Axios 에러

항목일반 에러Axios 에러
정의 위치자바스크립트 내장 Error 클래스Axios 라이브러리 내부에서 정의한 에러 클래스
상속 구조ErrorAxiosError → Error
발생 상황코드 실행 중 논리적 문제, 예외 상황, 수동으로 throw 할 때Axios로 HTTP 요청 중 실패할 때 (네트워크 오류, 응답 오류 등)
구분 방법error instanceof Erroraxios.isAxiosError(error)로 확인
에러 메시지 (message)✅ 포함됨 (예: "Undefined variable")✅ 포함됨 (예: "Request failed with status code 404")
에러 이름 (name)"Error", "TypeError", "ReferenceError" 등"AxiosError"
스택 정보 (stack)✅ 있음✅ 있음
HTTP 응답 (response)❌ 없음✅ 포함됨 (status, headers, data 등)
요청 정보 (config)❌ 없음✅ 포함됨 (요청 URL, method, headers 등)
요청 객체 (request)❌ 없음✅ 포함됨 (XMLHttpRequest 또는 http.ClientRequest)
코드 (code)❌ 보통 없음 (단순 message만 있음)✅ 있음 (ECONNABORTED, ERR_NETWORK 등)
cause 지원 여부ES2022 이상에서 cause 속성 사용 가능ES2022 이상이면 가능 (JS의 Error와 동일하게 동작함)
사용 예throw new Error("계산 불가"), null.toString() 등서버로부터 404 응답 받음, API 호출 실패, CORS 오류 등
실무 처리 방식단순한 오류 로그 출력, 사용자 경고 등HTTP 상태 코드/응답/요청을 기반으로 조건 분기하여 처리

  • 실제 에러 객체 비교 예

    • 일반 에러 구조 예시
      {
  message: "Something went wrong",
  name: "Error",
  stack: "Error: Something went wrong\n   at ..."
}
    • Axios 에러 구조 일부 예시 (console.dir(error))
      {
  message: "Request failed with status code 404",
  name: "AxiosError",
  config: { method: "get", url: "/api/test", ... },
  code: "ERR_BAD_REQUEST",
  response: {
    status: 404,
    data: { message: "Not Found" },
    headers: { ... }
  },
  request: XMLHttpRequest { ... },
  isAxiosError: true
}

  • 핵심 포인트

    • Axios 에러는 네트워크 요청에 특화된 에러이며, config, response, request, code 등 풍부한 정보가 들어 있음
    • 일반 에러는 대부분 message, name, stack만 존재하며, Axios와 무관한 로직 오류일 가능성이 높음
    • 따라서 실무에서는 axios.isAxiosError()로 반드시 구분하여, 네트워크 문제인지 일반 예외인지 분기 처리하는 것이 중요함

🌟 실제 Axios 에러 분석하기

위 사진은 AxiosError 객체가 발생했을 때의 실제 출력이며, HTTP 상태 코드 500(서버 내부 오류)에 대한 응답이다.

  • 최상단 정보

    AxiosError: Request failed with status code 500
 name: "AxiosError"
 message: "Request failed with status code 500"
 code: "ERR_BAD_RESPONSE"
    항목설명
    name이 에러는 Axios에서 발생했음을 나타냄 ("AxiosError")
    messageAxios가 자동으로 생성한 에러 메시지로, 상태 코드 기반으로 설명됨
    codeAxios 자체에서 붙이는 식별자
    "ERR_BAD_RESPONSE": 서버가 응답은 했지만 성공하지 못했다는 의미 (500번대 오류)

  • config

    config: {
  adapter: [...],
  transformRequest: [...],
  transformResponse: [...],
  timeout: 0,
  ...
}
    • 이 요청을 보낼 때 사용된 Axios 설정
    • url, method, headers, timeout 등의 정보가 포함되어 있음
    • 디버깅 시 요청이 어떤 방식으로 구성되었는지 확인할 수 있음

  • request

    request: XMLHttpRequest { ... }
    • 브라우저에서 사용된 실제 네트워크 요청 객체
    • XMLHttpRequest는 Axios가 브라우저에서 사용하는 내부 API임
    • readyState: 4, timeout: 0, withCredentials: false 등 현재 요청 상태 정보도 포함되어 있음

  • response

    response: {
  status: 500,
  statusText: "",
  config: {...},
  headers: {
    cache-control: "no-store, max-age=0, must-revalidate",
    content-length: "150",
    content-type: "application/json",
    pragma: "no-cache"
  },
  data: {
    error: "Internal Server Error",
    path: "/api/account/basket/read",
    requestId: "cd093566-90",
    status: 500,
    timestamp: "2025-06-05T05:12:46.084+00:00"
  }
}

    • 세부 항목 설명

      항목설명
      statusHTTP 상태 코드. 500은 서버 내부 오류 (Internal Server Error)
      statusText상태 메시지. 현재는 빈 문자열(서버가 제공하지 않음)
      headers응답 헤더. 캐시 방지 및 JSON 콘텐츠 유형 명시
      data⭐백엔드가 응답한 실제 에러 메시지 JSON⭐
      config이 응답에 대한 요청 정보 (요청 시 설정된 값들과 동일)

    • data 안의 구조

      {
  error: "Internal Server Error",
  path: "/api/account/basket/read",
  requestId: "cd093566-90",
  status: 500,
  timestamp: "2025-06-05T05:12:46.084+00:00"
}
      키설명
      error백엔드에서 정의한 에러 명칭
      path어떤 API 경로에서 오류가 발생했는지
      requestId요청 식별자 (추적용)
      status상태 코드 (500)
      timestamp오류 발생 시각 (UTC 기준)

  • stack

    stack: "AxiosError: Request failed with status code 500
   at settle (...)
   at XMLHttpRequest.onloadend (...)"
    • 오류가 어디에서 발생했는지를 보여주는 스택 트레이스
    • settle은 Axios 내부 함수로, 응답을 처리하다 실패했음을 의미함
    • XMLHttpRequest.onloadend는 실제 브라우저에서 응답을 받았을 때 발생한 이벤트임
profile
jiny
이전 포스트

[TIL-0517] Axios 메서드

다음 포스트

[TIL-0518] 검색 기능 구현

0개의 댓글