React에서 에러 처리 종류 (Axios Interceptor, Error Boundary, createBrowserRouter 의 errorElement 처리)

리액트에서 에러를 처리하기 위한 방법은 여러가지가 있습니다.

fetch 라이브러리인 axios 의 interceptor 에서도 처리할 수 있구요, 리액트에서의 error boundary 로도 처리할 수 있죠.

그리고 createBroswerRouter의 errorElement 속성으로도 처리가 가능합니다.

이 여러가지 방식들의 차이점에 대해 알아봅시다.

---

1. Axios Interceptor에서 에러 처리

주로 네트워크 관련 에러나 인증 실패와 같은 HTTP 요청 실패를 처리할 때 사용됩니다.

적합한 상황

• 인증: 만료된 토큰으로 인해 401 에러가 발생했을 때 토큰을 갱신하고 다시 요청을 시도하거나, 로그인 페이지로 리디렉션하는 등 사용자 인증 관련 처리가 필요한 경우
• 공통 API 에러 처리: 네트워크 오류, 서버 오류(500번대 에러) 등 반복되는 HTTP 에러 처리 로직을 공통화할 때
• 로깅: 모든 요청의 에러를 로깅하는 데 유용합니다.

한계

Axios 인터셉터는 api 요청 레벨에서만 에러를 처리하며,

UI 컴포넌트 레벨에서 발생하는 일반적인 자바스크립트 에러에는 관여하지 않아요.

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 인증 실패: 로그아웃 또는 토큰 갱신 등 처리
    }
    // 다른 공통 에러 처리
    return Promise.reject(error);
  }
);

 

---

2. Error Boundary로 에러 처리

React의 ErrorBoundary는 UI 컴포넌트에서 발생하는 자바스크립트 에러를 포착해 UI에 표시하거나 대체 UI를 렌더링할 수 있게 해주는 컴포넌트입니다.

적합한 상황

• UI 렌더링 에러: 예를 들어, 렌더링 도중 발생하는 자바스크립트 에러(컴포넌트 상태 오류 등)로 인해 앱이 중단되지 않고 특정 영역에 에러 메시지를 표시하도록 할 때 유용합니다.
• 페이지나 컴포넌트 레벨 에러 처리: 특정 페이지 또는 컴포넌트 내에서 발생하는 예외 상황을 개별적으로 처리하고 싶을 때.
• 사용자 친화적 에러 메시지 표시: "오류가 발생했습니다. 새로고침 해주세요."와 같은 메시지를 보여주는 등 UX 개선에 유용합니다.

한계

API 호출 실패 등 비동기적인 에러는 기본적으로 처리되지 않으므로, 비동기 에러는 별도로 잡아서 ErrorBoundary로 전달해야 합니다.

class MyErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 로깅이나 분석용으로 에러 정보를 수집 가능
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

 

---

3. createBrowserRouter의 errorElement로 에러 처리

createBrowserRouter의 errorElement는 라우터에서 발생하는 에러를 처리하기 위해 특정 UI를 표시할 수 있게 합니다. 특정 경로에 접근하는 중 발생한 에러나 잘못된 라우팅에 대한 에러를 관리하는 데 유용합니다.

적합한 상황

• 잘못된 경로 처리: 존재하지 않는 페이지(404 에러)에 대한 처리나 특정 URL 접근 시 발생하는 에러 처리.
• 라우트 기반 에러 처리: 페이지 레벨에서 데이터를 로드하는 과정에서 발생하는 오류를 표시하고 싶을 때. 예를 들어, 특정 페이지에서 데이터를 불러올 수 없을 때 이를 감지하고 사용자에게 에러 페이지를 제공.
• 라우터 전역 에러 처리: 여러 페이지에서 동일하게 발생할 수 있는 라우팅 오류를 전역적으로 처리하고 싶을 때 유용합니다.

한계

Axios와 같은 네트워크 요청 실패에 대한 처리는 인터셉터에서 하는 것이 더 적합하며, 일반적인 컴포넌트 에러에는 대응하지 않습니다.

typescript
코드 복사
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />, // 모든 라우트에 대한 에러 페이지
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
    errorElement: <DashboardError />, // 대시보드 전용 에러 페이지
  },
]);

---

정리

• Axios Interceptor: API 요청 실패와 관련된 네트워크 에러, 인증 에러 등을 일관되게 처리하고자 할 때 사용합니다.
• Error Boundary: 특정 컴포넌트나 페이지에서 발생하는 UI 렌더링 오류를 개별적으로 처리하고 사용자에게 대체 UI를 보여주고자 할 때 사용합니다.
• createBrowserRouter의 errorElement: 라우트 관련 에러나 잘못된 경로에 대한 에러를 전역적으로 처리하여 특정 에러 페이지로 리디렉션하거나 페이지 레벨 에러를 처리하고자 할 때 사용합니다.