에러를 처리하는 다양한 방법

에러에는 다양한 에러가 있다.

Next.js에서 제공하는 error.tsx가 있고, react에서 제공하는 ErrorBoundary가 있다. 이 둘을 각각 어떻게 다르고, 어떻게 에러를 처리할까?

1. error.js

error.js는 react error boundary를 기반으로 만들어졌다. error boundary에서 에러를 던지면, fallback 컴포넌트가 렌더링이 된다. error.js는 layout.js나 template.js에서 던지는 에러를 탐지하지 못한다. layout이나 template에서 잡히는 에러까지 잡고 싶다면, global-error.js를 사용하면 된다.

error.js 코드 살펴보기

// src/components/Error/BaseError.tsx
export interface BaseErrorProps {
  error: Error;
  reset: () => void;
}

export default function BaseError({ error, reset }: BaseErrorProps) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <Flex align="center" justify="center" className="h-full text-sign-tertiary " direction="column">
      <p className="text-30 flex h-48 w-48 items-center justify-center rounded-full bg-sign-caption text-white">
        X
      </p>
      <Spacing size={20} />
      <p className="text-center text-subtitle-1">
        오류가 발생했습니다.
        <br />
        잠시 후 다시 시도해 주세요.
      </p>
      <button
        className="bg-grey-200 text-13 mt-16 block rounded-lg px-12 py-8 font-bold"
        onClick={reset}
      >
        다시 불러오기
      </button>
    </Flex>
  );
}

error, reset을 props로 받아서 에러 메시지를 보여주고, 페이지를 reload할 수 있는 버튼을 추가할 수 있다.

또한, 사용자가 원한다면 다시 로그인을 할 수 있도록 로그아웃 버튼도 추가했다.

// src/app/error.tsx
export default function Error({ error, reset }: ErrorProps) {
  return (
    <>
      <BaseError error={error} reset={reset} />
      <Footer lng="ko" />
    </>
  );
}

페이지를 이동할 수 있는 Footer를 추가하여 사용자에게 다른 페이지로 이동할 수 있는 선택권도 줄 수 있다.

2. ErrorBoundary

Error Boundary는 하위 컴포넌트 트리의 어디에서든 Javascript 에러를 기록하여 깨진 컴포넌트 트리 대신 fallback UI를 보여주는 React 컴포넌트이다.

그렇다. 위의 Next.js에서 제공하는 error.js와 매우 유사하다.

error.js를 사용하면 ErrorBoundary는 사용하지 않아도 될까?