error.tsx를 app 폴더 바로 아래에 둬도...

한 입 크기로 잘라먹는 Next.js(15+)

6.5) 에러 핸들링 (error.tsx)

해결된 질문

작성

error.tsx를 app 폴더 바로 아래에 둬도 footer에서 발생하는 오류는 잡히지 않습니다. app layout에서 발생하는 에러는 error.tsx로 잡히지 않는걸까요?

react typescript next.js

답변 3

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

루트 레이아웃에서 발생하는 오류를 핸들링 하는 방법과 예제 보여드릴게요

우선 항상 오류를 발생시킬 수 있도록, 루트 레이아웃의 Footer 컴포넌트를 다음과 같이 수정합니다.

async function Footer() {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`,
    { cache: "no-store" }
  );
  ...
}

cache 옵션을 "no-store"로 수정했습니다. 그 결과 이제 인덱스 페이지를 새로고침 할 때 마다 Footer 컴포넌트에서 데이터 페칭이 이루어져 예외가 발생하게 될 겁니다.

다음으로 위 오류를 해결할 수 있는 global-error.tsx 파일을 생성하고 다음과 같이 작성합니다.

"use client";

export default function Error() {
  return (
    <html>
      <body>
        <h2>Something went wrong!</h2>
      </body>
    </html>
  );
}

공식문서를 보셨다고 했으니 이미 아시겠지만 global-error.tsx의 에러 컴포넌트에는 HTML, BODY 태그가 필수적으로 포함되어야 합니다. 루트레이아웃을 대체할 것이기 때문이죠 😃

글로벌 에러 설정도 마쳤다면 우선 백엔드 서버를 가동중인 상태로 프로젝트를 빌드합니다. 에러 핸들링을 확실히 확인하시려면 개발 모드가 아닌 프로덕션 모드에서 확인하시는게 좋기 때문에 먼저 정상적으로 빌드 과정을 거치겠습니다.

빌드가 완료되면 npm run start로 Next.js 앱을 프로덕션 모드로 실행합니다. 그 후 백엔드 서버를 종료하고 인덱스 페이지에 들어가보면 다음과 같이 global-error.tsx가 에러를 핸들링 하는 화면을 확인할 수 있습니다.

sunwon lee

질문자

공식문서를 보고 global-error.tsx를 둬도 에러가 안 잡히네요 ㅠ

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. sunwon lee님.

Next.js에서 error.tsx 파일을 배치하여 에러 핸들링을 구현할 때, 위치에 따라 어느 범위까지 에러를 잡을 수 있는지가 달라집니다. 일반적으로 app 디렉토리 하위의 경로에 있는 error.tsx 파일은 해당 경로 하위에서 발생하는 에러를 잡을 수 있습니다.

귀하의 상황에서 footer에서 발생하는 오류를 핸들링하지 못하는 이유는 다음과 같을 수 있습니다:

error.tsx 파일의 위치: footer 컴포넌트에서 발생한 오류를 잡으려면, footer 컴포넌트가 속한 디렉토리 또는 상위 디렉토리 경로에 error.tsx가 위치해야 합니다. 만약 footer가 여러 경로에 걸쳐져 있거나, app 폴더 없이 layout.tsx에서 직접 footer가 사용되고 있다면, 해당 위치에 오류를 핸들링할 수 있도록 error.tsx 파일을 다시 설정해야 합니다.
Next.js 에러 전파: Next.js에서는 부모 컴포넌트에서 처리되지 않은 에러가 컴포넌트 트리 상위로 전파됩니다. 하지만 이때 error.tsx는 자신이 있는 경로의 하위에서 발생한 에러만 잡을 수 있기 때문에, 부모 컴포넌트나 layout 단계에서 에러가 발생할 경우 이를 캐치하지 못할 수 있습니다.

이와 관련된 유사한 질문에서 좀 더 상세한 설명을 참고하실 수 있습니다:
- 포괄적 에러 핸들링 error.tsx이 정상 작동 하지 않습니다

이와 같은 맥락에서 특정 위치의 에러를 잡기 위해선 에러 핸들러 error.tsx를 적절한 위치에 배치하는 것이 중요하며, 해당 경로의 하위 컴포넌트에서 발생하는 에러만 잡을 수 있음을 염두에 두셔야 합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

error.tsx를 app 폴더 바로 아래에 둬도...