AI Builder
Semua Artikel
W2 Tools & Teknis 5 menit baca

Error Itu Komputer Lagi Ngomong Sama Kamu

Error message bukan komputer marah. Itu komputer kasih tahu sesuatu. Pelajari 3 jenis error, cara baca error message, dan debugging mindset.

Layar merah. Tulisan aneh. Simbol-simbol yang nggak kamu kenal. Panik.

Kalau itu reaksi kamu saat lihat error message — kamu nggak sendirian. Tapi mulai hari ini, kamu akan lihat error dengan cara yang berbeda.

Error Bukan Musuh

Error message itu bukan komputer marah sama kamu. Itu komputer lagi kasih tahu sesuatu.

Bayangin gini: kamu nyuruh temen masak nasi goreng, tapi kamu bilangnya “goreng nasinya pakai air.” Temen kamu nggak marah — dia cuma bilang: “Bro, nggak bisa goreng pakai air. Mungkin maksudnya pakai minyak?”

Itu error message. Informasi tentang apa yang salah dan di mana. Bukan judgment. Bukan hukuman. Cuma info.

3 Jenis Error

Nggak semua error sama. Kenali jenisnya, dan kamu udah setengah jalan ke solusi.

1. Syntax Error — Salah Ketik

Ini yang paling gampang. Kamu nulis sesuatu yang komputer nggak bisa baca.

Analogi: Kamu kirim chat “auk mw mkn dm mn?” — temen kamu ngerti karena konteks. Tapi komputer? Komputer butuh ejaan yang persis.

Contoh:

SyntaxError: Unexpected token '}'

Artinya: “Ada tanda kurung kurawal yang nggak seharusnya ada di situ.” Biasanya kamu lupa buka/tutup kurung, atau ada typo.

Cara fix: Lihat baris yang ditunjuk. Cek kurung, titik koma, tanda kutip.

2. Runtime Error — Proses Gagal di Tengah Jalan

Code-nya benar secara tulisan, tapi pas dijalankan ada yang nggak beres.

Analogi: Resep kue bilang “tambahkan susu.” Kamu ikutin, tapi ternyata susu-nya habis. Resepnya nggak salah — tapi bahan yang dibutuhin nggak ada.

Contoh:

TypeError: Cannot read properties of undefined

Artinya: “Kamu coba akses sesuatu yang nggak ada.” Biasanya data yang kamu expect belum ada atau belum ke-load.

Cara fix: Cek: apakah datanya benar-benar ada? Apakah sudah ke-load sebelum dipakai?

3. Logic Error — Jalan Tapi Salah

Ini yang paling tricky. Nggak ada error message. App jalan normal. Tapi hasilnya salah.

Analogi: Kamu mau ke Bandung dari Jakarta lewat tol. GPS bilang “sudah sampai” — tapi kamu di Cirebon. Mobilnya jalan, nggak ada masalah mekanis, tapi tujuannya salah.

Contoh: Kalkulator yang harusnya jumlah tapi ternyata kali. Nggak ada error, tapi hasil 2 + 3 = 6.

Cara fix: Cek logika step by step. “Apa yang harusnya terjadi di setiap langkah? Apa yang beneran terjadi?”

Cara Baca Error Message

Error message itu kayak alamat rumah. Ada pola-nya.

TypeError: Cannot read properties of undefined (reading 'name')
    at UserProfile (src/components/UserProfile.jsx:15:22)
    at renderWithHooks (react-dom.development.js:14985:18)

Cara baca:

  1. Baris pertama = apa yang salah. TypeError: Cannot read properties of undefined (reading 'name') → kamu coba akses .name dari sesuatu yang belum ada.
  2. Baris kedua = di mana salahnya. at UserProfile (src/components/UserProfile.jsx:15:22) → file UserProfile.jsx, baris 15, karakter 22. Ini yang paling penting.
  3. Baris-baris di bawahnya = “stack trace” — jejak perjalanan code sebelum error. Biasanya kamu cukup fokus di baris yang menunjuk file KAMU (bukan file dari library/framework).

Aturan Praktis

  • Baca dari atas. Baris pertama = masalahnya apa.
  • Cari file KAMU. Abaikan baris yang menunjuk ke node_modules atau file framework. Cari yang menunjuk ke folder src/ atau file yang kamu tulis.
  • Lihat nomor baris. Buka file itu, pergi ke baris yang ditunjuk. 80% masalah ada di situ.

