Cara Membaca Error di Console: Panduan Debugging Buat Pemula

--

Jujur ya, dulu pertama kali saya ngoding JavaScript, tiap kali console browser muncul merah-merah, rasanya pengen langsung tutup laptop. Tulisannya kayak bahasa alien: "Uncaught TypeError: Cannot read properties of undefined (reading 'name')". Apaan coba?

Ternyata, pesan error itu sebenarnya lagi berusaha bantu kita. Dia ngasih tahu persis apa yang salah dan di mana. Masalahnya, kita aja yang belum bisa "membaca" bahasanya. Artikel ini bakal ngajarin kamu cara baca error kayak baca pesan chat dari teman.

Error Itu Punya Pola

Hampir semua error JavaScript punya format yang sama:

JenisError: Penjelasan singkat
    di namaFungsi (namaFile.js:baris:kolom)
    di fungsiLain (namaFile.js:baris:kolom)

Baris pertama itu jenis error + penjelasan. Baris-baris di bawahnya itu stack trace — jejak panggilan fungsi yang lagi jalan waktu error kejadian. Bacanya dari atas ke bawah: yang paling atas itu lokasi persis error-nya.

4 Error yang Paling Sering Kamu Temui

1. TypeError: Cannot read properties of undefined

Ini juara bertahan error paling sering. Artinya: kamu nyoba akses properti dari sesuatu yang ternyata undefined (kosong, nggak ada isinya).

let user;
console.log(user.name); // ERROR!

2. ReferenceError: xxx is not defined

Artinya kamu manggil variabel yang nggak pernah dideklarasikan. Biasanya karena typo.

let namaPengguna = "Budi";
console.log(namaPenguna); // ERROR! Kurang 'g'

3. SyntaxError: Unexpected token

Kode kamu ada yang salah ketik secara struktur.

let buah = ["apel", "mangga" // ERROR! Kurung siku nggak ditutup
console.log(buah);

4. RangeError: Maximum call stack size exceeded

Ada fungsi yang manggil dirinya sendiri tanpa henti.

function hitungMundur(n) {
  if (n <= 0) return "Selesai!";
  console.log(n);
  return hitungMundur(n - 1);
}
hitungMundur(5);

Teknik Baca Stack Trace

Misal kamu dapat error kayak gini:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at tampilkanData (app.js:15:22)
    at ambilData (app.js:8:5)
    at app.js:3:1

Intinya: langsung lompat ke file dan baris yang disebut di baris at paling atas. 90% kasus, masalahnya kelihatan di situ.

3 Kebiasaan Biar Jarang Kena Error Misterius

1. Baca pesan error-nya dulu, jangan langsung panik.

2. Pakai console.log buat lacak data.

function prosesData(data) {
  console.log("Isi data:", data);
  console.log("Tipe data:", typeof data);
}

3. Sederhanakan masalahnya.

Penutup

Error bukan musuh. Makin sering kamu baca pesan error, makin cepat insting debugging kamu kebentuk.

Coba sekarang: buka console browser (F12), sengaja bikin satu error dari daftar di atas, terus praktekkan cara bacanya.