[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(컴포넌트 오류 처리)

📌 error.tsx

• 컴포넌트에서 발생한 예상치 못한 오류 처리한다.
• error.tsx는 client 컴포넌트로 만들어야 한다.
• [그림 1]은 error.tsx를 적용하지 않은 경우이다.

[그림 1] 개발 모드에서 보여지는 오류 메시지. 프로덕션 모드에서는 이렇게 상세하게 오류가 표시되지 않는다.

 

// src/app/error.tsx

"use client"; // "use client"를 반드시 작성해야 한다.
import React from "react";

interface Props {
  error: Error;
  reset: () => void;
}

const ErrorPage = ({ error, reset }: Props) => {
  console.log("Error : ", error); // 실제 애플리케이션에서는 콘솔 찍기 대신 로그를 영구적으로 남기면 된다.
  return (
    <>
      <div>예상치 못한 오류가 발생하였습니다!</div>
      {/* reset() 메서드를-사용자가-과도하게 사용하면 불필요한 오류 로그가 여러번 기록되고,
      좋지 않은 사용자 경험을 줄 수 있다. 따라서 제한적으로 사용하는 것이 좋겠다. */}
      <button className="btn" onClick={() => reset()}>
        Retry
      </button>
    </>
  );
};

export default ErrorPage;