Error Code & Exception Handling?

Pernah mendapatkan 404 Not Found atau 500 Internal Server Error saat berselancar di internet? Tahukah Kamu, dua hal tersebut merupakan sebuah kode atau yang biasa disebut juga dengan Error Code?

Error Code

Pada dunia computer programming, error code merupakan sebuah pesan yang menunjukkan status dari suatu aplikasi perangkat lunak. Tujuannya, tentu untuk mengidentifikasi masalah yang terjadi pada software, baik pada hardware, software, ataupun kesalahan input dari penggunanya.

Sebenarnya, terdapat banyak tipe dari error code. Salah satu yang cukup sering dibicarakan adalah HTTP Status Code, yaitu sebuah response code yang diberikan oleh web server di internet. Response code ini terdiri dari IETF Responds for Comments (RFC), beberapa spesifikasi lain, dan kode tertentu yang digunakan pada aplikasi HTTP.

HTTP Response Status pun juga terdiri dari beberapa tipe yang dapat dibedakan dari digit pertamanya. Namun, dalam hal error code, terdapat dua tipe dari HTTP Response Status. Ingin tahu apa saja error code tersebut?

4xx Client Errors

Response Status ini terjadi pada situasi-situasi tertentu dimana error disebabkan oleh client. Secara umum, hal ini terjadi ketika suatu halaman web atau resource tidak dapat dimuat dengan baik karena berbagai alasan, seperti bad syntax, dll. Terdapat beberapa jenis error code yang dikategorikan pada 4xx Client Errors, berikut adalah yang sering terjadi:

1. 400 Bad Request: Error yang terjadi ketika server tidak dapat memproses permintaan yang dilakukan oleh client dimana sering terjadi saat ada kesalahan syntax pada url, atau file yang digunakan (untuk upload atau download) terlalu besar.
2. 403 Forbidden: Kode ini muncul ketika request yang dilakukan valid tetapi server menolak tindakan tersebut. Akibatnya halaman yang dituju tidak dapat dimuat karena membutuhkan authorization yang tidak dimiliki oleh client.
3. 404 Not Found: Terjadi apabila halaman yang dicari tidak ditemukan. Biasanya muncul ketika user menggunakan url yang salah saat membuka suatu page.

5xx Server Errors

Response Status dengan digit pertama ‘5’ menunjukkan bahwa request yang dilakukan dapat diterima oleh server, namun server mampu menampilkan halaman yang dituju karena alasan tertentu. Berikut adalah error code yang sering terjadi pada kategori ini:

1. 500 Internal Server Error: Kesalahan yang terjadi pada internal web server yang dituju.
2. 502 Bad Gateway: Server yang dituju berperan sebagai gateway atau proxy dan mendapatkan invalid response dari upstream server.
3. 503 Service Unavailable: Error terjadi apabila web server yang dituju tidak available karena alasan tertentu, seperti web server yang sibuk atau sedang maintenance

Perlu diketahui bahwa HTTP Response Status tidak melulu tentang error loh! Misalnya, 200 menunjukkan status sukses. Selengkapnya bisa baca di sini

Lalu, jika terjadi error kita harus apa?

Exception Handling

Di dunia programming, exception handling merupakan salah satu kiat yang dilakukan untuk mengelola error-error yang mungkin terjadi pada aplikasi. Dengan error handling, dapat terlihat jelas mengapa suatu kesalahan terjadi. Mengapa demikian?

Jadi, ketika melakukan throw sebuah exception, hal tersebut nantinya akan di tangkap (catch) dan di-handle, otherwise program yang dijalankan akan crash. Meskipun error code biasanya berjalan beriringan dengan exception handling, namun exception handling dapat menyediakan informasi lebih. Tidak hanya sebuah integer yang menunjukkan status code, hal ini juga dapat menjelaskan ketika terjadi kegagalan pada suatu fungsi. Sebuah fungsi yang tidak dapat dijalankan bisa jadi berasal dari kesalahan yang diakibatkan oleh function lain. Dalam hal inilah, exception handling sangat berperan karena akan menunjukkan informasi tersebut yang di pass terus-menerus hingga ke top layer.

Wah menarik, lalu bagaimana implementasinya?

Pada project Dekowarehouse, framework yang digunakan adalah ReactJS dimana telah menyediakan kelas khusus yang bernama ErrorBoundary. Berikut adalah contoh implementasinya:

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;
  }
}

Fungsi componentDidCatch pada class tersebut memiliki fungsi sebagai catch block untuk component. Selanjutnya class ErrorBoundary akan menangkap error apabila terjadi pada component yang berada di dalam tree dari class tersebut. Lebih jelasnya dapat dijelaskan sebagai berikut:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Dalam hal tersebut berarti apabila terjadi error pada MyComponent, nantinya akan dicatch dan dihandle oleh class ErrorBoundary.

Salah satu Exception Handling yang dilakukan pada project ini adalah ketika user mencoba mengakses url yang salah.

Error Page Dekowarehouse Project

Untuk dapat menampilkan hal tersebut, perlu disediakan route menuju page error tersebut. Hal tersebut dilakukan dengan cara berikut:

<BrowserRouter>
  <Route exact path='/404/ component {ErrorPage} />
</BrowserRouter>

Maksudnya, apabila url yang dituju tidak terderfinisikan pada program, maka akan mendapatkan code 404 yang merupakan page dengan component ErrorPage.

Bagaimana? Menarik bukan? Yuk simak terus informasi dari Dekowarehouse Project!