[Next Js] Next 에서 Error 에러 처리 방법 : 404 / 500 / _error Pages , 에러 경계(ErrorBoundary)

Next js 에서 에러 처리를 하는 방법에 대해서 공부해보았습니다.

기본적으로 제공해주는 에러 처리 방법은 아래와 같습니다.

 

404 error page : 페이지를 찾지 못했을 때 보여줄 페이지

- 예) http://MyApp.com/asdlkj/alkdsjflkja 와 같이 해당 도메인에서 없는 페이지에 접근했을때 보여줄 페이지

500 error page : 서버쪽 문제가 생겼을 때 보여줄 페이지

_error page : 400에러, 500에러 이외의 에러가 발생했을 때 보여줄 페이지

Error : Next js 의 Error 컴포넌트 모듈로 에러를 페이지 내에서 처리할 수 있다.

Error boundary : 클라이언트 쪽의 컴포넌트의 렌더링 문제가 발생했을 때 보여줄 컴포넌트 정의 및 경계

 

404 error page

기초 공부를 하면서 배웠던 내용이지만 한번 더 짚고 넘어갔습니다.

Next 404페이지 만드는 법 : https://jikor1st.tistory.com/21

 

pages 에 404의 이름을 가진 파일만 만들면 Next js 에서 알아서 해당 파일의 페이지를 화면에 보여줍니다.

저는 typescript를 사용해서 404,tsx 파일을 생성해주었습니다.

404.tsx 파일의 코드는 다음과 같습니다.

Next js 에서 설명하는 해당 페이지는 빌드시에 정적으로 파일이 생성된다고 합니다.

To create a custom 404 page you can create a pages/404.js file. This file is statically generated at build time.

// 404.tsx
import type { NextPage } from 'next';

const Custom404: NextPage = () => {
  return (
    <>
      <div>404 - 페이지를 찾을 수 없습니다</div>
    </>
  );
};

export default Custom404;

 

그리고 없는 페이지에 접근하면 다음과 같이 404.tsx 에서 만든 레이아웃 화면을 볼 수 있습니다.

 

또한 getStaticProps 를 404페이지 내부에서 사용할 수 있습니다.

getStaticProps 는 이번 공부에서 다룰 내용은 아니기때문에 간단히 설명하면 최초 빌드과정에서 서버쪽에서 데이터를 받아오고 그 이후로는 다시 해당 페이지에 접근을 하더라도 실행되지 않습니다.

따라서 다시 페이지 접속시 데이터를 받고 렌더링을 하는 과정이 매우 빠릅니다.

따라서 서버쪽에서 데이터를 받고 미리 값을 만들어 404페이지에서 사용할 수도 있습니다.

import type { NextPage } from 'next';
type Props = {
  error404Props: String;
};
const Custom404: NextPage<Props> = ({ error404Props }) => {
  // 해당 페이지에서 getStaticProps props로 받아온 데이터를 사용할 수 있습니다.
  return (
    <>
      <div> 404 - {error404Props}</div>
    </>
  );
};

export async function getStaticProps() {
  // 서버에서 데이터를 미리 받아옵니다.
  // 아래 props는 서버쪽에서 데이터를 받아왔다는 가정하에 props 데이터를 넘겨줍니다.
  return {
    props: { error404Props: '페이지를 찾을 수 없습니다.' },
  };
}

export default Custom404;

 

500 error page

서버쪽에서 문제가 발생했을 때 500에러가 발생했을 때 보여줄 페이지를 만들 수 있습니다.

404 페이지와 마찬가지로 간단하게 pages 에 500이라는 이름의 파일만 만들면 됩니다.

그리고 기본적인 코드 구조는 다음과 같습니다.

마찬가지로 해당 페이지에서는 getStaticProps를 사용할 수 있습니다.

또한 500 페이지도 빌드시 정적으로 파일이 생성됩니다.

import type { NextPage } from 'next';
type Props = {
  error500Props: String;
};
const Custom500: NextPage<Props> = ({ error500Props }) => {
  // 해당 페이지에서 getStaticProps props로 받아온 데이터를 사용할 수 있습니다.
  return (
    <>
      <div> 500 - {error500Props}</div>
    </>
  );
};

export async function getStaticProps() {
  // 서버에서 데이터를 미리 받아옵니다.
  // 아래 props는 서버쪽에서 데이터를 받아왔다는 가정하에 props 데이터를 넘겨줍니다.
  return {
    props: { error500Props: '서버에서 문제가 발생했습니다.' },
  };
}

