Next.js 13 Error Handling

참고

posts - [id] 안에 있는 page.tsx 파일에서 에러가 발생한다면,
가장 가까운 Error Boundary 활성화가 된다.

(이를 잘 활용하여 특정 세그먼트에 맞는 오류 UI 생성할 수 있다.)

일부러 중첩된 경로인 posts - [id] 안에 error.tsx 파일 생성

error. tsx

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

import { useEffect } from "react";

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

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  );
}

page.tsx

import React from "react";

async function getPost(postId: string) {
  const res = await fetch(
    `http://dersdsd`,
    // 캐시된 데이터를 일정 간격으로 재검증
    { next: { revalidate: 10 } }
  );

  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }

  const data = await res.json();
  return data;
}
const PostDetailPage = async ({ params }: any) => {
  const post = await getPost(params.id);
  return (
    <div>
      <h1>posts/{post.id}</h1>
      <div>
        <h3>{post.title}</h3>
        <p>{post.created}</p>
      </div>
    </div>
  );
};

export default PostDetailPage;

일부러 잘못된 URL에 요청을 보내 에러를 만들어 냈다.

결과 화면

error.tsx 파일에 구현한 오류 UI를 확인할 수 있다.