Cara Debug JSON Error dalam 5 Menit | Ced DevTools Blog

📌 Pendahuluan

JSON (JavaScript Object Notation) adalah format pertukaran data yang paling populer di kalangan developer. Namun, bekerja dengan JSON tidak selalu mulus. Error kecil seperti koma yang hilang atau tanda kutip yang tidak tepat dapat menyebabkan aplikasi Anda berhenti bekerja.

Dalam artikel ini, saya akan membagikan teknik debug yang saya gunakan setiap hari — termasuk cara mengidentifikasi dan memperbaiki JSON error dalam waktu kurang dari 5 menit.

💡 Cerita: 2 Jam Debugging Karena Satu Koma

Waktu itu saya dapat tugas dari klien: fix API yang tiba-tiba error. Error message-nya cuma "Unexpected token } in JSON at position 142". Response dari backend supposedly JSON, tapi frontend tidak bisa parse.

Saya cek kode backend — semuanya terlihat bagus. Database query benar. Response header benar. Tapi tetap error. Setelah 2 jam cari-cari, saya coba copy response JSON mentah dan paste ke JSON formatter.

Dan ternyata... ada satu trailing comma di object terakhir. Satu koma yang tidak seharusnya ada di situ. Backend framework tidak masalah, tapi JSON parser di frontend langsung reject seluruh payload.

Sejak hari itu, saya selalu pakai JSON formatter sebelum kirim response. Dan itulah cerita di balik kenapa saya membuat JSON Formatter tool di website ini — karena saya tidak mau siapapun menghabiskan 2 jam hanya untuk cari satu koma.

⚠️ 5 Error JSON yang Paling Sering Terjadi

1. Missing Comma (Koma yang Hilang)

// ❌ SALAH
{
  "name": "John"
  "age": 30
}

// ✅ BENAR
{
  "name": "John",
  "age": 30
}

2. Trailing Comma (Koma di Akhir)

// ❌ SALAH
{
  "name": "John",
  "age": 30,
}

// ✅ BENAR
{
  "name": "John",
  "age": 30
}

3. Single Quotes Instead of Double Quotes

// ❌ SALAH
{
  'name': 'John',
  'age': 30
}

// ✅ BENAR
{
  "name": "John",
  "age": 30
}

4. Missing Quotes on Keys

// ❌ SALAH
{
  name: "John",
  age: 30
}

// ✅ BENAR
{
  "name": "John",
  "age": 30
}

5. Unescaped Special Characters

// ❌ SALAH
{
  "text": "Hello "World""
}

// ✅ BENAR
{
  "text": "Hello \"World\""
}

🔧 Langkah-Langkah Debug JSON Error

Copy JSON Anda

Salin seluruh JSON yang ingin Anda debug dari source code atau API response.

Paste ke JSON Formatter

Gunakan tools seperti JSON Formatter di Ced DevTools untuk memformat JSON Anda.

Identifikasi Error

Formatter akan menunjukkan di mana error terjadi. Biasanya ditandai dengan pesan error yang jelas.

Perbaiki Error

Perbaiki error berdasarkan pesan yang ditampilkan. Cek koma, quotes, dan bracket.

Validate Kembali

Setelah diperbaiki, format ulang untuk memastikan tidak ada error lagi.

💡 Tips & Best Practices

✓Selalu gunakan JSON validator sebelum deploy
✓Gunakan editor dengan syntax highlighting (VS Code, Sublime)
✓Install extension JSON lint di editor Anda
✓Hindari trailing comma meskipun beberapa parser mendukung
✓Gunakan double quotes untuk semua string JSON
✓Escape special characters dengan benar
✓Test JSON Anda dengan berbagai parser

✅ Kesimpulan

Debug JSON error tidak harus memakan waktu lama. Dengan memahami error umum dan menggunakan tools yang tepat seperti JSON Formatter, Anda dapat mengidentifikasi dan memperbaiki error dalam hitungan menit. Selalu validate JSON Anda sebelum production untuk menghindari masalah di kemudian hari.

🐛 Cara Debug JSON Error dalam 5 Menit