feature: 에러 핸들링 고도화

[n0eyes]

ErrorBoundary 옵션 추가

ErrorBoundary의 옵션을 추가하였습니다.

onError

에러가 ErrorBoundary에서 catch되었을 때 실행됩니다

onError: (error: Error, errorInfo: ErrorInfo) => void

<ErrorBoundary
  onError={(error)=>{
    if(isAxiosError(error)) { ... }
  }}
>
 ...
</ErrorBoundary>

ignore

에러의 catch 여부를 결정합니다

ignore: <E extends Error>(props: E) => boolean

<ErrorBoundary
  ignore={(error)=>{
    return !isAxiosError(error)
  }}
>
 ...
</ErrorBoundary>

여러 종류의 Boundary 추가

APIBoundary

const APIBoundary = (props: PropsWithChildren<APIBoundaryProps>) => {
  const handleAPIError = (error: unknown) => {
    const convertedError = ZipgoError.convertToError(error);

    if (!(convertedError instanceof APIError)) throw convertedError;
  };

  return <ErrorBoundary onError={handleAPIError} {...props} />;
};

발생한 에러가 APIError가 아닌 경우 throw 합니다

QueryBoundary

const QueryBoundary = (props: PropsWithChildren<QueryBoundaryProps>) => {
  ...
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <APIBoundary
          fallback={errorFallback}
          onReset={composeFunctions(reset, onReset)}
          {...restProps}
        >
          <Suspense fallback={loadingFallback}>{children}</Suspense>
        </APIBoundary>
      )}
    </QueryErrorResetBoundary>
  );
};

react-query에서 제공하는 QueryErrorResetBoundary를 사용하여 reset시 에러가 발생한 query를 초기화 합니다.

EenOfErrorBoundary

error의 ignore 속성 여부와 상관 없이 무조건 error를 catch하는 종단점입니다.

CustomError 추가

• ZipgoError : name , message , cause , ignore 속성 및 convertToError static method를 가진 BaseError입니다. 모든 에러는 ZipgoError를 상속받습니다.
• RuntimeError : 예측이 가능한 런타임 에러를 throw할 때 사용합니다. ignore: true가 적용되며 EenOfErrorBoundary에서 처리됩니다.
• UnexpectedError : 예측할 수 없는 에러를 throw할 때 사용합니다. ignore: true가 적용되며 EenOfErrorBoundary에서 처리됩니다.
• APIError : 통신이 정상적으로 성공한 api에서 발생한 에러를 throw 할 때 사용합니다.

const APIBoundary = () => 
  <ErrorBoundary
    onError={(error)=>{
      if (!isAxiosError(error) || !APIError.canManage(error)) {
        throw new UnexpectedError(error);
      }
    }}
  >
 ...
  </ErrorBoundary>

// RuntimeError
const Component = () => {
  const { setError } = useErrorBoundary()

  const onClick = () => setError(new RuntimeError({ code: 'WRONG_QUERY_STRING' }))
  return <button onClick={onClick}>click!</button>

}

ErrorCode 추가

서버에서 ErrorCode를 사용할 것을 대비하여 추가하였습니다.
현재는 다음과 같은 코드만 사용하고 있습니다.

서버에서 에러 코드를 제공하지 않거나 잘못된 에러 코드를 제공하는 경우 UNEXPECTED_ERROR 메세지가 기본적으로 적용됩니다. 상태 코드는 404로 적용됩니다.

const UNEXPECTED_ERROR = '서비스에 문제가 발생했어요';
const NOT_FOUND = '존재하지 않는 페이지예요';
const API_ERROR_CODE_MISSING = UNEXPECTED_ERROR;

ErrorPage 수정

전달받은 error의 정보에 따라 다른 상태코드와 에러 메세지를 렌더링하도록 변경하였습니다.

또한 , refresh props를 통해 다시 시도하기 버튼도 추가적으로 렌더링할 수 있습니다.

useMutationWithToast hook 추가

mutation이 발생하는 경우 에러 메세지를 토스트로 노출하는 로직이 적용된 hook입니다.

해당 hook을 사용하면 에러가 에러 바운더리로 throw되지 않고 토스트만 노출한 후 기능이 중지됩니다.

만약 핵심적인 기능인 경우 critical 옵션을 통해 ErrorBoundary로 강제 throw할 수 있습니다.

critical: false

critical: true

🙋🏻 More

• close [FE] 에러 핸들링 고도화 #446

[HyeryongChoi]

노선생 아주 아주 아주 아주 아주 아주 고생많으셨습니다👍
고민하는 모습을 거의 한 달 넘게 본 것 같은데 이런 멋진 결과물이 나왔군요😄

🐌제가 질문 폭탄을 남겨놨으니 천천히(빨리) 확인 바랍니다🙏

[HyeryongChoi]

이건 머에여? 궁금해요

[HyeryongChoi]

뭔가 거대한게 생겼군요👍
이거 빨리 어푸룹해야 제가 작업을 시작할 수 있겠어요 ^__ㅜ

[HyeryongChoi]

이거 우리 집고 프론트엔드 5차 간부회의 에서 기본값은 infinity로 주기로 하지 않았나요? 신고하겠읍니다.
사유서 제출하십시오

ReactQuery cacheTime, staleTime

• foodList → 1h
• reviewList → 1m
• global → Infinity

[HyeryongChoi]

아 디테일 멋집니당

[HyeryongChoi]

함수명 convertToSpecificError 어떤가요? 이게 아니더라도 뭔가 에러를 구체화시켜서 반환한다는 느낌이 들어간 함수명으로 바꾸면 좋을 것 같아요!

[HyeryongChoi]

개인적인 의견인데 커스텀에러코드가 있다면 에러토스트나 에러페이지 보여줄 때 에러코드(숫자)도 같이 보여주는 건 어떤가여?
사용자가 이거 안돼요 저거 안돼요~할 때 에러코드도 함께 말해주면 원인 찾는 게 더 쉬울 것 같아요!

아래는 스벅 에러페이지입니다!

[HyeryongChoi]

오 여기 에러코드 보여주는 게 있었네여!! 디자인도 한번 보여주시죵

[HyeryongChoi]

？

[HyeryongChoi]

이건 뭔가요! 설명 DM주세요🙏

[HyeryongChoi]

질문 폭탄이라 지송..
요 타입은 오 ㅐ 만드신 건가요?

[HyeryongChoi]

답변 안 달아주시면 찾아가겠습니다~~ 일단 어푸룹!!

[ksone02]

고생했어요~!!