React에서 에러를 선언적으로 처리하기

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // 에러를 던질 수 있는 무언가를 해야합니다.
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>;
    }
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

export const App = () => {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Component />
    </ErrorBoundary>
  );
};

export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
  // 에러처리...
};

<UnknownErrorBoundary>
  <APIErrorBoundary>
    <Suspense fallback={<GlobalLoading />}>
      <Outlet />
    </Suspense>
  </APIErrorBoundary>
</UnknownErrorBoundary>

import { AxiosError } from 'axios';

type ErrorCodeType = {
  [key: string]: { status: string; message: string };
};

const ERROR_CODE: ErrorCodeType = {
  // 백엔드에서 정의한 에러
  'C-101': {
    status: '401',
    message: '인증에 실패하였습니다.',
  },
  'A-003': {
    status: '401',
    message: 'Refresh Token이 만료되었습니다.',
  },
  'A-004': {
    status: '402',
    message: 'Access Token을 재발급해야합니다.',
  },
  ...

  // axios 에러
  ERR_NETWORK: {
    status: '네트워크 에러',
    message:
      '서버가 응답하지 않습니다. \n프로그램을 재시작하거나 관리자에게 연락하세요.',
  },
  ECONNABORTED: {
    status: '요청 시간 초과',
    message: '요청 시간을 초과했습니다.',
  },

  // 알 수 없는 에러
  UNKNOWN: { status: 'ERROR', message: '알 수 없는 오류가 발생했습니다.' },
} as const;

export const getErrorData = (
  error: AxiosError<{
    status: number;
    error: string;
    code: string;
    reason: string[];
  }>,
) => {
  const serverErrorCode = error?.response?.data?.code ?? '';
  const axiosErrorCode = error?.code ?? '';

  if (serverErrorCode === 'C-202') {
    return {
      status: '400',
      message:
        error?.response?.data?.reason[0] ?? '요청 파라미터가 잘못되었습니다.',
    };
  } else if (serverErrorCode in ERROR_CODE) {
    return ERROR_CODE[serverErrorCode as keyof typeof ERROR_CODE];
  } else if (axiosErrorCode in ERROR_CODE) {
    return ERROR_CODE[axiosErrorCode as keyof typeof ERROR_CODE];
  } else return ERROR_CODE.UNKNOWN;
};

import Layout from '@src/components/layout/Layout';
import Lottie from 'lottie-react';
import Lottie404 from '@src/assets/lotties/Lottie404.json';
import { PATH } from '@src/constants/path';
import { Link } from 'react-router-dom';
import { useEffect } from 'react';
import CustomToast from '@src/components/common/toast/customToast';
import { TOAST_TYPE } from '@src/types/toastType';
import IconGithub from '@src/assets/icons/IconGithub.png';

interface IErrorPageProps {
  status: string;
  message: string;
  isUnknownError: boolean;
  onRetry: () => void;
}

const ErrorPage = ({
  status = 'ERROR',
  message = '알 수 없는 오류가 발생했습니다.',
  isUnknownError = true,
  onRetry,
}: IErrorPageProps) => {
  const handleHomeClick = () => {
    onRetry();
    if (isUnknownError) {
      localStorage.clear();
    }
    window.location.href = PATH.ROOT;
  };

  useEffect(() => {
    CustomToast({
      type: TOAST_TYPE.ERROR,
      status,
      message,
    });
  }, []);

  return (
    <Layout>
      <div
        className={`flex flex-col gap-2 items-center justify-center h-[calc(100dvh-20rem)] ${
          !isUnknownError ? 'mt-16' : 'mt-14'
        }`}
      >
        <Lottie animationData={Lottie404} className="size-52 lg:size-96" />
        <div className="grid grid-cols-2 gap-2 lg:-mt-5">
          <button
            onClick={handleHomeClick}
            className="p-2 rounded-md lg:p-3 bg-blue-normal01 ring-2 ring-blue-normal01 hover:ring-blue-normal02 text-white-default hover:bg-blue-normal02 text-description lg:text-content"
          >
            홈으로 돌아가기
          </button>
          {!isUnknownError ? (
            <button className="p-2 rounded-md lg:p-3 bg-white-default ring-2 ring-blue-normal01 text-blue-normal01 text-description lg:text-content">
              다시 시도
            </button>
          ) : (
            ...
          )}
          ../
        </div>
      </div>
    </Layout>
  );
};

