[FE] 에러 세분화 및 핸들링에 관하여

[kangyeongmin]

🧐 고민의 시작

📌 문제 상황

현재 추상화 fetch 함수 request에서 Error를 던져주고 있는데요,

const request = async (path: string, init?: RequestInit) => {
  const response = await fetch(`${BASE_URL}${path}`, {
    ...init,
    headers: {
      'Content-Type': 'application/json',
      ...init?.headers,
    },
  });

  if (!response.ok) throw new Error(response.status.toString());
  return response;
};

아래와 같이 react-query queryFn 혹은 onError에서도 Error를 각기 다르게 던져주는 상황이 존재하는 것 같아요.

const usePostTemporaryCustomer = () =>
  useMutation({
    mutationFn: postTemporaryCustomer,
    onError: () => {
      throw new Error('[ERROR] 임시 가입 고객 생성에 실패하였습니다.');
    },
  });

const useGetCurrentCouponDesign = (cafeId: number, coupon: IssuedCouponsRes | undefined) => {
  return useQuery({
    queryKey: ['couponDesignData', coupon],
    queryFn: () => {
      if (!coupon) throw new Error('쿠폰 정보를 불러오지 못했습니다.');

      return getCurrentCouponDesign({ params: { couponId: coupon.coupons[0].id, cafeId } });
    },
    enabled: !!coupon && coupon.coupons.length !== 0,
  });
};

하지만, 던진 세분화된 에러를 catch(핸들링)하지 않는 점도 또다른 문제.

어떻게 하면 에러세분화 및 핸들링을 현명하게 할 수 있을까요?

[regularPark]

덧붙여서 해당 에러를 사용자에게 보여주지 않는 것도 문제점이라고 생각합니다. onError로 세세하게 모든 통신코드에서 핸들링 해주거나, ErrorBoundary 도입을 생각해봐야할 것 같아요.

[kangyeongmin]

오늘 테코톡 이후로 각각의 페이지의 성격에 맞는 에러대응에 대한 필요성을 공감했어요. (Alert, ErrorPage 등...)
다함께 모여서 이에 관련한 토의를 하는 방안이 좋을 것 같아요.

토의과정은 다음과 같이 하는것이 어떨까요?

1. 모든 페이지를 돌면서 어떤 에러 대응이 필요할 지 파악한다.
2. 공통되는 에러 대응상황을 찾고 분류한다.
3. 각각의 에러 대응상황에 맞는 ErrorBoundary(ex. AlertErrorBoundary, PageErrorBounday...등)를 만들고 알맞은 페이지에 적용한다.

++ 백엔드한테 물어보니까 모든 에러에는 어떤 에러인지 알려주는 message(핸들링되는것은 에러설명, 아닌것은 "알수없는 에러가 발생했습니다.")가 있대요.
이것 또한 관련에러 메세지를 그냥 화면에 보여줄지, 아니면 sync를 맞춰서 저희가 다른 에러 안내를 할 지는 정하면 될 것 같아요!

[2yunseong]

라잇이 제안해준 토의 방식 정말 좋은 것 같습니다! 다만 개인적으로 공부하지 않았던 분야라 주말 내 공부할 시간이 필요합니당