서버에서 발생하는 에러 핸들링

axiosServer

axios 요청 후 에러 발생시 try catch문으로 예외처리

try {
    const res = await axiosClient[method](url, ...rest);
    return res.data;
  } catch (error) {
    const message = getErrorMessage(error.response.status);

    throw new CustomError(message, error.response.status);
}

CustomError

class CustomError extends Error {
  statusCode: number;
  constructor(message: string, statusCode: number) {
    super(message);
    this.statusCode = statusCode;
  }
}

getErrorMessage

각각의 상태코드에 맞는 메세지 반환

switch (statusCode) {
    case 400:
      return '잘못된 요청입니다.';
    case 401:
      return '인증이 유효하지 않습니다.';
    case 403:
      return '접근할 수 없는 페이지 입니다.';
    case 404:
      return '찾을 수 없는 페이지 입니다.';
    default:
      return '죄송합니다. 잠시 후 다시 이용해 주세요.';
  }

nextjs에서 제공해주는 Error 페이지 사용

function MyApp({ Component, pageProps }: AppProps) {
  if (pageProps.error) {
    return (
      <Error
        statusCode={pageProps.error.statusCode}
        title={pageProps.error.message}
      />
    );
  }
  return (
   ...
  );
}