비동기 error헨들링 with error boundary

[aLVINlEE9]

ErrorBoundary는 React 컴포넌트의 렌더링 도중 발생하는 오류를 처리하는 컴포넌트입니다. ErrorBoundary는 자식 컴포넌트 트리에서 발생하는 오류만 처리할 수 있습니다.

따라서 axios 요청이 실패하여 발생하는 오류는 ErrorBoundary에서 처리할 수 없습니다.
해결 방법이 있긴있습니다

저희는 useQuery, useInfinityQuery, useMutation을 가지고 axios 요청을 하고

const patchNickName = async (nickname: string): Promise<AxiosResponse> => {
  return await patch<AxiosResponse>(API, { nickname });
};

export const usePatchNickName = () => {
  ...
  const mutation = useMutation(
    () => {
      if (!inputValue) return Promise.reject(new Error('No nickname selected'));

      return patchNickName(inputValue);
    },
    ...
  );

4xx 5xx 에러가 나면 error interceptor 로 갑니다 (확인하였음) 그에 맞는 Promise.reject를 하게 되면

const errorInterceptor = (error: AxiosError<ApiError>) => {
  console.log('errorerror interceptor', error);
  if (error.response) {
    const { status, data } = error.response;

    ...
    const message = data?.message || '알 수 없는 에러가 발생했습니다.';
    return Promise.reject({ statusCode: status, message, error: data?.error });
  }
  return Promise.reject({ statusCode: 500, message: '서버와의 연결이 끊어졌습니다.' });
};

export const client = createAxiosInstance();
client.interceptors.response.use(responseInterceptor, errorInterceptor);

useMutation의 콜백 함수인 onError가 호출이 됩니다.
이때 async->sync로 해주기 위해서 useState를 이용해 error 를 throw해주면 해결이될것 같습니다.

export const usePatchNickName = () => {
  const [error, setError] = useState(false);
  ...
  const mutation = useMutation(
    () => {
      if (!inputValue) return Promise.reject(new Error('No nickname selected'));

      return patchNickName(inputValue);
    },
    {
      onSuccess: (data) => {
        alert('닉네임이 설정되었습니다.');
        console.log(data);
      },
      onError: (error) => {
        alert('닉네임 설정에 실패하였습니다.');
        console.log(error);
        // 여기로 옴 여기서 error state를 바꿔서 async -> sync로 바꾸는 작업 필요
        setError(true);
      },
    },
    if (error) {
      throw error;
    }
  );

그리고 저희는 모든 axios 에러에 대해서 저렇게 처리 할 필요는 없어 보입니다. 대부분 에러는 alert로 띄워줄것 같고, 5xx 에러나 저희가 따로 define해주지 않은 status code가 올때만 이렇게 처리하면 될것 같습니다.

그런데 이 방법이 과연 맞는것인가... 에 대한 의문이 남긴합니다. 애초에 error boundary가 이런식으로 사용이 되는지도 더 확인해봐야할것 같습니다.