Cara Men-debug Respons API: Tips Penampil JSON

# Cara Men-debug Respons API: Tips Penampil JSON

Men-debug respons API adalah tugas harian bagi pengembang web, tetapi kebanyakan orang menggunakan penampil JSON mereka secara tidak benar. Panduan ini mengungkapkan teknik profesional untuk memeriksa, menganalisis, dan memecahkan masalah respons API 10x lebih cepat menggunakan penampil JSON modern.

Baik Anda bekerja dengan REST API, GraphQL, atau WebSockets, tips ini akan mengubah alur kerja debugging Anda.

---

Mengapa Penampilan JSON yang Tepat Itu Penting

Masalah yang Sering Terjadi

Tanpa penampilan JSON yang efektif, pengembang membuang waktu berjam-jam:

• 😫 Menggulir ribuan baris JSON yang diminimalkan (minified)
• 🔍 Mencari field tertentu secara manual dalam objek bersarang
• 🐛 Melewatkan pesan kesalahan kritis yang terkubur dalam respons
• ⏰ Menyalin-tempel data antar alat untuk memahami struktur
• 💥 Membuat browser macet dengan respons API yang masif

Solusinya

Penampil JSON profesional menyediakan:

✅ Pemformatan instan - Mengubah JSON yang diminimalkan menjadi struktur yang mudah dibaca

✅ Navigasi interaktif - Menciutkan/memperluas objek bersarang

✅ Pencarian path - Menemukan lokasi data yang tepat

✅ Penyorotan tipe - Membedakan string, angka, boolean dalam sekejap

✅ Cari & filter - Menemukan jarum dalam tumpukan jerami secara instan

---

Memilih Penampil JSON Anda

Alat Pengembang Browser

• Penampil JSON bawaan untuk respons API
• Tab Network menampilkan respons yang diformat
• Console mendukung fungsionalitas salin path

• Hanya pemformatan dasar
• Tidak ada pencarian lanjutan
• Dapat macet dengan respons besar (>10MB)

Penampil JSON Online

• ✅ Menangani file 100MB+ tanpa lag
• ✅ Tampilan pohon dengan penyalinan path
• ✅ Pemformatan satu-klik
• ✅ Pemrosesan sisi klien (100% pribadi)
• ✅ Kapabilitas cari dan filter

• ✅ Validasi sintaksis
• ✅ Penyorotan kesalahan
• ❌ Fitur navigasi terbatas

Ekstensi IDE

• Ekstensi "JSON Tools"
• "Pretty JSON" untuk pemformatan
• Validasi schema JSON bawaan

• Penampil JSON terintegrasi
• Riwayat respons
• Pembuatan pengujian

---

Teknik Esensial Penampil JSON

1. Ekstraksi Path Cepat

Anda perlu mengakses user.profile.settings.notifications.email dari respons API.

// Pengeboran manual - rawan kesalahan!
const email = response.user.profile.settings.notifications.email;

$.user.profile.settings.notifications.email
$.users[].email                    // Semua email pengguna

$.products[?(@.price < 100)].name   // Produk di bawah $100

{
  "status": "success",           // ← Tetap terlihat
  "metadata": { ... },           // ← Ciutkan awalnya
  "users": [                     // ← Tetap terlihat
    {
      "id": 1,
      "profile": { ... },       // ← Perluas saat menyelidiki pengguna
      "permissions": { ... }     // ← Ciutkan awalnya
    }
  ],
  "debug": { ... }              // ← Ciutkan kecuali sedang debugging
}

{
  "string": "teks biru",        // 🔵 Strings dalam warna biru
  "number": 42,                 // 🟢 Numbers dalam warna hijau
  "boolean": true,              // 🟠 Booleans dalam warna oranye
  "null": null,                 // ⚫ Null dalam warna abu-abu
  "array": [],                  // 🟣 Arrays dengan kurung siku
  "object": {}                  // 🟤 Objects dengan kurung kurawal
}

{
  "userId": "123",     // 🔵 Haruskah ini angka?
  "price": "29.99",    // 🔵 Mungkin salah - harusnya angka
  "active": "true"     // 🔵 Seharusnya boolean, bukan string!
}

{
  "status": 200,
  "data": {
    "users": [
      { "id": 1, "name": "Alice" },
      { "id": 2, "name": "Bob" }
    ]
  }
}

// expected-user-schema.json
{
  "id": "number",
  "name": "string",
  "email": "string",  // ← Hilang dalam respons asli!
  "avatar": "string"
}

{
  "status": 400,
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Permintaan tidak valid",
    "details": {
      "fields": {
        "email": {
          "errors": [
            {
              "code": "INVALID_FORMAT",
              "message": "Format email harus valid"
            }
          ]
        }
      }
    }
  }
}

const errorMsg = response?.error?.details?.fields?.email?.errors?.[0]?.message;
console.error('Kesalahan validasi:', errorMsg);

$.products[?(@.inStock === true)]

// Alih-alih mengambil semuanya:
GET /api/products?limit=1000  // ❌ Berat

// Ambil dalam halaman:
GET /api/products?page=1&limit=50  // ✅ Terkelola

// Tangkap respons
const v1Response = await fetch('/api/v1/user');
const v2Response = await fetch('/api/v2/user');

// Gunakan alat diff online
// BigJSON menyediakan perbandingan berdampingan (side-by-side)

// Semua alamat email
$.users[].email

// Produk di atas $100
$.products[?(@.price > 100)]

// Pengguna dengan peran admin
$.users[?(@.role === 'admin')]

// Pencarian array bersarang
$..comments[].author.name

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "userId": { "type": "number" },
    "email": { 
      "type": "string",
      "format": "email"
    },
    "created": {
      "type": "string",
      "format": "date-time"
    }
  },
  "required": ["userId", "email"]
}

