[Data Fetching] (6) ErrorHandling Next.js Beta Docs

https://beta.nextjs.org/docs/routing/loading-ui
위 문서에 대한 번역을 진행합니다.

번역시점은 2023-05-03으로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
 
역자의 개인적인 의견에 대한 내용은

이 안에서 이루어집니다.

 

error.js 파일 컨벤션을 사용하면 중첩된 경로에서 런타임 에러를 우아하게 처리할 수 있습니다.

- 경로 세그먼트와 그 중첩된 자식들을 react 에러 바운더리에서 자동으로 래핑합니다.

- 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춘 오류 UI를 생성하여 세분성을 조정할 수 있습니다.

- 앱의 나머지 기능은 유지하면서 영향을 받는 세그먼트에 맞춘 오류 UI를 생성하여 세분성을 조정할 수 있습니다.

- 앱의 나머지 기능은 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리합니다.

- 전체 페이지를 다시 로드하지 않고 오류에서 복구를 시도하는 기능을 추가합니다.

경로 세그먼트 내에 error.js 파일을 추가하고 react 컴포넌트를 내보내서 오류UI를 생성합니다.

'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>
  );
}

How error.js Works

error.js 는 중첩된 자식 세그먼트 또는 page.js 컴포넌트를 감싸는 React Error Boundary를 자동으로 생성합니다.

error.js 파일에서 내보낸 React 컴포넌트가 폴백 컴포넌트로 사용됩니다.

에러 경계 내에서 에러가 발생하면 에러가 포함되고 폴백 컴포넌트가 렌더링됩니다.

폴백 오류 컴포넌트가 활성화되면 오류 경계 위의 레이아웃은 해당 상태를 유지하고 대화형 상태를 유지하며 오류 컴포넌트는 오류를 복구하는 기능을 표시할 수 있습니다.

 

Recovering From Erros

오류의 원인은 일시적인 것일수도 있습니다.

이러한 경우에는 다시 시도하기만 하면 문제가 해결 될 수 있습니다.

오류 컴포넌트는 reset() 함수를 사용하여 사용자에게 오류 복구를 시도하라는 메시지를 표시할 수 있습니다.

이 함수가 실행되면 오류 경계의 내용을 다시 렌더링하려고 시도합니다.

성공하면 폴백 오류 컴포넌트가 다시 렌더링한 결과로 대체됩니다.

 

Neseted Routes

special files로 생성된 react 컴포넌트는 특정 중첩 구조(specific nested hierarchy)로 렌더링됩니다.

예를 들어 layout.js 파일과 error.js 파일이 모두 포함된 두개의 세그먼트가 있는 중첩된 경로는

다음과 같은 단순화된 컴포넌트 계층 구조로 렌더링됩니다.

역주 : 상위 error.js파일과 하위 error.js파일이 모두 표시된다는 의미로 보입니다.

중첩된 컴포넌트 계층 구조는 중첩된 경로에서 error.js 파일의 동작에 영향을 미칩니다.

- 오류는 가장 가까운 상위 오류 경계까지 bubble up(역주: 전파된다는 의미 인듯합니다.) 즉 error.js 파일을 중첩된 모든 하위 세그먼트에 대한 오류를 처리합니다. 경로의 중첩된 폴더에서 error.js 파일을 서로 다른 레벨에 배치하면 다소 세분화된 오류  UI를 구현할 수 있습니다.

- 오류 경계가 해당 레이아웃 컴포넌트 내부에 중첩되어 있기 때문에 error.js 경계는 동일한 세그먼트의 layout.js 컴포넌트에서 발생한 오류를 처리하지 않습니다.

역주 : 그림을 보면 동일한 depth의 layout이 동일한 depth의 errorboundary컴포넌트를 감싸는 형태로 되어있습니다.