𝗘𝗿𝗿𝗼𝗿 𝗕𝗼𝘂𝗻𝗱𝗮𝗿𝗶𝗲𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿
Sebagian besar aplikasi Next.js berjalan dengan baik saat semuanya lancar. Aplikasi tersebut gagal saat terjadi kesalahan. Aplikasi berkualitas tinggi menggunakan error boundaries untuk menangani kegagalan ini dengan baik.
App Router menggunakan model yang berbeda dari Pages Router. Ia mengandalkan React Error Boundaries. Anda menggunakan file error.js untuk menangkap masalah di tingkat rute mana pun.
Cara kerjanya:
• Error tetap berada di dalam boundary error.js terdekat. • Error tidak berpindah ke handler global kecuali jika Anda menginginkannya. • Anda dapat menampilkan layar error yang berbeda untuk bagian aplikasi yang berbeda.
Aturan file error.js:
- Harus berupa Client Component. Gunakan 'use client' di bagian atas.
- Ia menangkap error di segmen tersebut dan semua turunannya.
- Anda mendapatkan fungsi reset untuk mencoba kembali render yang gagal.
Gunakan fungsi reset untuk masalah sementara seperti gangguan jaringan. Jangan gunakan untuk error yang bersifat permanen.
Gunakan global-error.js untuk root layout. error.js standar tidak menangkap error di root layout.js. global-error.js adalah upaya terakhir Anda. Ia menggantikan root layout, sehingga memerlukan tag dan
sendiri.Mengelola berbagai jenis error:
- Gunakan notFound() untuk data yang hilang. Ini akan memicu not-found.js.
- Gunakan throw Error() untuk kegagalan yang tidak terduga. Ini akan memicu error.js.
Pemisahan ini menjaga aplikasi Anda tetap bersih. Pengguna yang mencari postingan blog yang hilang akan melihat halaman 404. Pengguna yang menghadapi crash database akan melihat pesan error.
Saya menggunakan pola ini untuk generator gambar AI. Prosesnya memiliki banyak langkah seperti panggilan API dan unggahan file. Jika satu langkah gagal, error boundary akan menampilkan pesan tertentu. Tombol reset memungkinkan pengguna mencoba lagi tanpa kehilangan prompt mereka.
Struktur yang baik terlihat seperti ini:
• global-error.js: Jaring pengaman terakhir. • error.js: Menangani error tingkat root. • dashboard/error.js: Menangani error di dalam dashboard. • auth/error.js: Menangani error login atau sesi.
Pendekatan ini mencegah satu error kecil merusak seluruh situs web Anda.