{
  "_comment": "Kesalahan terjadi saat membuat pesanan dengan kupon yang tidak valid",
  "orderId": "ORD-12345",
  "error": {
    "code": "INVALID_COUPON",
    "message": "Kupon XYZ123 telah kedaluwarsa"
  }
}

Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' 
has been blocked by CORS policy

Access-Control-Allow-Origin: 

   Access-Control-Allow-Methods: GET, POST

// Gunakan proxy di package.json (React)
{
  "proxy": "https://api.example.com"
}

// Atau gunakan proxy CORS untuk pengujian
fetch('https://cors-anywhere.herokuapp.com/https://api.example.com/data')

Masalah 2: Kegagalan Autentikasi

{
  "data": { ... }
}

{
  "error": "Unauthorized",
  "message": "Token tidak valid atau kedaluwarsa"
}

• [ ] Token disertakan dalam permintaan?
• [ ] Nama header benar? (Authorization: Bearer )
• [ ] Token kedaluwarsa? Periksa klaim exp dalam JWT
• [ ] Format token benar? (JWT vs kunci API)

Request Headers:
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Masalah 3: Tipe Data Tidak Terduga

const response = await fetch('/api/user/123');
const data = await response.json();

// Mengharapkan angka (number), mendapatkan string
console.log(typeof data.userId);  // "string" ❌

const userId = Number(data.userId);  // Konversi string ke angka
const price = parseFloat(data.price);  // Parse float
const active = data.active === 'true';  // String ke boolean

---

Alat & Ekstensi untuk Debugging Pro

Ekstensi Browser

• Memformat JSON secara otomatis di browser
• Penyorotan sintaksis
• Menciutkan/memperluas node

• Tampilan pohon untuk JSON
• Salin kunci dan nilai
• URL yang dapat diklik

• Buat panggilan API langsung di VS Code
• Simpan koleksi permintaan
• Variabel lingkungan

Alat Command-Line

# Permintaan GET dasar
curl https://api.example.com/users

# Pretty print dengan jq
curl https://api.example.com/users | jq .

# Simpan respons
curl https://api.example.com/users > response.json

# Sertakan header dalam output
curl -i https://api.example.com/users

# Ekstrak field tertentu
cat response.json | jq '.users[0].email'

# Filter array
cat response.json | jq '.users[] | select(.active == true)'

# Transformasi data
cat response.json | jq '.users | map({id, name})'

# Sintaksis bersih
http GET https://api.example.com/users

# POST dengan JSON
http POST https://api.example.com/users name=Alice email=alice@example.com

# Pemformatan JSON otomatis
http https://api.example.com/users --pretty=all

Aplikasi Desktop

• Manajemen koleksi
• Variabel lingkungan
• Pengujian otomatis
• Server Mock

• Antarmuka yang bersih
• Dukungan GraphQL
• Pembuatan kode
• Ekosistem plugin

• UI yang indah
• Nilai dinamis
• Sinkronisasi tim

---

Membangun Alur Kerja Debugging

Proses Langkah demi Langkah

# Simpan detail permintaan
curl 'https://api.example.com/data' \
  -H 'Authorization: Bearer TOKEN' \
  -H 'Content-Type: application/json' \
  --data '{"query":"test"}' \
  > request.txt

• Buka di BigJSON Viewer
• Periksa kode status
• Verifikasi struktur respons

• Field yang diharapkan vs yang aktual
• Ketidakcocokan tipe
• Data yang hilang

• Ubah parameter
• Coba endpoint yang berbeda
• Modifikasi header

<h2 id="laporan-bug-api-pengguna-mengembalikan-email-null" class="text-2xl font-bold mt-10 mb-5 text-foreground border-b border-gray-200 dark:border-gray-700 pb-2">Laporan Bug: API Pengguna Mengembalikan Email Null</h2>

Endpoint: GET /api/users/123  
Diharapkan: { "email": "user@example.com" }  
Aktual: { "email": null }  
Langkah: Pengguna harus memverifikasi email terlebih dahulu  
Perbaikan: Tambahkan pemeriksaan verifikasi email

---

Praktik Terbaik

LAKUKAN:

✅ Gunakan kontrol versi untuk contoh API

git/
├── api-examples/
│   ├── users-get-200.json
│   ├── users-get-404.json
│   └── users-post-201.json

✅ Buat kasus pengujian yang dapat digunakan kembali

describe('User API', () => {
  it('returns user with email', async () => {
    const response = await fetch('/api/users/1');
    const data = await response.json();
    expect(data.email).toBeDefined();
  });
});

✅ Dokumentasikan keunikan API

// Catatan: API mengembalikan harga sebagai string, bukan angka
const price = parseFloat(response.price);

JANGAN:

❌ Log data sensitif

// ❌ Buruk
console.log('User response:', response);  // Mungkin berisi token!

// ✅ Baik
console.log('User fetched:', { id: response.id, name: response.name });

❌ Asumsikan struktur respons

// ❌ Buruk
const email = response.user.email;  // Macet jika user null

// ✅ Baik
const email = response?.user?.email ?? 'Tidak ada email';

❌ Abaikan respons kesalahan

// ❌ Buruk
const data = await fetch('/api/data').then(r => r.json());

// ✅ Baik
const response = await fetch('/api/data');
if (!response.ok) {
  const error = await response.json();
  console.error('API error:', error);
  throw new Error(error.message);
}
const data = await response.json();

---

Kesimpulan

Kuasai debugging API dengan:

Langkah Anda Selanjutnya

---

Sumber Daya Terkait

• Panduan API JSON & Layanan REST
• Panduan Lengkap JavaScript JSON
• Alat Online JSON
• BigJSON Formatter

---