에러 처리

로드에 실패할 수 있습니다. 데이터베이스가 다운되었거나, 레코드가 사라졌거나, 무언가 예외를 발생시킵니다. 대책이 없다면 잘못된 await 하나로 인해 전체 화면이 작동하지 않게 됩니다.

error.jsx는 loading.jsx의 거울 이미지입니다. 개념은 같지만 결과는 반대입니다. 페이지 옆에 두면 해당 페이지가 렌더링되는 동안 발생하는 모든 에러를 포착합니다:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

loading.jsx와 달리 한 가지 필수 요구사항이 있습니다:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx는 client 컴포넌트여야 합니다. 그 이유는 jsx 코드 내의 onClick에 바로 나와 있습니다. 재시도 button은 상호작용이며, 상호작용은 브라우저로 전송되는 컴포넌트가 필요합니다. 'use client'를 누락하면 에러를 처리하는 것이 목적인 바로 그 page에서 이전 장에서 보았던 이벤트 핸들러 Error가 발생하게 됩니다.

두 개의 prop을 받습니다:

• error: 발생한 Error 객체로, 에러를 기록하는 데 사용할 수 있습니다
• reset: 실패한 섹션을 다시 렌더링하는 function입니다. 이를 호출하면 page가 다시 시도됩니다

reset은 이 화면을 단순히 보기 좋은 오류 화면 이상으로 만들어 주는 요소입니다. 한 번 실패했던 일시적인 오류는 두 번째에 정상 작동하는 경우가 많으며, 사용자는 아무것도 새로고침할 필요가 없습니다.

다른 특수 파일들과 마찬가지로 error.jsx는 자신이 속한 폴더와 그 아래에 중첩된 모든 항목을 다루므로, 루트 근처에 있는 파일 하나가 사이트 전체 섹션을 위한 안전망 역할을 합니다.