Next.js getServerSideProps에서 발생한 500 - Internal Server Error 해결하기

프로젝트 배포 환경에서 500 - Internal Server Error가 데이터독에 잡혔다.

해당 에러의 원인을 파악한 결과, getServerSideProps 내부에 api를 Prefetch하는 곳에서 발생한 문제였다.

 

우선 getServerSideProps 내부에서 Error가 throw되면 어떻게 될까?

 

출처: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

 

 

위 Next.Js 공식 문서에서 명시해뒀듯이 pages/500.js로 이동되는 듯 하다!

❗️ 500.js란?? 500 에러 발생했을 경우 이동하게 되는 페이지이며 pages에 만들 경우 500 에러 페이지를 커스텀하게 보여줄 수 있다.

 

 

---

 

 

500 에러가 발생했을 경우 두가지 제시 방안이 있는데..

 

 

1. 에러 페이지로 랜딩 시킴 (커스텀으로 500.js 혹은 _error.js 구성)

2. 에러 발생시 클라이언트 단에서 처리할 수 있게 위임

 

 

 

해당 포스팅에서는 첫번째 제시 방안을 적용해보고자 한다.

우선 내가 작성한 페이지의 getServerSideProps를 보자.

 

export const getServerSideProps = async () => {
  return {
    props: {
      fallback: {
        [unstable_serialize(apiKey())]: await api(),
      },
    },
  }
})

- 현재 프로젝트에서는 swr을 사용하고 있기 때문에 프리패칭한 데이터를 swr 전역 설정에 넣어준다. (SWRConfig의 fallback 옵션 사용)

- unstable_serialize: array나 function 타입을 key로 사용할 수 있도록 지원

 

 

🤔 작성한 코드를 본 결과.. 에러가 발생했을 경우에 대한 예외처리가 되어있지 않다는 것을 깨달았다.

따라서 제시한 두번째 방법인 '에러 발생시 클라이언트 단에서 처리할 수 있게 위임'을 실현하기 위해 예외 처리를 넣고 예외 발생시 fallback에 빈 객체를 넣어주는 방향을 생각했다.

 

 

 

현재 모든 페이지에 위 코드와 같이 데이터를 프리패칭해주기 때문에 페이지마다 일일이 try-catch를 넣는 방향보다는,

api 호출을 감싸는 decorator를 생성해주기로 했다.

 

 

 

내가 만든 decorator 코드는 다음과 같다.

 

export const prefetchDecorator = async (apiKey: any, api: any) => {
  try {
    return {
      [unstable_serialize(apiKey())]: await apiFunc(),
    }
  } catch (error) {
    return {}
  }
}

- api에 문제가 발생했을 경우 예외처리로 빈 객체 return하도록 설정

 

 

자, 이제 기존 getServerSideProps안에 내가 만든 decorator를 적용시켜보자!

 

export const getServerSideProps = async () => {
  const fallback: Fallback = await prefetchDecorator(apiKey, api)
  return {
    props: {
      fallback,
    },
  }
})

이제 getServerSideProps에서 데이터를 프리패칭해주는 부분에 해당 데코레이터를 적용하여 Error Handling이 되었다!! 🙌

 

 

 

---

 

 

 

SWR: https://swr.vercel.app/ko/docs/with-nextjs

Next.js와 함께 사용하는 방법 – SWR

Next.js: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js