Error Handling di JavaScript: Teknik Debugging dan Penanganan Kesalahan

Pernahkah Anda merasa frustrasi saat program JavaScript yang Anda tulis tiba-tiba berhenti berjalan tanpa alasan yang jelas? Atau mungkin Anda sering melihat pesan error panjang di console browser, tetapi tidak tahu harus mulai dari mana untuk memperbaikinya?

Tenang, Anda tidak sendirian. Banyak pengembang pemula merasa kebingungan menghadapi error di JavaScript. Padahal, kemampuan untuk menangani dan men-debug error adalah salah satu keterampilan terpenting dalam dunia pemrograman. Tanpa pemahaman yang baik, waktu Anda bisa habis hanya untuk mencari tahu “kenapa kode ini nggak jalan?”

Di artikel ini, Anda akan belajar langkah demi langkah:

• Apa itu error handling di JavaScript dan mengapa penting.
• Jenis-jenis error yang sering terjadi.
• Cara menggunakan try…catch, throw, dan finally.
• Teknik debugging menggunakan browser console.
• Tips praktis untuk mencegah kesalahan umum di masa depan.

Apa Itu Error Handling di JavaScript?

Error handling adalah proses mendeteksi, menangkap, dan menangani kesalahan yang terjadi saat program dijalankan. Dalam JavaScript, error bisa muncul karena berbagai alasan—mulai dari kesalahan sintaks, variabel yang tidak didefinisikan, hingga logika program yang salah.

Tanpa mekanisme penanganan error yang baik, program bisa berhenti secara tiba-tiba, dan pengguna tidak akan tahu apa yang terjadi.

Jenis-Jenis Error di JavaScript

Berikut beberapa jenis error umum yang sering ditemui:

• SyntaxError – Kesalahan pada struktur kode, seperti tanda kurung atau titik koma yang hilang.

console.log("Hello World" // lupa tanda tutup kurung

console.log("Hello World" // lupa tanda tutup kurung

• ReferenceError – Terjadi ketika Anda menggunakan variabel yang belum didefinisikan.

console.log(username); // username belum dideklarasikan

console.log(username); // username belum dideklarasikan

• TypeError – Muncul saat Anda melakukan operasi pada tipe data yang tidak sesuai.

let number = 10;
number.toUpperCase(); // Error, karena number bukan string

let number = 10;
number.toUpperCase(); // Error, karena number bukan string

• RangeError – Terjadi ketika nilai berada di luar rentang yang diizinkan.

new Array(-5); // Nilai negatif tidak diizinkan

new Array(-5); // Nilai negatif tidak diizinkan

1. Menggunakan try…catch

1. Mengambil Data dari Server (GET Request)

Blok try...catch memungkinkan Anda menjalankan kode yang berpotensi error tanpa menghentikan seluruh program.

Contoh sederhana:

try {
  let result = JSON.parse('{"name":"Botb"}');
  console.log(result.name);
} catch (error) {
  console.error("Terjadi kesalahan:", error.message);
}

try {
  let result = JSON.parse('{"name":"Botb"}');
  console.log(result.name);
} catch (error) {
  console.error("Terjadi kesalahan:", error.message);
}

Penjelasan:

Kode dalam try akan dijalankan terlebih dahulu. Jika ada error, blok catch akan menangkapnya dan menampilkan pesan yang lebih ramah tanpa menghentikan eksekusi program.

2. Menambahkan finally

finally digunakan untuk mengeksekusi kode terlepas dari ada atau tidaknya error.

try {
  console.log("Memproses data...");
  throw new Error("Gagal mengambil data");
} catch (error) {
  console.error(error.message);
} finally {
  console.log("Selesai memproses");
}

try {
  console.log("Memproses data...");
  throw new Error("Gagal mengambil data");
} catch (error) {
  console.error(error.message);
} finally {
  console.log("Selesai memproses");
}

Blok finally sering digunakan untuk membersihkan resource seperti menutup koneksi database atau menghentikan loading indicator di antarmuka pengguna.

3. Menggunakan throw untuk Membuat Error Sendiri

Anda juga bisa membuat error secara manual dengan throw. Ini berguna untuk validasi input atau kondisi tertentu.

Contoh:

function bagi(a, b) {
  if (b === 0) {
    throw new Error("Tidak bisa membagi dengan nol!");
  }
  return a / b;
}

try {
  console.log(bagi(10, 0));
} catch (error) {
  console.error("Error:", error.message);
}

function bagi(a, b) {
  if (b === 0) {
    throw new Error("Tidak bisa membagi dengan nol!");
  }
  return a / b;
}

try {
  console.log(bagi(10, 0));
} catch (error) {
  console.error("Error:", error.message);
}

Dengan memahami konsep error handling dan teknik debugging di JavaScript, Anda kini memiliki bekal kuat untuk membuat aplikasi yang lebih stabil dan profesional. Anda tahu bagaimana cara mendeteksi, menangani, dan bahkan mencegah error sejak dini.

Jika Anda ingin memperdalam kemampuan JavaScript, baca juga: “Asynchronous JavaScript: Memahami Callback, Promise, dan Async/Await.” Artikel tersebut akan membantu Anda memahami salah satu penyebab error paling umum di JavaScript modern.