エラーハンドリング

ロードは失敗することがあります。データベースがダウンしている、レコードが存在しない、例外がスローされるなどです。対策を考えておかないと、たった1つの await の失敗によって画面全体が崩壊してしまいます。

error.jsx は loading.jsx の鏡のような存在です。同じ概念で、逆の結果を扱います。ページの横に配置しておくと、そのページがレンダリング中にスローしたあらゆるエラーをキャッチします：

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

loading.jsx とは異なり、これには1つの厳格な要件があります。

'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 はクライアントコンポーネントである必要があります。その理由は JSX 内の onClick にあります。再試行ボタンはインタラクティビティであり、インタラクティビティにはブラウザに配信されるコンポーネントが必要です。'use client' を付け忘れると、エラーを処理するのが役割であるまさにその page で、前章のエラーハンドラーに関するエラーが発生してしまいます。

2つのプロップを受け取ります：

• error：スローされた Error。ログ出力などに利用できます
• reset：失敗したセクションを再レンダリングする function。これを呼び出すと page は again を試みます

reset は、これを単なる見た目の良いクラッシュ画面以上のものにする機能です。一度失敗した一時的なエラーも、2回目には正常に動作することがよくあり、ユーザーはページをリロードする必要がなくなります。

他の特別なファイルと同様に、error.jsx は自身のフォルダとその下にネストされたすべてをカバーするため、ルート近くにある1つのファイルがサイトセクション全体のエラーハンドリングとして機能します。