export default ErrorPage;

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      throwOnError: true,
    },
    mutations: {
      onError: (error: any) => {
        const errorData = getErrorData(error);
        CustomToast({
          type: TOAST_TYPE.ERROR,
          status: errorData.status,
          message: errorData.message,
        });
      },
    },
  },
});

import { ErrorBoundary } from 'react-error-boundary';
import { APIErrorFallback } from './APIErrorFallback';
import { useQueryErrorResetBoundary } from '@tanstack/react-query';

export const APIErrorBoundary = ({
  children,
}: {
  children: React.ReactNode,
}) => {
  const { reset } = useQueryErrorResetBoundary();

  return (
    <ErrorBoundary FallbackComponent={APIErrorFallback} onReset={reset}>
      {children}
    </ErrorBoundary>
  );
};

import { FallbackProps } from 'react-error-boundary';
import { isAxiosError } from 'axios';
import { getErrorData } from '@src/utils/getErrorData';
import ErrorPage from '@src/pages/error/ErrorPage';
import { Navigate } from 'react-router-dom';
import { PATH } from '@src/constants/path';

export const APIErrorFallback = ({
  error,
  resetErrorBoundary,
}: FallbackProps) => {
  if (isAxiosError(error)) {
    const errorData = getErrorData(error);

    if (error.response?.data?.code === 'A-003') {
      localStorage.clear();
      window.location.href = PATH.ROOT;
      return;
    }

    if (errorData.status === '401') {
      return <Navigate to={PATH.SIGN_IN} replace />;
    }

    return (
      <ErrorPage
        status={errorData?.status}
        message={errorData?.message}
        isUnknownError={errorData?.status === 'ERROR'}
        onRetry={resetErrorBoundary}
      />
    );
  } else {
    throw error;
  }
};

import { instance } from '@src/apis/instance';
import { AxiosError, AxiosRequestConfig } from 'axios';

const getAPIResponseData = async <T, D = T>(option: AxiosRequestConfig<D>) => {
  try {
    const { data } = (await instance) < T > option;
    return data;
  } catch (e) {
    throw e;
  }
};

export default getAPIResponseData;

import getAPIResponseData from '@src/utils/getAPIResponseData';
import { API } from '@src/constants/api';
import {
  ISignUpConfirmEmailVerificationResponseType,
  ISignUpConfirmEmailVerificationType,
} from '@src/types/auth/SignUpVerificationType';

export const postConfirmEmailVerification = async (
  confirmEmailVerificationPayload: ISignUpConfirmEmailVerificationType
) => {
  return (
    getAPIResponseData < ISignUpConfirmEmailVerificationResponseType,
    ISignUpConfirmEmailVerificationType >
      {
        url: API.SIGN_UP_CONFIRM_EMAIL_VERIFICATION,
        method: 'POST',
        data: confirmEmailVerificationPayload,
      }
  );
};

import { postConfirmEmailVerification } from '@src/apis/auth/postConfirmEmailVerification';
import {
  ISignUpConfirmEmailVerificationResponseType,
  ISignUpConfirmEmailVerificationType,
} from '@src/types/auth/SignUpVerificationType';
import { useMutation, UseMutationOptions } from '@tanstack/react-query';

export const useConfirmEmailVerificationMutation = (
  options?: UseMutationOptions<
    ISignUpConfirmEmailVerificationResponseType,
    Error,
    ISignUpConfirmEmailVerificationType
  >
) => {
  return useMutation({
    mutationFn: postConfirmEmailVerification,
    ...options,
  });
};