Jika Anda telah bekerja dengan React untuk sementara waktu, Anda mungkin menemukan pesan yang berbunyi “Pertimbangkan untuk menambahkan batas kesalahan ke pohon Anda untuk menyesuaikan perilaku penanganan kesalahan.” Anda mungkin telah melihat ini di konsol browser Anda setiap kali komponen Anda menabrak.
React merekomendasikan penggunaan batas kesalahan untuk memberikan pengalaman pengguna yang lebih baik ketika terjadi kesalahan.
Apa itu Error Boundary Class di React?
Batas kesalahan berfungsi seperti coba/tangkap blok di vanilla JavaScript. Perbedaannya adalah mereka menangkap kesalahan yang terjadi pada komponen React. Jika terjadi kesalahan pada komponen UI, React akan meng-unmount pohon di dalam komponen tersebut dan menggantinya dengan UI fallback yang telah Anda tetapkan. Ini berarti bahwa kesalahan hanya memengaruhi komponen di mana kesalahan itu terjadi dan aplikasi lainnya berfungsi seperti yang diharapkan.
Menurut Bereaksi dokumentasi, kelas batas kesalahan tidak menemukan kesalahan dalam:
- Penangan acara.
- Kode asinkron.
- Kode sisi server.
- Kesalahan dilemparkan ke dalam batas kesalahan itu sendiri (bukan anak-anaknya).
Untuk error di atas, Anda dapat menggunakan blok try/catch.
Misalnya, untuk menangkap kesalahan yang terjadi pada pengendali acara, gunakan kode berikut:
fungsiKomponen Acara() {
const [kesalahan, setError] = useState(batal)const handleClick = () => {
mencoba {
// Lakukan sesuatu
} menangkap (kesalahan) {
setError (kesalahan)
}
}
kembali (
<>
<div>{kesalahan? kesalahan: ""}div>
<tombolonClick={handleClick}>Tomboltombol>
)
}
Gunakan batas kesalahan untuk menangkap kesalahan hanya dalam komponen React.
Membuat Kelas Batas Kesalahan
Anda dapat membuat batas kesalahan dengan menentukan kelas yang berisi salah satu atau kedua metode berikut:
- statis getDerivedStateFromError()
- komponenDidCatch()
Fungsi getDerivedStateFromError() memperbarui status komponen setelah error diketahui sementara Anda dapat menggunakan componentDidCatch() untuk mencatat informasi error ke konsol. Anda juga dapat mengirim kesalahan ke layanan pelaporan kesalahan.
Di bawah ini adalah contoh yang menunjukkan cara membuat kelas batas kesalahan sederhana.
kelasErrorBoundarymemanjangReaksi.Komponen{
konstruktor(Atribut) {
super(Atribut);
ini.negara = { kesalahan: PALSU };
}statisgetDerivedStateFromError(kesalahan){
// Perbarui status sehingga render berikutnya akan menampilkan UI fallback.
kembali { kesalahan: kesalahan };
}componentDidCatch (kesalahan, info kesalahan) {
// Catat kesalahan ke layanan pelaporan kesalahan
}render() {
jika (ini.negara.kesalahan) {
// Buat UI cadangan khusus di sini
kembali<h1>Tampaknya ada masalah.h1>;
}
kembaliini.alat peraga.anak-anak;
}
}
eksporbawaan ErrorBoundary;
Saat terjadi kesalahan, getDerivedStateFromError() akan memperbarui status dan akibatnya memicu perenderan ulang yang akan menampilkan UI fallback.
Jika Anda tidak ingin membuat kelas batas kesalahan dari awal, gunakan paket NPM react-error-boundary. Paket ini menyediakan komponen ErrorBoundary yang membungkus komponen yang menurut Anda mungkin menimbulkan kesalahan.
Menggunakan Kelas Batas Kesalahan
Untuk menangani kesalahan, bungkus komponen dengan komponen kelas batas kesalahan. Anda dapat membungkus komponen tingkat atas atau komponen individual.
Jika Anda membungkus komponen tingkat atas, kelas batas kesalahan akan menangani kesalahan yang dilemparkan oleh semua komponen dalam aplikasi React.
<ErrorBoundary>
<Aplikasi/>
ErrorBoundary>
Jika Anda membungkus komponen individual dengan ErrorBoundary, kesalahan dalam komponen tersebut tidak akan memengaruhi cara merender komponen lain.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
Misalnya, kesalahan dalam komponen profil tidak akan memengaruhi bagaimana komponen lain seperti komponen Pahlawan dirender. Meskipun komponen profil mungkin macet, aplikasi lainnya akan berfungsi dengan baik. Ini jauh lebih baik daripada merender layar fallback putih generik yang disediakan oleh React.
Menangani Kesalahan dalam JavaScript
Kesalahan pemrograman dapat membuat frustasi bagi pengembang dan pengguna. Gagal menangani kesalahan dapat mengekspos pengguna Anda ke UI yang jelek dengan pesan kesalahan yang sulit dipahami.
Saat membuat komponen React Anda, buat kelas batas kesalahan baik dari awal atau menggunakan paket react-error-boundary untuk menampilkan pesan kesalahan yang mudah digunakan.
