Periksa URL Dulu: Cara Mengatasi Fetch Api 404 Javascript

Ditulis oleh JavaScript

Salin URL final dari fetch() lalu buka manual di browser. Status 404 hampir selalu berarti alamatnya salah, ada slash ganda, ID-nya undefined, atau endpoint belum tersedia di server.

Perilaku ini membingungkan karena catch tidak ikut terpanggil. Di browser, fetch() hanya reject saat network error, misalnya offline atau DNS gagal. Status 404 tetap resolve sebagai Response dengan response.ok === false.

Kenapa fetch 404 tidak otomatis masuk catch

fetch() memisahkan kegagalan jaringan dari status HTTP. Koneksi berhasil dan server menjawab 404 tetap dianggap respons valid.

  • Network error: koneksi putus, offline, CORS diblokir, domain tidak ditemukan. Masuk catch.
  • HTTP status error: 404, 500, 403. Tidak masuk catch kecuali kode memeriksa response.ok.
  • Salah endpoint: path, versi API, huruf besar kecil, atau metode HTTP tidak cocok. Server menjawab 404 atau 405.

Penyebab umum fetch kena 404

Mayoritas kasus berasal dari URL yang terbentuk tidak sesuai harapan.

  • Slash ganda atau kurang: https://api.com//users atau https://api.comv1/users.
  • Base URL beda environment: kode development memakai localhost, production memakai domain lain.
  • Query param salah tulis: ?userId= padahal API meminta ?id=.
  • Endpoint pindah versi: frontend masih memanggil /api/v1/users padahal backend sudah /api/v2/users.
  • ID dinamis kosong: /users/undefined karena state belum terisi sebelum fetch jalan.
  • Respons HTML dikira JSON: halaman 404 dari server ikut diparse sehingga memicu error lanjutan.

BACA JUGA:

Tabel cek cepat fetch 404

Error/Kondisi Penyebab Solusi
URL mengandung undefined ID belum siap Validasi ID sebelum fetch
404 hanya di production Base URL salah Pusatkan base URL per environment
GET berhasil, POST 404 Metode tidak didukung Samakan method dengan dokumentasi API
JSON parse ikut gagal Server mengirim HTML 404 Cek status sebelum response.json

Langkah memperbaiki fetch 404

1. Cetak URL final sebelum request dikirim.
2. Buka URL tersebut manual lewat browser atau tab Network.
3. Periksa response.status dan response.ok.
4. Buat cabang khusus untuk 404.
5. Parse JSON hanya setelah status valid.

async function getUser(id) {
  if (!id) {
    throw new Error("ID user kosong");
  }

  const url = `https://api.example.com/users/${id}`;
  console.log(url);

  const response = await fetch(url);

  if (response.status === 404) {
    throw new Error("User tidak ditemukan");
  }

  if (!response.ok) {
    throw new Error(`Request gagal: ${response.status}`);
  }

  return response.json();
}

Kode tersebut menghentikan alur lebih awal saat ID kosong. Log URL memperlihatkan slash atau parameter yang salah. Pengecekan 404 memberi pesan spesifik, bukan error umum.

Cara mencegah 404 terulang

  • Simpan base URL di satu konstanta konfigurasi, jangan tulis manual di setiap fetch.
  • Validasi ID, slug, dan query sebelum request dijalankan.
  • Bedakan pesan 404 dari 500 agar pengguna tahu data tidak ada, bukan server rusak.
  • Catat kontrak endpoint backend, terutama perubahan versi dan nama path.

FAQ

Apakah fetch 404 masuk catch?

Tidak, 404 tetap resolve sehingga kode perlu memeriksa response.ok atau response.status.

Mengapa response.json ikut error saat 404?

Server sering mengirim HTML untuk halaman 404, sehingga parsing JSON gagal karena formatnya bukan JSON.

Kapan 404 berarti masalah backend?

Apabila URL sudah benar dan bisa direproduksi manual, kemungkinan route belum dibuat, belum deploy, atau ID memang tidak ada.

Artikel Terkait