[트러블 슈팅] 에러 처리 통합 관리 - 일관된 에러 메시지로 사용자 경험 개선하기

우선 ,

Taskify 프로젝트를 개발하면서, 에러 처리 로직이 여러 컴포넌트에 분산되어 있음을 알게 되었습니다. 각 컴포넌트에서 중복된 방식으로 에러를 처리하고, 에러 메시지를 표시하는 방법이 일관되지 않아 사용자 경험이 저하되는 문제를 겪었습니다. 😞

 

이 문제를 해결하기 위해, useErrorModal이라는 커스텀 훅을 만들어 전역적으로 일관된 에러 처리 방식을 구현했습니다.

이를 통해 에러 처리 로직을 통합하고, 사용자에게 서버에서 발생한 에러 메시지를 명확하게 전달할 수 있게 되었습니다.

 

 

☄️ 문제 상황 - 에러 처리 로직의 중복과 일관성 부족

프로젝트 초기에는 각각의 컴포넌트에서 에러를 개별적으로 처리하고 있었습니다.

예를 들어, API 요청 실패 시 발생하는 에러나 사용자 입력에서 발생하는 에러를 각 컴포넌트에서 처리하면서 중복된 코드가 발생하고, 에러 메시지 또한 일관성 없이 표시되었습니다.

 

1. 중복된 에러 처리 코드: 에러 처리가 각 컴포넌트에 분산되어 있어서 같은 로직을 여러 번 작성해야 했습니다.
2. 일관성 없는 에러 메시지: 각 컴포넌트에서 에러 메시지를 다르게 처리하다 보니, 사용자에게 전달되는 에러 메시지가 일관되지 않았습니다.
3. 유지보수 어려움: 에러 처리 로직을 수정할 때마다 각 컴포넌트에 분산되어 있는 코드를 수정해야 해서, 유지보수가 어려웠습니다.

이 문제를 해결하기 위해, useErrorModal 커스텀 훅을 도입하여 에러 처리 로직을 통합하고, 사용자에게 서버에서 발생한 에러 메시지를 일관되게 표시할 수 있도록 했습니다.

 

 

🚀  해결 방안 - useErrorModal 커스텀 훅을 통한 에러 처리 통합

useErrorModal은 모든 컴포넌트에서 일관된 에러 처리를 가능하게 해주는 커스텀 훅입니다.

이 훅을 사용하면 API 요청에서 발생하는 에러나 예기치 못한 에러를 중앙에서 처리하고, 모달로 에러 메시지를 표시할 수 있습니다.

 

📎 useErrorModal 설계

1. 서버에서 던져주는 에러 메시지 처리: 서버에서 발생한 에러 메시지를 정확히 처리하여, 사용자에게 서버에서 던져준 에러 메시지를 그대로 전달합니다.
2. 모달 관리: 에러 메시지를 표시할 때 사용하는 모달을 제어하여, 에러 발생 시 사용자가 즉시 확인할 수 있도록 합니다.

import { useState } from "react";
import useModal from "@/hooks/modal/useModal";
import { AxiosError } from "axios";

const useErrorModal = () => {
  const { isOpen, openModal, closeModal } = useModal();
  const [errorMessage, setErrorMessage] = useState<string>("");

  // 에러 메시지 설정과 모달 열기
  // AxiosError를 체크하여 서버에서 던져준 에러 메시지를 가져옴
  const handleError = (error: unknown) => {
    if (error instanceof AxiosError) {
      // 서버에서 던져주는 에러 메시지를 그대로 사용
      setErrorMessage(
        error.response?.data.message || "예상치 못한 오류가 발생했습니다."
      );
    } else if (error instanceof Error) {
      setErrorMessage(error.message);
    } else {
      setErrorMessage("알 수 없는 오류가 발생했습니다.");
    }
    openModal();
  };

  // 모달을 닫고 에러 메시지 초기화
  const handleClose = () => {
    closeModal();
    setErrorMessage("");
  };

  return {
    isOpen,
    errorMessage,
    handleError,
    handleClose,
  };
};

 

 

📎 코드 중복 제거와 효율성 향상

1. 에러 처리 로직 통합: 모든 컴포넌트에서 동일한 방식으로 에러를 처리하여 중복된 코드를 없애고, 로직을 한곳에 집중
2. 모달로 일관된 에러 메시지 표시: 사용자에게 보이는 에러 메시지는 이제 모달을 통해 일관되게 표시되고 서버에서 발생한 에러 메시지를 그대로 사용자에게 전달
3. 유지보수 용이성: 에러 처리 로직을 변경할 때, 이제는 useErrorModal만 수정하면 되므로 유지보수가 매우 용이. 여러 컴포넌트를 일일이 수정할 필요가 없고, 한 곳에서 수정만 하면 됨.

 

한줄평

useErrorModal 덕분에 서버에서 던져주는 에러 메시지를 일관성 있게 처리할 수 있게 되었고, 사용자에게 더 정확한 정보를 제공할 수 있었습니다. 코드 중복도 제거하고, 유지보수성도 높아져 프로젝트가 한층 안정적이 되었다 ~!! 🎉