Error Code and Exception Handling

Fay Anyatasia
Dekowarehouse Project
4 min readApr 29, 2018

Pernahkah kamu membuka sebuah website lalu tidak menemukan website yang kamu cari tersebut, melainkan hanyalah sebuah kode tampilan kosong 404 Not Found? Ataupun 500 Internal Server Error?

Selamat! (Eh?)

Kamu baru saja menemukan HTTP Status Codes. HTTP Status Code adalah sebuah response code standard yang diberikan oleh web server di internet. Kode ini membantu mengidentifikasi masalah yang menyebabkan sebuah website tidak ter load dengan benar.

Terdapat 5 kategori dari HTTP status code error, tapi terdiri 2 kategori besar

4xx Client Error

HTTP Status Code yang terdapat dalam kategori ini adalah dimana ketika sebuah webpage atau resource tidak bisa di load dengan baik karena mengandung bad syntax atau karena alasan lainnya, kemungkinan disebabkan oleh kesalahan client.

Error code yang sering muncul dalam kategori ini yaitu :

  • 404 (Not Found) : halaman tidak ditemukan. Kemungkinan terdapat kesalahan penulisan URL oleh client
  • 403 (Forbidden) : halaman tidak dapat di akses oleh client, karena halaman/resource yang dituju membutuhkan authorization yang tidak dimiliki client.
  • 404 (Bad Request) : request yang dikirim ke server, somehow tidak benar atau corrupted dan server tidak mampu meresponsenya. Hal ini bisa disebabkan banyak hal. Kesalahan syntax pada URL, atau misalkan ketika mengupload file, file size terlalu besar, dan lain lain.

5xx Server Error

HTTP Status Code yang terdapat dalam kategori ini adalah dimana ketika request sebuah webpage atau resource dipahami oleh server, namun server tidak mampu menampilkan karena sebuah alasan.

Error code yang populer kita temui dari kategori ini yaitu :

  • 500 (Internal Server Error) : Kesalahan berada di internal dari webserver yang kita tuju
  • 503 (Service Unavailable) : Web server sedang tidak available. Bisa jadi disebabkan oleh web server yang terlalu sibuk atau sedang dilakukan maintenance.
  • 502 (Bad Gateway) : Sebuah server di internet mendapat invalid response dari server yang lain.

Dan masih banyak lagi HTTP Status Code yang lainnya, oh iya! Ketika sebuah webpage/resource sukses ditampilkan, HTTP status code nya adalah 200 (OK). Jadi, HTTP Status Code tidak selalu tentang error, tenang saja. Untuk list lengkapnya, bisa dibaca disini.

Untuk menghandle error-error yang mungkin terjadi, dalam bahasa pemrograman yang kita gunakan sudah disediakan kelas exception handling.

Sebenarnya, apa kegunaan dari exception handling ini?

Ketika sebuah exception di throw, maka pasti akan di catch dan handle, atau programnya akan crash. Exception handling sendiri juga menyediakan informasi lebih dibandingkan error code (yang hanya sebuah integer saja). Sebuah function yang gagal dijalankan, bisa jadi kesalahannya justru berada di function yang lain, sehingga dengan adanya exception handling, bisa terlihat jelas mengapa hal tersebut terjadi karena ia akan di pass terus menerus sampai ke top layer.

Nah, pada bahasa yang kami gunakan yaitu React, sudah disediakan kelas khusus yang bernama Error Boundary. Seperti berikut contohnya :

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}

Nantinya function componentDidCatch tersebut berfungsi sebagai catch{} block, namun untuk component. Lalu kelas ErrorBoundary ini juga hanya akan catch error yang berasal dari component dibawahnya didalam tree, tidak bisa untuk error yang berada dalam dirinya sendiri. Error Boundary digunakan seperti berikut:

<ErrorBoundary>
<MyComponent />
</ErrorBoundary>

Implementasi pada kelompok

Kelompok kami juga menerapkan sebuah exception handling ketika client mengetik URL yang salah. seperti misalkan :

Maka, ia akan ter-redirect ke halaman ini :

Hal ini kita terapkan dalam code index.js seperti berikut:

Untuk URL yang tidak didefinisikan didalam router tersebut,maka ia akan langsung ter re-direct ke url 404 yang berisi component ErrorPage.

Kita juga membuat exception handling, jika data tidak ada. Contohnya seperti berikut :

Reference :

--

--