Sign in Subscribe
Javascript

Memahami Error Event dan Cara Menangani Kesalahan di javaScript

Memahami Error Event dan Cara Menangani Kesalahan di javaScript
Photo by David Pupăză / Unsplash

Saat mengembangkan aplikasi web, pasti pernah mengalami error yang tiba-tiba muncul di console browser. Kesalahan ini bisa terjadi karena berbagai alasan, seperti salah mengetik nama variabel, mencoba mengakses elemen yang tidak ada, atau ada masalah koneksi saat memuat data.

JavaScript menyediakan Error Event untuk mendeteksi dan menangani kesalahan yang terjadi di dalam script. Dengan memahami cara kerja error event, kita bisa mengantisipasi error, mencegah aplikasi crash, dan memberikan pengalaman pengguna yang lebih baik.

Artikel ini akan membahas cara menangani error menggunakan try-catch, window.onerror, dan addEventListener("error") agar aplikasi tetap berjalan dengan baik meskipun terjadi kesalahan.

Jenis-Jenis Error dalam JavaScript

Sebelum masuk ke cara menangani error, kita perlu mengenali beberapa jenis error yang umum terjadi dalam JavaScript:

  1. NetworkError → Kesalahan saat memuat sumber daya eksternal seperti API atau gambar.

URIError → Kesalahan saat menggunakan fungsi terkait URI yang salah.

decodeURIComponent("%"); // URIError: URI malformed

RangeError → Kesalahan saat nilai berada di luar rentang yang diperbolehkan.

let arr = new Array(-1); // RangeError: Invalid array length

TypeError → Kesalahan ketika mencoba melakukan operasi pada tipe data yang tidak sesuai.

let angka = 10;
angka(); // TypeError: angka is not a function

ReferenceError → Terjadi saat mencoba mengakses variabel atau fungsi yang tidak dideklarasikan.

console.log(undefinedVariable); // ReferenceError: undefinedVariable is not defined

SyntaxError → Kesalahan dalam penulisan kode, seperti kurang tanda kurung atau salah ketik.

console.log("Hello World" // SyntaxError: Unexpected end of input

Menangani Error dengan Try-Catch

Salah satu cara utama menangani error adalah menggunakan try-catch. Ini memungkinkan kita menangkap error tanpa menghentikan seluruh aplikasi.

Contoh Penggunaan Try-Catch

try {
    let hasil = 10 / 0;
    console.log(hasil);
} catch (error) {
    console.error("Terjadi error: ", error.message);
}

Kode di dalam try akan dieksekusi, dan jika terjadi error, kode di dalam catch akan menangkap error tersebut.

Menangkap Error Global dengan window.onerror

Kalau ingin menangkap semua error yang terjadi di seluruh halaman, kita bisa menggunakan window.onerror. Ini sangat berguna untuk debugging dan logging error secara global.

Contoh Penggunaan window.onerror

window.onerror = function(message, source, lineno, colno, error) {
    console.error("Terjadi error:", message);
    console.error("Di file:", source);
    console.error("Baris:", lineno, "Kolom:", colno);
    console.error("Detail:", error);
};

Kode ini akan menangkap semua error di halaman dan menampilkannya di console dengan detail lokasi error tersebut.

Menggunakan Event Listener untuk Menangani Error

Selain window.onerror, kita juga bisa menggunakan event listener untuk menangkap error secara spesifik.

Menangani Error pada Elemen Gambar

const img = document.getElementById("gambar");
img.addEventListener("error", function() {
    console.log("Gagal memuat gambar, menggunakan gambar default.");
    img.src = "default.jpg";
});

Jika gambar gagal dimuat, maka akan diganti dengan gambar default.

Menangani Error dalam Elemen Skrip

window.addEventListener("error", function(event) {
    console.error("Terjadi error dalam script: ", event.message);
});

Kode ini akan menangkap semua error dalam script dan menampilkannya di console.

Menangani Error dalam Permintaan Fetch API

Saat mengambil data dari server, error bisa terjadi karena jaringan terputus atau respons server tidak sesuai. Kita bisa menangani error ini dengan menggunakan try-catch dalam async-await.

Contoh Penanganan Error dalam Fetch API

async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        if (!response.ok) {
            throw new Error("Gagal mengambil data, status: " + response.status);
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Terjadi kesalahan saat mengambil data:", error.message);
    }
}

fetchData();

Jika server mengembalikan respons error, maka error tersebut akan ditangani dalam catch tanpa membuat aplikasi crash.

Best Practices dalam Menangani Error

✅ Gunakan Try-Catch untuk kode yang rentan error, terutama dalam operasi asinkron seperti fetch API.
✅ Gunakan window.onerror atau event listener untuk menangkap error global yang bisa membantu dalam debugging.
✅ Tampilkan pesan error yang jelas untuk pengguna, bukan hanya menampilkan error teknis.
✅ Gunakan fallback, seperti mengganti gambar yang gagal dimuat atau menampilkan pesan alternatif jika data gagal diambil.
✅ Jangan tangkap semua error tanpa menangani masalahnya, karena ini bisa menyulitkan debugging.

Kesimpulan

  • Error Event membantu mendeteksi dan menangani error dalam JavaScript agar aplikasi tetap berjalan dengan baik.
  • Try-catch digunakan untuk menangkap error dalam kode tertentu, sementara window.onerror digunakan untuk menangkap error secara global.
  • Event listener dapat digunakan untuk menangani error pada elemen spesifik seperti gambar atau skrip yang gagal dimuat.
  • Error handling dalam Fetch API sangat penting agar aplikasi tetap stabil meskipun terjadi kegagalan koneksi.
  • Praktik terbaik adalah memberikan pesan error yang jelas, menggunakan fallback, dan memastikan aplikasi tetap responsif meskipun ada error.

Dengan memahami cara menangani error dengan benar, kita bisa memastikan aplikasi tetap stabil, responsif, dan memberikan pengalaman yang lebih baik bagi pengguna.

Read next