[/\/] Error Handling

Next.js를 활용한 개인 과제를 Vercel에서 배포해보았다.

분명 개발 모드에서는 아무 문제 없이 작동하던 프로젝트가 빌드 과정에서 많은 오류를 뱉어냈다.

하단으로도 계속 이어지는 수많은 오류..

 

여러 원인이 있었고 파일 명이 나와있지만, 에러의 최종 페이지(?)만 나타나있었기 때문에

정확히 어느 과정에서 에러가 발생한 건지 파악하기 어려웠다.

 

 

클라이언트 사이드 에러 처리

 

클라이언트 컴포넌트는 useQuery를 통해 에러 처리를 하고 있었다.

또한 클라이언트 요청을 처리하는 라우터 핸들러에서도 에러 처리를 하고 있었다.

// rotation > page.tsx

...
export default function Rotationpage() {
  const { data: imgUrl, isPending, isError, error } = getImgUrl();
  const { data: rotation = [] } = getRotation();

  if (isPending) {
    return <Loading />;
  }

  if (isError) {
    return (
      <>
        <div>에러가 발생했습니다!</div>
        <p>에러:{error.message}</p>
      </>
    );
  }
...

 

// api > rotation > route.ts

// 로테이션 API 라우트 핸들러 + 필터
export const GET = async (): Promise<NextResponse> => {
  try {
    const res = await fetch(ROTATION_API_URL, {
      headers: {
        "X-Riot-Token": process.env.RIOT_API_KEY!,
      },
    });

    // 사용자 요청 에러
    if (!res) {
      return NextResponse.json(
        { message: "error! 로테이션 챔피언 정보를 찾을 수 없습니다!" },
        { status: 400 },
      );
    }

    // 필터
    const rotationData: ChampionRotation = await res.json(); // freeChampionIds 배열 포함 객체
    const championData: Champions[] = await fetchChampionList(); // 모든 챔피언 리스트 배열
    const filterData: Champions[] = championData.filter((el) => {
      return rotationData.freeChampionIds.includes(parseInt(el.key));
    }); // 챔피언 키를 포함한 로테이션 아이디를 챔피언 리스트에서 filter
    return NextResponse.json(filterData, { status: 200 });
  } catch (error) {
    console.log("로테이션 라우트 핸들러 에러 발생", error);
    // 서버 에러
    return NextResponse.json(
      { message: "error! 로테이션 페이지를 읽을 수 없습니다!" },
      { status: 500 },
    );
  }
};

 

 

서버 사이드 에러 처리

 

그럼 서버 컴포넌트는 에러 처리를 어디서, 어떻게 해야할까?

서버 컴포넌트 내에서 직접 API 데이터를 페칭하고 처리하는 서버 액션과 서버 컴포넌트에서 에러 처리를 할 수 있다.

 

 

📍시도 1. 서버 액션에서 try...catch 문으로 에러 처리

다음과 같은 서버 액션에서 try catch를 활용해보았다.
그러나 'Champion[]의 타입에 error가 없다'는 오류가 났다.

Promise<Campions[]>로 설정해둔 제네릭 타입에 반해 catch문의 return의 값이 'error' 타입이라 오류가 났다.

// utils > serverApi.ts

// 챔피언 목록 패칭
export async function fetchChampionList(): Promise<Champions[]> {
  try {
    const chamUrl = await CHAMPION_LIST_URL();
    const res = await fetch(chamUrl, { next: { revalidate: 86400 } });
    const { data } = await res.json();

    return Object.values(data);
  } catch (error) {
    console.log("챔피언 목록 가져오기 실패", error);
    return { error: "챔피언 목록 데이터를 불러오는 중 문제가 발생했습니다!" };
  }
}

 

따라서 서버 액션에서는 에러를 throw하고, 해당 서버 액션을 사용하는 컴포넌트에서 에러를 받아야 했다.

 

 

📍시도 2. 서버 액션에서 에러 throw

throw new Error를 통해 에러를 던졌다.

// 챔피언 목록 패칭
export async function fetchChampionList(): Promise<Champions[]> {
  const chamUrl = await CHAMPION_LIST_URL();
  const res = await fetch(chamUrl, { next: { revalidate: 86400 } });
  const { data } = await res.json();

  //해당 페이지로 에러 보내기
  if (!res.ok) {
    throw new Error("챔피언 목록 데이터를 불러오는 중 문제가 발생했습니다!");
  }
  return Object.values(data);
}

 

 

🤔에러를 throw 할 때 'new Error'를 사용하는 이유

• new Error("메세지")를 사용하면 더 많은 정보를 포함한 표준 에러 객체 생성
  

📍throw "문자열"

• 사용 : throw "에러 발생!";
• 실행 결과 : Uncaught (in promise) 에러 발생!
• 문제점 
  • throw한 값이 단순한 문자열이라 에러 객체가 아님
  • 스택 트레이스(stack trace)가 제공되지 않음 → 디버깅 어려움
  • catch에서 error.message을 사용할 수 없음 (error 자체가 문자열이기 때문)

 

📍throw new Error("에러 발생")

• 사용 : throw new Error("에러 발생!");
• 실행 결과
  • Uncaught (in promise) Error: 에러 발생!
        at fetchChampionList (actions.ts:5)
        at async handleClick (component.tsx:10)
• 장점
  
  • Error 객체를 생성하여 표준적인 에러 처리 가능
  • 스택 트레이스(stack trace) 제공 → 에러가 발생한 위치를 쉽게 찾을 수 있음
  • catch(error)에서 error.message를 사용하여 메시지만 추출 가능

 

 

에러 핸들링 (error.tsx)

이제 throw한 에러를 컴포넌트에서 받으면 되는데, 모든 컴포넌트마다 try catch를 사용해서 에러를 받아야했다..

그때 발견한 것이 '에러 핸들링' 이었다.

 

넥스트 공식문서에는 다음과 같이 나와있다.

에러는 예상된 에러와 예상치 못한 예외 두 가지 범주로 나눌 수 있습니다:

- 예상된 에러를 반환 값으로 모델링: 서버 액션에서 예상된 에러를 try/catch로 처리하는 것을 피하십시오.
  useActionState를 사용하여 이러한 에러를 관리하고 클라이언트에 반환합니다.

- 예상치 못한 에러는 에러 경계로 처리: error.tsx 및 global-error.tsx 파일을 사용하여 에러 경계를 구현하고 예상치 못한 에러를 처리하며 대체 UI를 제공합니다.

 

try catch를 사용하면 예상된 에러(thorw한 에러)만을 처리할 수 있다고 한다.

error.tsx 및 global-error.tsx 파일을 통해 예상치 못한 에러까지 핸들링을 할 수 있다.

 

 

error.tsx는 세그먼트 내에 단 한 개의 파일을 두어 해당 세그먼트 내부 페이지의 에러 처리를 담당한다.

파일명을 정확히 기재해야 Next에서 자동으로 인식할 수 있다.

 

 

🤔페이지에서 직접 에러를 받지 않고 error.tsx에서 일괄적으로 처리가 가능한가?

그렇다!
error.tsx에서만 에러를 처리하는 구조로, 페이지에서는 에러를 직접 처리할 필요가 없다.

페이지에서 데이터 요청이 실패하면, error.tsx 파일이 그 에러를 처리하고, 사용자에게 적절한 UI를 보여주게 된다.

 

🤔파일 위치에 따른 차이는? (해당 페이지의 세그먼트 내부와 app 하위 )

세그먼트 내부에 위치한 경우 해당 페이지에만 적용하는 에러 컴포넌트를 작성할 수 있다.

app에 위치한 경우 하위의 모든 페이지에 동일한 에러 컴포넌트를 적용할 수 있으며 코드 중복을 방지한다.

 

따라서 나는 app 경로에 error.tsx 파일을 두어 모든 페이지에 동일한 에러 컴포넌트를 제시하도록 하였다.

// rotation > page.tsx

"use client";

import { getImgUrl, getRotation } from "../hooks/quries";
import Card from "@/_components/Card";
import Loading from "../loading";

export default function Rotationpage() {
  const { data: imgUrl, isPending } = getImgUrl();
  const { data: rotation = [] } = getRotation();

  if (isPending) {
    return <Loading />;
  }

  return (
    <main className="m-[50px]">
      <h1 className="flexCenter title mt-[80px] text-[30px]">
        Champion Rotation (This week for free!)
      </h1>
      <div className="itemGrid mt-[30px] auto-rows-[minmax(200px,auto)]">
        {rotation.map((champion) => (
          <Card
            key={champion.key}
            id={champion.id}
            name={champion.name}
            title={champion.title}
            image={champion.image}
            img_Url={imgUrl ?? ""} // 에러 처리 생략 시, data는 undefined가 될 가능성
          />
        ))}
      </div>
    </main>
  );
}

 

useQuery 로 에러 상태 관리하기

또한, error.tsx는 (거의 모든 경우) 클라이언트 컴포넌트여야 한다.

error.tsx는 '다시 시도' 버튼과 같이 사용자와의 상호작용이 필요하기 때문에 이벤트 핸들러를 사용할 수 있는 클라이언트 컴포넌트여야 한다는 점 !!

따라서 useQuery로도 에러 상태를 관리할 수 있다.

// app > error.tsx

"use client";

import { getChampionError } from "./hooks/quries";
import Loading from "./loading";

export default function Error() {
  const { error, isPending, isError, refetch } = getChampionError();

  if (isPending) {
    return <Loading />;
  }

  if (isError) {
    return (
      <div className="flexCenter mt-[300px] flex-col gap-8">
        <h1 className="title text-[50px]">에러 발생!</h1>
        <p className="text-white">에러 메세지 : {error.message}</p>
        <button
          onClick={() => refetch()}
          className="rounded-md border-2 border-emerald-100 p-4 text-white"
        >
          다시 시도
        </button>
      </div>
    );
  }
}

 

 

결과적으로 클라이언트 컴포넌트에서 useQuery로 관리하던 에러 상태를 error.tsx에서 관리할 수 있게 되었다.

app 경로에 error.tsx를 두어 클라이언트/서버 에러를 일괄적으로 처리가 가능해졌다.

 

마찬가지로 loading.tsx 파일도 동일한 방식으로 app에 두어 모든 페이지에 적용하였다.

// app > loading.tsx

export default function Loading() {
  return (
    <div className="m-auto my-5 flex h-[200px] w-[200px] items-center justify-center">
      <div className="h-12 w-12 animate-spin rounded-full border-4 border-white/30 border-t-white"></div>
    </div>
  );
}