Debugging = Detektif

Debugging bukan skill coding. Debugging itu skill berpikir sistematis. Kayak jadi detektif:

1. Lihat "TKP" (error message) — apa yang terjadi? di mana?
2. Bentuk hipotesis — "mungkin karena X"
3. Test hipotesis — ubah satu hal, coba lagi
4. Kalau belum solved — bentuk hipotesis baru
5. Ulangi sampai ketemu

Yang penting: ubah satu hal per percobaan. Kalau kamu ubah 5 hal sekaligus dan error-nya hilang — kamu nggak tahu mana yang fix. Dan minggu depan, error yang sama bisa balik.

Chrome DevTools: Senjata Kamu

Browser kamu punya alat debugging built-in yang sangat powerful. Buka dengan F12 atau Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows).

Console Tab

Tempat error message muncul. Juga tempat kamu bisa “ngobrol” sama app — ketik perintah, lihat hasilnya langsung.

Network Tab

Lihat semua “percakapan” antara browser dan server. Kalau data nggak muncul, cek di sini: apakah request-nya terkirim? Apa response-nya? Status code 200 (sukses), 404 (nggak ketemu), 500 (server error)?

Elements Tab

Lihat struktur halaman secara live. Bisa edit langsung di browser untuk eksperimen.

Untuk sekarang, cukup familiar dengan Console dan Network. Dua itu udah cover 80% debugging yang kamu butuhkan.

Cara Minta Tolong yang Efektif

Saat stuck, kamu punya 3 tempat minta tolong: AI, Google, dan mentor/teman. Tapi cara nanya-nya menentukan kualitas jawaban yang kamu dapat.

Cara Nanya yang Jelek

"Error. Gimana fix?"

AI nggak tahu konteks. Google nggak tahu masalah spesifik kamu. Mentor nggak bisa bantu kalau cuma lihat 5 kata.

Cara Nanya yang Bagus

Saya coba [apa yang kamu lakuin].
Error yang muncul: [copy-paste error lengkap].
File yang bermasalah: [nama file, baris berapa].
Yang sudah saya coba: [apa aja yang udah dicoba].

Contoh:

“Saya coba tampilin nama user di halaman profile. Tapi muncul error: TypeError: Cannot read properties of undefined (reading 'name') di file UserProfile.jsx baris 15. Saya sudah cek dan user object-nya undefined. Saya pakai useEffect untuk fetch data tapi kayaknya data belum ke-load saat component render. Gimana cara handle ini?”

Perhatikan: pertanyaan ini sudah mengandung diagnosis awal. Ini membantu AI (atau mentor) langsung loncat ke solusi, bukan buang waktu nebak masalahnya apa.

Mental Model yang Harus Ditanam

Mulai sekarang, setiap kali lihat error:

  1. Tarik napas. Error itu normal. Developer profesional lihat error puluhan kali sehari.
  2. Baca pesannya. Jangan langsung panik. Baca kata per kata. Biasanya pesannya cukup jelas — kalau kamu mau baca.
  3. Cari di mana. File mana, baris berapa.
  4. Bentuk hipotesis. “Mungkin karena…”
  5. Test. Ubah satu hal. Coba lagi.
  6. Kalau stuck, tanya dengan konteks lengkap.

Error bukan musuh. Error itu informasi gratis tentang apa yang salah dan di mana. Developer yang bagus bukan yang nggak pernah error — tapi yang bisa baca error dengan cepat dan tenang.

Latihan: Coba Sekarang

  1. Buka website favorit kamu di Chrome.
  2. Tekan F12 (atau Cmd+Option+I).
  3. Klik tab Console. Ada pesan apa di sana? (Banyak website punya warning/error — itu normal!)
  4. Klik tab Network. Refresh halaman. Lihat semua request yang muncul. Coba klik salah satu — apa isinya?
  5. Tulis di Obsidian: apa yang kamu temukan? Apa yang bikin kamu penasaran?

TL;DR

  • Error = komputer kasih info, bukan komputer marah.
  • 3 jenis: Syntax (typo), Runtime (data nggak ada), Logic (jalan tapi salah).
  • Baca error dari atas. Cari file KAMU. Lihat nomor baris.
  • Debugging = detektif: hipotesis → test → ulangi.
  • Chrome DevTools (F12) = senjata utama. Fokus Console + Network.
  • Nanya yang bener: konteks + error lengkap + yang sudah dicoba.

Baca Juga