export default Custom500;

 

_error error page

500, 404 에러 이외의 에러가 발생했을때 Next js 는 고급 오류 페이지 사용자 정의를 할 수 있도록 제공해주고있습니다.

서버사이드 렌더링을 통해서 렌더링이 되는 과정에서 에러 코드를 클라이언트 쪽으로 전달해줄 수 있습니다.

 

getInitialProps를 통해서 next js 빌드 과정에서 기초가 되는 props를 설정해줄 수 있습니다.

해당 페이지에서는 res와 err을 통해 에러가 발생하면 해당 에러 statusCode 를 props로 전달해 화면에서 보여주는 방식입니다.

import type { NextPage, NextPageContext } from 'next';

type Props = {
  statusCode?: number;
};

const Error: NextPage<Props> = ({ statusCode }) => {
  return (
    <div>
      {statusCode
        ? `${statusCode} - 서버에서 문제가 발생했습니다.`
        : '클라이언트에서 문제가 발생했습니다.'}
    </div>
  );
};

Error.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

 

404.tsx를 잠시 삭제하고 없는 404페이지에 접근했을 때 statusCode 가 404이여도 statusCode 를 받아오고 해당 props로 분기처리를 했기 때문에 서버에서 문제가 발생했다고 표시를 합니다.

_error 파일에서 모든 에러를 처리하지 않고 404.tsx 와 500.tsx 정적 에러 페이지를 거치고 두 페이지에서 처리가 안되는 에러를 _error 페이지를 통해서 처리를 하는게 좋은듯합니다.

 

 

 

내장 오류 페이지 재사용 : Error

내장되어 있는 오류 페이지를 재새용할 수 있습니다.

getServerSideProps를 통해서 에러 코드를 보내거나 클라이언트 쪽에서 error가 발생했을때 처리를 해줄 수 있습니다.

import { NextPage } from 'next';
import Error from 'next/error';

type Props = {
  errorCode: number;
  data: any;
};

const ReUsingError: NextPage<Props> = ({ errorCode, data }) => {
  if (errorCode) {
    // getServerSideProps를 통해서 에러 코드를 받아온다면
    // Error 페이지 모듈을 해당 에러 status를 보여 줄수 있습니다.
    return <Error statusCode={errorCode} />;
  }
  return <div>Next ReUsingError : {data}</div>;
};

export async function getServerSideProps() {
  // 테스트를 위해 서버에서 임의의 에러 코드를 넘겨줬습니다.
  return { props: { errorCode: 404, data: null } };
}

export default ReUsingError;

* 주의 할 점은 현재는 Error 는 Next js의 getStaticProps 또는 getServerSideProps 와 같은 Data Fetching methods 를 지원하지 않는다고 합니다.

 

 

에러 경계 : Error Boundary 

마지막으로 에러 경계입니다.

에러 경계에 대한 내용은 React Error Boundary 내용과 거의 유사합니다.

해당 내용을 공부했던 URL을 첨부하며, Next js 에서 typescript를 사용한 코드는 다음과 같습니다.

[React] Error Boundary 에러 경계 : https://jikor1st.tistory.com/23?category=1271628​

import { Component, ErrorInfo, ReactNode } from 'react';

type Props = {
  children: ReactNode;
  fallback: ReactNode;
};
type State = {
  hasError: boolean;
};

class ErrorBoundary extends Component<Props, State> {
  /* 클라이언트 Error Boundary 컴포넌트 */
  public state: State = {
    hasError: false,
  };

  public static getDerivedStateFromError(error: Error): State {
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Uncaught error:', error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

 

 

이상으로 Next js 에서 에러를 처리하는 방법에 대해서 알아봤습니다.

 

 

 

참고

 

Next js Custom Error Page

https://nextjs.org/docs/advanced-features/custom-error-page#404-page

Advanced Features: Custom Error Page | Next.js

 

Next js Error Handling

https://nextjs.org/docs/advanced-features/error-handling

Advanced Features: Error Handling | Next.js

 

+ 제가 참여해서 시작한 사이드 프로젝트가 이 Next js 공부를 통해 적용하며 드디어 런칭을 했습니다.

확인 할수 있는 링크는 아래와 같습니다.

https://www.grother.net/

그라더 | 파충류 분양 플랫폼