Mengatasi Error pada Javascript dengan Try and Catch

Pada artikel sebelumnya saya pernah membahas macam-macam error pada javascript. Sekarang, saya coba bahas bagaimana cara handle macam-macam error tersebut pada javascript dengan Try and Catch.

Sama seperti bahasa pemrograman lainnya, Java, PHP, .NET memiliki fitur menangkap error agar proses setelah error tidak berhenti. Karena kenapa ? ketika error muncul, code setelah error itu tidak akan dijalankan oleh compiler kecuali yaa kita main handle Try n Catch nya.

Format Try n Catch pada Javascript hampir sama seperti bahasa Java atau PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
try {
   // blok try
}
[catch ( variable_error_1 if tipe_error_1 ) {
   // blok catch 1 jika tipe_error_1 terjadi pada blok try
   // variable_error_1 ini akan digunakan untuk mengetahui property dari error
}]
...
// banyak handle tipe_error
[catch (variable_error_2 if tipe_error_2) {
   // blok catch 2 jika tipe_error_2 terjadi pada blok try
}]
[finally {
   // blok finally
}]

Penjelasan :

  1. Blok Try, biasanya kita sisipkan code javascript yang mungkin terjadi error
  2. Blok Catch, pada blok inilah yang akan menangkap error yang terjadi pada blok Try apabila pada blok Try si error muncul. Secara default, kita bisa ambil semua jenis error tanpa harus menuliskan jenis error.

    Contoh dibawah adalah menangkap error yang bertipe error “TypeError”.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    try {
       // blok try
    }
    [catch ( e if e instanceof TypeError ) {
       // blok catch 1 jika tipe error TypeError terjadi pada blok try
       // variable error e ini akan digunakan untuk mengetahui property dari error
    }]
    [finally {
       // blok finally
    }]

    Pada kode diatas, error akan ditangkap oleh si Catch jika variable error “e” bertipe error “TypeError”. Lalu bagaimana kalau terjadi error selain tipe error “TypeError” ?? Secara otomatis, si Catch tidak akan menangkap tipe error selain “TypeError”.

    Cara yang paling aman adalah menangkap semua error tanpa kita batasi error itu tipe apa. Berikut kode contohnya.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    try {
       // blok try
    }
    [catch ( e ) {
       // blok catch 1 jika tipe error apapun terjadi pada blok try
       // variable error e ini akan digunakan untuk mengetahui property dari error
    }]
    [finally {
       // blok finally
    }]

    Pada kode diatas, apapun error yang terjadi pada blok Try, akan selalu tertangkap oleh si Catch.

  3. Blok Finally, Blok finally ini digunakan untuk apapun yang terjadi pada blok Try, baik itu error atau tidak, akan selalu dijalankan.

Mari kita coba demo sample yang akan mungkin perjelas penjelasan diatas. Saya buatkan file demo1.html seperti dibawah ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>Demo 1</title>
    </head>
    <body>
        <script>
            try {
                var adiputra = persons;
       } catch ( e if e instanceof TypeError) {
                console.log( e );
            } finally {
                console.log( 'blok finally' );
            }
       alert(‘test’);
        </script>        
    </body>
</html>

Pada contoh diatas, saya buatkan sampel jika salah satu variable (persons) belum di deklarasikan. Jika kode ini dijalankan maka akan terlihat error pada firebug seperti pada gambar dibawah ini.

Try n Catch Javascript

Akan terlihat error bertipe “ReferenceError”, sedangkan tipe error yang dihandle pada Catch hanya bertipe TypeError. Dan alert(“test”) tidak dieksekusi dikarenakan terjadi error.

Baik, sekarang bagaimana kalau kita tangkap si error tersebut dengan mendefenisikan dengan tipe ReferenceError ? Coba lihat demo2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>Demo 2</title>
    </head>
    <body>
        <script>
           
            try {
                var adiputra = persons;

            } catch ( e if e instanceof ReferenceError ) {
                console.log( e );
            } finally {
                console.log( 'blok finally' );
            }

            alert("test");

        </script>        
    </body>
</html>

Kalau dijalankan kode diatas, alert akan dieksekusi karena penangkapan error yang terjadi pada blok try benar-benar bisa di-catch sesuai dengan tipe error yang terjadi.

Kalau teman-teman perhatikan pada console firebug, baik error atau tidak blok finally selalu ter-eksekusi. Hal ini penting sekali untuk proses transaction jika memungkinkan dengan javascript atau ajax.

Sampai sini, semoga berguna dan bisa jadi tambahan handle error di javascript dengan try and catch yaa.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: