Error Handling API: Gagal dengan Anggun

API bisa gagal dengan tiga cara

Tidak semua request berakhir bahagia. Sebagai frontend developer, kamu harus siap menghadapi tiga jenis kegagalan:

1. Network error: internet mati, domain salah, atau server tidak bisa dijangkau. fetch melempar error di sini.
2. Timeout: server terlalu lama merespons. fetch tidak punya batas waktu bawaan, jadi request bisa menggantung selamanya kalau kamu tidak mengaturnya.
3. Server error: server merespons dengan status 4xx atau 5xx. fetch menganggap ini respons normal, jadi kamu yang harus memeriksanya.

Timeout dengan AbortController

Browser tidak menyediakan opsi timeout di fetch, tapi ada AbortController untuk membatalkan request secara manual:

async function fetchDenganTimeout(url, ms = 8000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), ms);

  try {
    const res = await fetch(url, { signal: controller.signal });
    if (!res.ok) throw new Error("Server error: " + res.status);
    return await res.json();
  } finally {
    clearTimeout(timer);
  }
}

Kalau request melewati 8 detik, controller membatalkannya dan fetch melempar error AbortError. Delapan detik adalah batas yang wajar untuk API normal; sesuaikan dengan kebutuhan.

Retry: coba lagi dengan jeda

Kegagalan sesekali (server restart, jaringan goyang) sering sembuh kalau dicoba lagi. Tapi jangan retry membabi buta:

async function fetchDenganRetry(url, percobaan = 3) {
  for (let i = 1; i <= percobaan; i++) {
    try {
      return await fetchDenganTimeout(url);
    } catch (err) {
      if (i === percobaan) throw err; // sudah terakhir, menyerah
      await new Promise((r) => setTimeout(r, 1000 * i)); // jeda makin lama
      console.log("Mencoba lagi (" + i + "/" + percobaan + ")...");
    }
  }
}

Jeda yang membesar tiap percobaan disebut exponential backoff versi sederhana. Aturan mainnya: retry hanya untuk error sementara (network error, 500, 503), jangan untuk 400 atau 401 karena mengulang request yang salah format tidak akan mengubah hasil.

Pesan yang ramah untuk user

Terakhir dan paling penting: terjemahkan error teknis menjadi bahasa manusia. User tidak peduli apa itu ECONNREFUSED.

• Failed to fetch menjadi "Koneksi bermasalah. Periksa internetmu lalu coba lagi."
• 404 menjadi "Data yang dicari tidak ditemukan."
• 500 menjadi "Server sedang bermasalah. Coba lagi beberapa saat."

Detail teknisnya cukup masuk console.error untuk kamu debugging.

Catatan teknis: Jangan pernah menampilkan pesan error mentah dari server (apalagi stack trace) ke user. Selain membingungkan, itu bisa membocorkan info sensitif seperti struktur database atau path file server. Tangkap error-nya, log untuk developer, tampilkan pesan umum untuk user. Kalau butuh info debug dari user, beri kode error acak yang bisa mereka laporkan, misalnya "Kode error: A7F3".