error 처리

[sijinyu]

현재 백엔드 api에서 에러 처리는

response.data.details에 메세지가 있더라구요

근데 이 에러가 onSuccess에서 잡혀서 분기처리를 해야하는데

성공적인 데이터 타입과 에러시 타입이 달라서 지정시 어려움이있고

onError로 왔다면 공통처리를 할 수도 있었을것 같은데

onSuccess에서 성공 데이터와 에러 데이터 처리를 어떻게 효율적으로 해야할지 고민입니다.

customhook내에서 처리를 하지말고 컴포넌트단에서 에러바운더리를 씌워야할까요?

그럴시에도 에러페이지내에 details 메세지를 보여주려면 뷰단에서 props로 넘겨야하지 않나요?

[starkoora]

@sijinyu axios 사용하고 계신다면 response가 400, 500일 경우 에러를 throw 하기 때문에(fetch는 response.ok로 분기해야 함) 당연히 onError에서 잡혀야 합니다 코드를 다시 확인해보셔야 할거 같아요

[starkoora]

@sijinyu 코드를 잠깐 보니 인터셉터에서 실패시 error를 그대로 리턴하고 계신데 https://github.com/sijinyu/wanted-pre-onboarding-challenge-fe-1/blob/master/src/common/api/index.ts#L30-L50

공식문서처럼 Promise.reject(error) 형태로 한번 시도해보시겠어요? https://axios-http.com/kr/docs/interceptors

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

[sijinyu]

@starkoora 덕분에 잘 해결했습니다 감사합니다! Promise.reject(error) 없이 그냥 return해서 생긴 문제 였습니다.