React query의 onError 와 try-catch.til

서론

지난 글에서 글을 주기적으로 쓰자고 마음먹은지 일주일이 넘게 지나서 다음 글을 쓰게됐다.
쓰고싶지 않아서, 게을러서는 아니고 가족분들이 사기를 당해서 여러가지
처리해야 할 일들 때문에 정신이 없었다고 애써 변명을 해본다.
잘 해결된건 아니지만 그래도 나는 나의 위치에서 내가 맡은 역할을 해야만 하는 것이다.

계기

프로젝트를 진행하면서 API 요청의 에러처리에는 습관적으로 try-catch 문으로 처리하곤 했다.
예를들면 이렇게,

  postAPI = async (payload) => {
    try {
      const response = await instance.post(API,payload);
      console.log(response);
      return response.data;
    } catch (error) {
      console.log(error);
    }
  },

그런데, 우리의 프로젝트에서 react-query 를 사용하고 있다.
react-query 에서는 useQuery, useMuation 훅에서
onError 라는 에러 핸들링 콜백을 제공한다.
예를들면 이런식,

const { mutate } = useMutation(postAPI, {
  onSuccess: () => {
    // ...
  },
  onError: (error) => {
    console.error(error);
  },
});

문득 떠오른 생각인데,
API내부에서 try-catch로 에러 핸들링을 하는 것과,
useMutaion의 onError 로 에러 핸들링을 하는 것.
이 둘의 차이가 뭘까 ?

어떤 에러가 발생했을 때 받아볼 스테이터스 코드로 인한 에러 분기 처리는
모조리 onError 에서 하고 있었다.
그렇다면 try-catch로 에러 핸들링을 하는 건 전혀 의미가 없지 않을까 ?

API에서 try-catch 를 사용 했을 때

try-catch를 사용하는 목적은 API 호출 중 발생할 수 있는 예외를 처리함에 있다.

const fetchData = async () => {
  try {
    const response = await axios.get("https://api.example.com/data");
    return response.data;
  } catch (error) {
    console.error("API error:", error);
    throw error; // React Query로 에러를 전달
  }
}

api 호출 중 발생하는 모든 에러는 try-catch를 우선적으로 거쳐간다.
조금 더 확장하자면 '우선 에러를 검사하고 필요한 경우에만 react query로 전달 같은
로직도 가능하다.

React query 의 onError 를 사용했을 때

onError 의 목적은 조금 더 직관적이다.

const { data, error, isLoading } = useQuery("fetchData", fetchData, {
  onError: (error) => {
    console.error("React Query error:", error);
  },
});

전달받은 에러를 바탕으로 사용자에게 어떤 피드백을 주거나 로깅 등의 처리를 할 수 있다.

생각

조금 더 생각해보면 try-catch 가 우선순위를 가진다 라는 것을 바탕으로
에러처리의 우선순위를 설정하는 것이 가능하다.
예를들어, 네트워크가 끊겼거나, api 호출 주소가 잘못됐다는 등의
사용자의 의도와는 상관없는 에러라면 try-catch 에서 에러처리를,
잘못된 입력이거나 악의적인 목적의 요청일 경우,
그러니까, 사용자의 의도에 따른 에러라면 onError 를 사용하여 에러처리를 하는 것이다.

그러나..

어떤 거대한 조직적인 웹 사이트의 에러 핸들링에서는 명시적으로 에러를 설정해서
얻을 수 있는 이점이 있을지도 모르지만,
react-query 의 onError 는 대부분의 에러처리를 자동으로 해준다.
대부분의 경우에는 에러에 따른 사용자 피드백이 필요하기에
react-query 를 사용한다면 try-catch 를 사용하지 않아도 충분하다.

결론

에러처리에 관한 부분이 이해하기 쉽지 않아서
정확하게 맞는 내용인지는 조금 더 공부해봐야 알 것 같다.