Error Handling React Js

Pada proses pengembangan suatu perangkat lunak, tidak dipungkiri akan memungkinkan terjadinya suatu error, baik itu yang disadari ataupun yang kadang kala tidak kita sadari. Error yang terjadi pada perangkat lunak yang kita kembangkan tentunya akan menghambat proses pengembangan perangkat lunak. Bahkan lebih fatalnya lagi, error ini dapat merusak aplikasi atau perangkat lunak yang kita buat.

Salah satu cara untuk mengatasi kemungkinan error yang akan terjadi adalah dengan cara “Error Handling” . Error handling adalah sistem penanganan kesalahan (error) pada berbagai macam keadaan dalam program. Dengan adanya error handling ini maka program akan semakin user friendly bagi para penggunanya, selain itu dengan adanya error handling ini menjadi indikator bahwa kode yang kita buat bisa dikatakan dalam kategori “clean code” .Lantas bagaimana cara kita melakukan penanganan pada kemungkinan error yang akan terjadi pada program kita ?Berikut ini akan saya jelaskan mengenai cara yang baik untuk melakukan penanganan error, dalam hal ini khususnya penanganan error pada React Js.

Menurut buku “ A Handbook of Agile Software” ada beberapa hal yang perlu diperhatikan dalam membuat error handling, agar code yang kita buat tetap dalam kaidah “clean code”. Hal tersebut adalah :

Dalam melakukan handling error sebisa mungkin, hindari pengembalian nilai Null. Karena jika suatu error mengembalikan nilai null, tentunya akan sulit untuk di deteksi permasalahan yang menyebabkan error tersebut, maka dari itu, sebisa mungkin dilakukan wrap terhadap code yang berpotensi mengembalikan nilai Null.

Hindari passing nilai null, karena hal tersebut akan menyebabkan error NullPointerException, hal tersebut tentunya akan membuat bingung ketika kita ingin mengetahui penyebab error tersebut

Sangat disarankan untuk menggunakan exceptions dan try-catch mengapa demikian ? karena apabila kita hanya menggunakan return code, tentunya akan merepotkan ketika error yang harus di handle cukup banyak.

Pada react versi 16, ada cara khusus yang lebih mudah untuk melakukan error handling. Cara ini merupakan konsep baru yang diberikan oleh React 16 untuk melakukan handling terhadap error, konsep itu disebut dengan “error boundary”. Error boundary adalah suatu komponen react yang akan menangkap error pada java script dimanapun pada child component tree, kemudian mencatat error tersebut dan menampilkannya.

berikut ini contoh komponen untuk error boundary pada react:

kemudian komponen diatas dapat digunakan dengan disisipkan pada komponen lain ketika akan rendering:

Pada code diatas terdapat fungsi componentDidCatch(), fungsi tersebut sebenarnya sama seperti catch {} block pada JavaScript tetapi digunakan untuk satu komponen.

Block Try/Catch memang sesuai dengan kaidah clean code dan cukup bagus, namun cara tersebut hanya bekerja dengan baik apabila code kita bersifat imperatif, seperti contoh berikut :

sedangkan pada React, komponen react bersifat deklaratif dimana secara spesifik menunjukan mana yang harus di render seperti contoh berikut:

Cara “Error Boundary” ini akan tetap menjaga sifat deklaratif dari react, dimana jika terjadi kesalahan yang disebabkan oleh setState, akan tetap disebarkan ke batasan terdekat dari error tersebut.

Source :

Robert C. Martin, Clean Code: A Handbook of Agile Software Craftsmanship, Prentice Hall, 2009

Related posts:

We still treat Entrepreneurship as the Taboo we want it to be. The conversation when one presents him or herself as an entrepreneur is always the same, oh you are an entrepreneur, you might fail, you…