Menangani error

Pemuatan gagal. Database tidak aktif, rekamannya hilang, atau terjadi error. Tanpa rencana, satu await yang bermasalah bisa membuat seluruh layar ikut bermasalah.

error.jsx adalah kebalikan dari loading.jsx: idenya sama, hasilnya berlawanan. Letakkan file ini di sebelah halaman, dan file ini akan menangkap apa pun yang dilemparkan halaman tersebut saat dirender:

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

Berbeda dengan loading.jsx, komponen ini memiliki satu persyaratan wajib:

'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 harus menjadi komponen client. Alasannya terlihat jelas di JSX: onClick. Tombol untuk mencoba lagi bersifat interaktif, dan interaktivitas membutuhkan komponen yang dikirim ke browser. Jika kamu tidak menyertakan 'use client', kamu akan mendapatkan error event handler dari bab sebelumnya, tepat di halaman yang tugasnya menangani error.

Komponen ini menerima dua props:

• error: Error yang dilempar, sehingga kamu bisa mencatatnya di log
• reset: fungsi yang merender ulang bagian yang gagal. Panggil fungsi ini agar halaman mencoba lagi

reset membuat fitur ini lebih dari sekadar layar error yang lebih baik. Gangguan yang gagal sekali sering kali berhasil pada percobaan kedua, dan pengguna tidak perlu memuat ulang apa pun.

Seperti file khusus lainnya, error.jsx mencakup foldernya sendiri dan semua yang ada di dalamnya, sehingga satu file di dekat root menjadi jaring pengaman untuk seluruh bagian situs.