axios error처리

export interface ErrorResponse{
  status:string;
  serverDataTime:string;
  errorCode:string;
  errorMessage:string;
}
//axios error의 타입, 

const isServerError = (error: unknown): error is AxiosError<ErrorResponse> => {
  return isAxiosError(error);
}
//axios error타입가드

const useSignIn = (setError : any) => {
  const router = useRouter();
  const getSignIn = async (data: any) => {
    try {
      const res = await axios.post("/sign-in", data);
      console.log(data);
      localStorage.setItem("accessToken", res.data.accessToken);
      console.log(res.data.accessToken);
      router.push("/folder");
    } catch (e) {
      if (isServerError(e) && e.response && e.response.status === 400) {
        setError("email", {
          type: "manual",
          message: "이메일을 확인해주세요",
        });
        setError("password", {
          type: "manual",
          message: "비밀번호를 확인해주세요",
        });
      }
    }
  };

  useEffect(() => {
    if (localStorage.getItem("accessToken")) {
      router.push("/folder");
    }
  }, []);

  return getSignIn;
};

export default useSignIn;

타입가드를 사용한 에러의 타입

• isServerError 함수를 사용해 타입 확인을 추사와하고 있어서 코드가 깔끔하다.
• 다른 곳에서도 재사용 될 수 있다는 장점, 유지보수 용이

 

const useSignIn = (setError : any) => {
  const router = useRouter();

  const getSignIn = async (data: any) => {
    try {
      const res = await axios.post("/sign-in", data);
      console.log(data);
      localStorage.setItem("accessToken", res.data.accessToken);
      console.log(res.data.accessToken);
      router.push("/folder");
    } catch (e) {
      if (e instanceof AxiosError && e.response?.status === 400) {
        setError("email", {
          type: "manual",
          message: "이메일을 확인해주세요",
        });
        setError("password", {
          type: "manual",
          message: "비밀번호를 확인해주세요",
        });
      }
    }
  };

  useEffect(() => {
    if (localStorage.getItem("accessToken")) {
      router.push("/folder");
    }
  }, []);

  return getSignIn;
};

export default useSignIn;

instanceof AxiosError 를 사용한 에러의 타입

• Axios 라이브러리에서 제공하는 AxiosError 클래스의 인스턴스 여부를 확인하는 자바스크립트 연산자
  특정 개체가 AxiosError 클래스의 인스턴스인지 여부를 빠르게 확인 할 수 있다. 
• 직관적이고 명시적
• 코드중복이 발생할 수 있고 가독성이 조금 떨어질 수 있다.