Next.js Error Handling

error.js 파일을 만들어 에러 발생 시 나올 페이지와 에러처리 로직 작성해보기로!!(use client)

 

error.js 는 react Error Boundary 를 생성해 중첩된 경로에서 런타입 오류를 처리할 수 있도록 도와준다고 한다.

 

❓원리
중첩된 하위 세그먼트와 해당 하위 항목을 자동으로 래핑해 React Error Boundary를 생성하고 오류가 발생하면 해당 세그먼트로 격리되서 나머지 앱은 정상적으로 동작

 

 

error 페이지 경로

app/global-error.tsx 또는 그룹라우팅 안에 (page)/error.tsx

'use client'; // Error components must be Client Components

import { useEffect } from 'react';
import { IoLogoSnapchat } from 'react-icons/io';

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div className="responsiveHeight item-center flex flex-col justify-center text-center">
      <div>
        <IoLogoSnapchat className=" mx-auto mb-4 text-9xl text-button-focus-color" />
        <h2 className="text-3xl font-semibold text-point-purple">Something went wrong!</h2>
        <p className="mt-4 font-semibold text-gray-500">해당 페이지를 가져오던 중 문제가 생겼습니다.</p>
        <p className="mx-auto mt-8 max-w-lg text-xs text-input-border-color">
          Error Message: {error?.message || '없음'}
        </p>
        <div className="mt-8">
          <button
            className="rounded-lg bg-point-purple px-4 py-2.5 text-white hover:bg-button-hover-color hover:shadow-lg"
            onClick={
              // Attempt to recover by trying to re-render the segment
              () => reset()
            }
          >
            다시 시도하기
          </button>
        </div>
      </div>
    </div>
  );
}

 

error.js

 

404 페이지 파일 경로

app/not-found.tsx

'use client';

import { useRouter } from 'next/navigation';
import { IoLogoSnapchat } from 'react-icons/io';

export default function NotFound() {
  const router = useRouter();
  const handleGoMain = () => {
    router.replace('/');
  };
  return (
    <div className=" item-center flex h-screen flex-col justify-center text-center">
      <div>
        <IoLogoSnapchat className=" mx-auto mb-4 text-9xl text-button-focus-color" />
        <h2 className="text-2xl font-semibold text-point-purple lg:text-3xl">Could not find requested resource</h2>
        <p className="mt-4 font-semibold text-gray-500">요청하신 페이지를 찾을 수 없습니다.</p>
        <div className="mt-8">
          <button
            onClick={handleGoMain}
            className="rounded-lg bg-point-purple px-4 py-2.5 text-white hover:bg-button-hover-color hover:shadow-lg"
          >
            홈으로 돌아가기
          </button>
        </div>
      </div>
    </div>
  );
}

404 page

 

 

공홈 error.js

https://nextjs.org/docs/app/api-reference/file-conventions/error#not-foundjs

File Conventions: error.js | Next.js

 

공홈 not-found

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

File Conventions: not-found.js | Next.js