Javascript Async Error Handling Patterns Abortcontroller Retry Timeout

Definisi

Pola menangani kegagalan async dengan bersih: AbortController untuk membatalkan fetch, retry dengan backoff untuk transient error, dan timeout agar promise tidak menggantung. Tujuannya UX tangguh tanpa promise zombie.

Kapan dipakai

• AbortController: batalkan request saat user navigasi/ubah input.
• Retry: jaringan flaky (5xx, timeout) layak dicoba ulang terbatas.
• Timeout: fetch tanpa batas waktu bisa hang selamanya.

Cara kerja

Abort + timeout fetch

js

const ctrl = new AbortController();
const t = setTimeout(() => ctrl.abort(), 5000);
try {
  const res = await fetch('/api', { signal: ctrl.signal });
  return await res.json();
} catch (e) {
  if (e.name === 'AbortError') console.log('dibatalkan');
} finally {
  clearTimeout(t);
}

Retry dengan backoff

js

async function withRetry(fn, n = 3) {
  for (let i = 0; i < n; i++) {
    try { return await fn(); }
    catch (e) { if (i === n - 1) throw e; await new Promise(r => setTimeout(r, 2 ** i * 200)); }
  }
}

Struktur alur

Catatan implementasi

• AbortController bisa dishare ke beberapa fetch sekaligus.
• Jangan retry error 4xx (client error) — hanya 5xx/network.
• Backoff eksponensial + jitter menghindari thundering herd.
• Bersihkan timer di finally agar tidak bocor.

Kesalahan umum

• Lupa abort: request jalan terus setelah komponen unmount (memory/state leak).
• Retry 4xx: buang-buang attempt; cek status dulu.
• No timeout: fetch default tidak ada timeout; selalu pasang.
• Swallow AbortError: kadang butuh diam, tapi log minimal berguna.

Referensi terkait

• JavaScript Event Loop, Promise, async/await
• JavaScript Fetch API, async data flow, JSON parsing
• React Suspense for Data Libraries, Error Recovery