NextJS

Server side 에러 핸들링

Cutsom Error Page

Next.js는 에러가 발생했을 때 서버가 모든 요청에 대해 에러 페이지를 렌더링하지 않고 static한 페이지를 리턴하도록 해준다. 이 페이지를 /pages 아래 404, 500 또는 _error를 생성해 커스터마이징 할 수 있다.

• _error 페이지는 next/error의 Error 컴포넌트를 사용해 에러 처리를 세밀화할 수 있는 페이지이다. 하지만 현재 getStaticProps와 getServerSideProps에서 지원되지 않는다.

SSG에서의 API 호출

SSG는 빌드 시점에 페이지를 만들어놓고 요청이 들어오면 페이지를 반환하는 방식이다.
만약 정적으로 만들 페이지에 데이터가 필요한 경우 getStaticProps 함수에서 데이터를 불러와 페이지 컴포넌트의 props로 넘겨주는데, 데이터를 불러오는 곳에서 에러가 나면 빌드 시점에 에러가 발생한다.

SSR에서의 API 호출

SSR은 요청이 들어올 때마다 서버에서 페이지를 생성해 반환해주는 방식이다.
SSR에서는 페이지에 필요한 데이터를 getServerSideProps 함수에서 가져온다. 데이터를 불러오는 중 에러가 발생하면 500 에러 페이지가 반환된다.

Client side error 에러 핸들링

ErrorBoundary

클라이언트에서 발생하는 에러는 React의 ErrorBoundary로 처리할 수 있다.

아래 작성한 코드는 page router 기준으로, app router에서는 error 페이지를 생성하면 자동으로 대응된다고 한다. 참고