Server Error Belum Tentu Salah Kode: Cara Mengatasi Fetch Api 500 Javascript

Ditulis oleh JavaScript

Status 500 berarti server gagal memproses request fetch Anda. Kode frontend jarang jadi penyebab utama, payload yang salah format, header kurang, atau token kedaluwarsa lebih sering memicu error ini dari sisi client.

Fetch tidak otomatis melempar error untuk 500. Anda harus memeriksa response.ok atau response.status sendiri, lalu membaca body error sebelum memutuskan retry atau lapor ke backend.

Penyebab Fetch Api 500 di Javascript

Tiga jenis kegagalan ini sering tertukar dan penanganannya beda:

  • Network error: fetch reject, misalnya offline atau DNS gagal. Tidak ada status HTTP.
  • HTTP 500: fetch resolve dengan status: 500 dan ok: false. Masalah terjadi di server.
  • JSON parse error: muncul saat body bukan JSON valid, misalnya server mengirim halaman HTML error.

Penyebab umum dari sisi client yang berujung 500:

  • Mengirim body tanpa JSON.stringify() atau tanpa Content-Type: application/json.
  • Parameter ID atau query kosong sehingga query database di server gagal.
  • Token auth hilang, salah format Bearer, atau kedaluwarsa.

Penyebab dari sisi server biasanya terbaca lewat body respons, misalnya validasi database gagal, kolom null, relasi tidak ditemukan, atau exception yang tidak ditangani.

Tabel Troubleshooting Fetch 500

Baca status dulu, lalu body. Jangan langsung retry buta.

Kondisi Penyebab Solusi
500 + pesan validasi Field kurang atau tipe salah Perbaiki payload, cek DevTools Network
500 + unauthorized Token salah atau kedaluwarsa Login ulang, perbaiki header Authorization
500 + body HTML Endpoint salah atau server crash Cek URL, method, baca log backend
Gagal di response.json() Body bukan JSON Pakai response.text(), cek Content-Type

Catat detail error sekali, lengkap dengan URL, payload, dan timestamp. Hentikan retry kalau dua kali beruntun masih 500 karena masalahnya nyaris pasti bukan transient.

BACA JUGA:

Cara Memperbaiki Fetch 500 di Frontend

  1. Reproduksi dengan data minimal agar tahu field mana yang memicu error.
  2. Buka DevTools tab Network, klik request gagal, periksa Payload, Headers, dan Response.
  3. Validasi payload: pastikan object, stringify benar, dan ID tidak undefined.
  4. Perbaiki header auth dan Content-Type, lalu kirim ulang sekali.
  5. Kalau masih 500, simpan log untuk backend dan tampilkan pesan UI netral.
async function kirimData(data) {
  try {
    const res = await fetch("/api/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    });
    if (!res.ok) {
      const pesan = await res.text();
      if (res.status === 500) {
        console.error(res.status, pesan);
        throw new Error("Server bermasalah, coba lagi nanti.");
      }
      throw new Error(`Request gagal: ${res.status}`);
    }
    return await res.json();
  } catch (err) {
    console.error(err);
    throw err;
  }
}

Kode tersebut memisahkan 500 dari error lain. Retry cukup satu kali dengan jeda singkat. Setelah itu tampilkan pesan ramah dan kirim log berisi endpoint serta isi error ke sistem pelaporan Anda.

Cara Mencegah Error 500 Terulang

  • Validasi input sebelum fetch: cek required, tipe angka, dan format tanggal.
  • Pastikan JSON.stringify hanya menerima object valid, bukan undefined atau circular.
  • Simpan token dengan aman, refresh sebelum kedaluwarsa, jangan taruh secret API key di frontend publik.
  • Beri timeout dengan AbortController agar request macet tidak menggantung UI.
  • Buat fallback UI: skeleton, pesan error, dan tombol coba lagi.

FAQ

Apakah fetch otomatis reject saat status 500?

Tidak, fetch tetap resolve dan Anda harus cek response.ok atau response.status manual.

Haruskah retry request saat kena error 500?

Maksimal satu retry berjeda; hentikan bila masih 500 karena kemungkinan ada bug server.

Bagaimana bedakan error 500 dan JSON parse error?

Error 500 punya status 500, sedangkan JSON parse error terjadi saat response.json() gagal karena body bukan JSON.

Artikel Terkait