Cara Mengatasi Fetch Response Json Error Javascript agar Data API Terbaca

Ditulis oleh JavaScript

Kesalahan paling umum saat cara mengatasi fetch response json error javascript adalah langsung memanggil response.json() tanpa memeriksa status dan isi body. Server bisa mengembalikan HTML error, body kosong, atau status 404/500. Browser tetap menganggap fetch berhasil, lalu gagal saat parsing JSON dan data API tidak terbaca.

Penyebab Fetch Response JSON Error Paling Sering

Fetch di browser hanya reject otomatis untuk network error seperti koneksi putus atau DNS gagal. Status 404 dan 500 tetap masuk ke then, sehingga kode harus memeriksa response.ok sendiri.

  • Server mengirim halaman HTML 404 atau 500, lalu dipaksa dibaca sebagai JSON.
  • Body kosong dari status 204 atau response tanpa konten sehingga parser tidak menemukan karakter JSON.
  • response.json() dipanggil dua kali padahal body stream hanya bisa dibaca sekali.
  • Content-Type bukan application/json karena endpoint salah, URL redirect, atau format error server berbeda.
  • JSON tidak valid karena ada koma berlebih, kutip tunggal, atau teks debug tercampur.

Tabel Diagnosis Cepat Berdasarkan Pesan Error

Buka tab Network di DevTools, klik request yang gagal, lalu lihat tab Response atau Preview. Bandingkan pesan di console dengan kondisi berikut sebelum mengubah kode.

Error/Kondisi Penyebab Solusi
Unexpected token < in JSON Response berisi HTML, biasanya halaman error Periksa URL, cek response.ok, baca pesan server sebagai teks
Unexpected end of JSON input Body kosong atau response terpotong Tangani body kosong sebelum parse dan periksa status 204
Failed to fetch / TypeError network Jaringan gagal, CORS ditolak server, atau server mati Cek koneksi, URL, status server, dan header CORS dari sisi server

Untuk memastikan, baca body sebagai response.text() satu kali. Jika hasilnya diawali <!doctype atau <html, masalahnya ada di endpoint, bukan di JavaScript.

BACA JUGA:

Cara Memperbaiki response.json() yang Gagal

Ikuti urutan ini agar error HTTP dan error parsing tidak tercampur:

  1. Periksa response.ok dan lempar error jika status 400 ke atas.
  2. Baca body memakai response.text() lalu abaikan body kosong.
  3. Periksa Content-Type bila API seharusnya selalu JSON.
  4. Baru ubah teks menjadi JSON memakai JSON.parse() dalam try/catch.
async function fetchJson(url) {
  const response = await fetch(url);

  if (!response.ok) {
    const pesan = await response.text();
    throw new Error(`HTTP ${response.status}: ${pesan.slice(0, 200)}`);
  }

  const text = await response.text();
  if (!text) return null;

  try {
    return JSON.parse(text);
  } catch (error) {
    throw new SyntaxError(`Response bukan JSON valid: ${text.slice(0, 200)}`);
  }
}
  • Parse body hanya satu kali dalam satu alur request.
  • Simpan pesan teks server untuk ditampilkan sebagai fallback.
  • Kembalikan null atau objek default khusus body kosong, jangan paksa parse.
  • Pisahkan penanganan SyntaxError untuk JSON dan Error untuk HTTP.

Cara Mencegah Error Terulang di Fetch Berikutnya

  • Validasi endpoint, method, parameter, dan trailing slash sebelum fetch dipanggil berulang.
  • Samakan format error dari server, misalnya selalu JSON berisi message dan status.
  • Pindahkan logika ke satu fungsi fetchJson agar pengecekan status dan parsing konsisten.
  • Batasi retry maksimal 2 sampai 3 kali hanya untuk gangguan jaringan sementara.
  • Tampilkan pesan ramah ke pengguna setelah retry habis atau error HTTP sudah jelas.

FAQ

Kenapa response.json() error padahal fetch berhasil?

Fetch berhasil berarti request terkirim, tetapi isi response belum tentu JSON valid.

Apakah fetch otomatis gagal saat status 404 atau 500?

Tidak, fetch tetap resolve sehingga kode wajib memeriksa response.ok atau response.status.

Bagaimana cek isi response sebelum diubah ke JSON?

Gunakan await response.text(), periksa apakah kosong atau HTML, lalu parse memakai JSON.parse().

Artikel Terkait