Cara Membaca Error Message di Console Browser Tanpa Panik

Jangan Tutup Console-mu!

Respons alami seorang pemula saat melihat teks merah beruntun di tab Console (Inspect Element) adalah panik dan menatap kodenya kosong berharap keajaiban datang. Padahal, pesan error tersebut didesain secara spesifik oleh browser untuk memberitahumu tepat di mana dan apa yang salah.

Mari kita pecah anatomi dari sebuah pesan error.

Anatomi Pesan Error Standar

Misalnya, kamu melihat error ini:

Uncaught TypeError: Cannot read properties of undefined (reading 'map') at renderList (app.js:42)

Jangan panik melihat kalimat bahasa Inggrisnya. Bagilah menjadi tiga informasi penting:

1. Jenis Error (Uncaught TypeError): Ini memberitahu sifat masalahnya. (Tipe data salah).
2. Pesan Detail (Cannot read properties...): Ini adalah deskripsi masalahnya. Ia bilang, kamu mencoba memanggil .map() pada sebuah variabel yang isinya ternyata kosong (undefined).
3. Lokasi / Stack Trace (at renderList app.js:42): Ini adalah peta hartanya! Error tersebut terjadi di dalam fungsi renderList, tepatnya pada file app.js baris ke-42.

Solusi: Buka file app.js di VS Code, pergi ke baris 42, dan periksa kenapa variabel array-mu gagal mendapatkan datanya (mungkin API-nya lambat atau salah nama variabel).

3 Jenis Error Paling Sering Ditemui Pemula

1. SyntaxError

Contoh: SyntaxError: missing ) after argument list
Ini adalah masalah ketik (typo). Kamu kelupaan menutup kurung, kelupaan tanda kutip, atau kelebihan tanda koma. Kodemu tidak bisa dieksekusi sama sekali karena strukturnya cacat. Cek baris kode yang ditunjukkan di console dengan teliti.

2. ReferenceError

Contoh: ReferenceError: userList is not defined
Browser mengeluh karena kamu menyuruhnya menggunakan variabel bernama userList, tapi browser tidak pernah tahu dari mana variabel itu berasal. Biasanya terjadi karena kamu salah ketik nama variabel (typo: misalnya dideklarasikan usersList tapi dipanggil userList), atau kamu lupa meng-import filenya.

3. TypeError

Contoh: TypeError: document.getElementById(...) is null
Ini terjadi saat kamu mencoba melakukan operasi pada tipe data yang salah. Misalnya pada kasus di atas, kamu mencoba mengubah style atau teks elemen HTML, tapi elemen dengan ID tersebut tidak ditemukan (sehingga nilainya null). Kamu tidak bisa memanipulasi kehampaan!

Tips Pamungkas: Google Error-mu!

Kalau kamu sudah tahu lokasi barisnya tapi masih tidak mengerti pesan errornya, blok pesan error tersebut (tanpa menyertakan nama file atau barismu sendiri, misal hanya "Cannot read properties of undefined (reading 'map')"), lalu copy-paste ke Google. 99.9% kemungkinan, puluhan developer lain sudah pernah menanyakan masalah persis yang sama di StackOverflow.