#9. Error handling

예를 들어 #8에서 테스트 했던 코드중에 MovieVidios fetch 를 처리 하는 도중 오류가 발생했을 경우

해당 페이지 전체는 오류로 인해 페이지를 표시 할 수 없게 된다. 

이때 error.tsx파일을 이용하여 애러를 처리 할 수 있다

 

(movies)/movies/[id]/page.tsx 

import { Suspense } from "react";
import MovieInfo from "../../../components/movie-info";
import MovieVideos from "../../../components/movie-videos";

export const metadata = {
  title: "Movie Detail",
}

export default async function MovieDetail({ 
  params,
}: { 
  params: Promise<{ id: string }> 
}) {
  // 내부에서 구조 분해 할당
  const { id } = await params; 

  return (
    <div>
      <h1>Movie Detail Page</h1>
      <Suspense fallback={<h3>Loading movie info</h3>}>
        <MovieInfo id={id} />
      </Suspense>
      <h2>Videos</h2>
      <Suspense fallback={<h3>Loading movie videos</h3>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  )
}

 

error.tsx 

 

애러가 발생한 부분을 error.tsx 에서 리턴한 메시지로 표시하고 나머지 부분은 정상 출력 되는것을 확인 할 수 있다.

 

해당 파일은 해당 폴더에 속한 pages.tsx 에만 적용이 되며 다른 페이지에서도 적용하려면 별도록  error.tsx를 작성해 주어야 한다.

 

error를 처리하는 기법은 다양한 case가 존재 하기 때문에 후에 다시 정리 하도록 한다.