Web atau Aplikasi yang dibangun menggunakan React, secara default, hanya akan menampilkan blank page atau halaman kosong jika terjadi error di production, tentunya itu akan membingungkan User (dan mungkin si Developer yang hanya mendapat laporan issue halaman kosong dari User 😅)

Nah, dalam artikel kali ini saya akan sharing bagaimana cara menangani error yang terjadi pada aplikasi React kita menggunakan library react-error-boundary, sebenarnya bisa aja sih menggunakan fitur Error Boundary bawaan React, cuman harus pakai Class Component sedangkan aplikasi yang kita buat sekarang ini kebanyakan sudah menggunakan Functional Component.

Sebagai contoh, kita akan membuat aplikasi counter yang mana akan menampilkan hasil count dengan 2 digit di belakang koma menggunakan prototype toFixed,

aplikasi tersebut juga memiliki 2 button, jika button yang kiri diklik akan melakukan increment dan jika button yang kanan diklik akan mengubah state count menjadi null sehingga menyebabkan Error pada aplikasi kita karena gagal memanggil prototype toFixed yang mana hanya dimiliki oleh tipe data Number.

Counter Component

Sekarang, kita coba klik tombol "Don't click me", maka akan terjadi error seperti ini :

Counter Component

dan jika kita klik tombol close sebelah kanan atas, maka hanya akan muncul blank page (halaman blank inilah yang akan tampil jika terjadi error di production).

lalu bagaimana cara menampilkan pesan errornya alih-alih hanya menampilkan halaman kosong ?

Caranya, kita wrap semua component kita menggunakan component ErrorBoundary yang berasal dari library react-error-boundary, dan pada props FallbackComponent, kita masukkan component yang ingin dirender ketika terjadi error.

Agar errornya tidak tampil lagi, kita bisa melakukannya dengan dua cara :

• Pertama, menggunakan onReset, kita berikan callback untuk me-reset value dari state count menjadi 0 sehingga tidak akan terjadi error lagi.

onReset

• Kedua, yaitu menggunakan resetKeys, reset keys berisi array dari state2 yang menyebabkan suatu error, dan untuk menghilangkan error-nya kita bisa melakukan mutasi terhadap state yang menyebabkan error tersebut. Pada contoh di bawah ini, errornya akan otomatis hilang dalam 3 detik.

resetKeys

selain onReset, ErrorBoundary juga menerima props onError, gunanya untuk memanggil callback yang kita berikan ketika terjadi error, dalam callback itulah kita bisa melakukan logging, entah hanya sekedar console.log atau logging ke server kita.

Error Logging

Salah satu Fitur yang menarik dari library react-error-boundary (bahkan tidak bisa dilakukan oleh Error Boundary bawaan React) adalah kita bisa membuat custom error, karena tidak semua error tertangkap oleh ErrorBoundary, seperti error saat fetch ke API, event handlers, dan error2 yang mungkin seharusnya terjadi pada aplikasi kita.

di bawah ini adalah contoh bagaimana cara membuat custom error :

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