Penanganan Error Lanjutan di JavaScript Asynchronous: Membangun Aplikasi Web yang Lebih Tangguh

1. Pendahuluan

Sebagai developer web, kita sering berhadapan dengan operasi asynchronous: fetching data dari API, membaca file, atau menjalankan animasi. Operasi-operasi ini adalah tulang punggung aplikasi web modern yang responsif. Namun, dengan kekuatan asynchronous datanglah kompleksitas. Salah satu tantangan terbesarnya adalah penanganan error.

Pernahkah Anda mengalami aplikasi yang tiba-tiba “diam” tanpa pesan error yang jelas di konsol? Atau fitur yang gagal berfungsi karena satu request API bermasalah, padahal request lain baik-baik saja? Ini adalah tanda-tanda penanganan error asynchronous yang belum optimal.

Di artikel ini, kita akan menyelami lebih dalam berbagai strategi dan pola untuk menangani error di JavaScript asynchronous. Kita tidak hanya akan membahas try...catch dasar, tetapi juga teknik-teknik lanjutan seperti Promise.allSettled(), global error handlers, dan custom error classes, yang akan membantu Anda membangun aplikasi web yang lebih tangguh, mudah di-debug, dan memberikan pengalaman pengguna yang lebih baik.

Mari kita mulai perjalanan menuju kode asynchronous yang anti-badai! ⛈️🛡️

2. Mengapa Penanganan Error Asynchronous Itu Penting?

Bayangkan Anda memiliki sebuah aplikasi e-commerce. Saat pengguna mengklik tombol “Checkout”, aplikasi perlu melakukan beberapa hal secara asynchronous:

Mengirim detail pesanan ke backend.
Memperbarui stok produk.
Mengirim email konfirmasi ke pengguna.
Memproses pembayaran.

Jika salah satu dari langkah-langkah ini gagal (misalnya, pembayaran ditolak), apa yang terjadi?

Apakah aplikasi memberi tahu pengguna dengan jelas?
Apakah ada data yang tidak konsisten (pesanan terkirim tapi pembayaran gagal)?
Apakah error ini tercatat di sistem monitoring Anda?

Tanpa penanganan error yang tepat, skenario di atas bisa berujung pada:

Pengalaman Pengguna Buruk: Pengguna bingung, tidak tahu mengapa transaksinya gagal.
Data Inkonsisten: Database Anda bisa jadi kacau.
Sulit Debugging: Error “silent” yang terjadi di background membuat Anda pusing mencari penyebabnya.
Aplikasi Rapuh: Satu kegagalan kecil bisa merusak seluruh alur kerja.

Penanganan error asynchronous adalah tentang memastikan aplikasi Anda bisa bereaksi dengan cerdas terhadap kegagalan, memulihkan diri jika memungkinkan, dan memberikan informasi yang berguna bagi pengguna dan developer.

3. Dasar-Dasar Error Handling: `try...catch` dengan `async/await`

Sejak ES2017, async/await telah menjadi cara paling populer untuk menulis kode asynchronous yang terlihat dan terasa synchronous. Dan beruntungnya, try...catch bekerja dengan sangat baik di sini.

📌 Konsep Dasar: Ketika sebuah async function melempar error (baik secara eksplisit dengan throw atau karena Promise di dalamnya di-reject), error tersebut dapat ditangkap menggunakan blok try...catch.

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      // Melempar error jika response tidak OK (status code 4xx/5xx)
      throw new Error(`Gagal mengambil data user: ${response.statusText}`);
    }
    const data = await response.json();
    console.log('Data user:', data);
    return data;
  } catch (error) {
    console.error('Terjadi error saat fetching user data:', error.message);
    // Kita bisa melempar error lagi atau mengembalikan nilai default/null
    throw new Error('Operasi fetch user data gagal total.');
  }
}

// Cara memanggilnya
fetchUserData(123)
  .then(user => {
    if (user) {
      console.log('User berhasil diproses:', user.name);
    }
  })
  .catch(finalError => {
    console.error('Catching error dari luar async function:', finalError.message);
  });

fetchUserData(999); // Akan gagal jika user 999 tidak ada atau API error

💡 Tips Praktis:

Selalu periksa response.ok saat melakukan fetch karena fetch tidak akan melempar error untuk status HTTP 4xx atau 5xx secara default.
Jangan biarkan catch blok kosong! Minimal log error-nya. Lebih baik lagi, berikan feedback ke pengguna atau coba pulihkan.
Pertimbangkan untuk melempar error kustom (akan kita bahas nanti) agar lebih spesifik.

4. Mengelola Banyak Promise: `Promise.allSettled()` vs `Promise.all()`

Seringkali, aplikasi Anda perlu melakukan beberapa operasi asynchronous secara bersamaan. JavaScript menyediakan Promise.all() untuk skenario ini.

`Promise.all()`: “Semua atau Tidak Sama Sekali”

Promise.all() sangat berguna ketika Anda ingin semua promise berhasil. Jika ada satu promise saja yang gagal, Promise.all() akan segera me-reject dengan error dari promise yang gagal tersebut, dan mengabaikan hasil promise lain yang mungkin sudah berhasil.

async function processMultipleRequestsAll() {
  const request1 = fetch('https://api.example.com/data1');
  const request2 = fetch('https://api.example.com/data2'); // Anggap ini gagal
  const request3 = fetch('https://api.example.com/data3');

  try {
    const [result1, result2, result3] = await Promise.all([request1, request2, request3]);
    console.log('Semua request berhasil:', result1, result2, result3);
  } catch (error) {
    console.error('Salah satu request gagal:', error.message);
    // Anda hanya akan mendapatkan error dari request2
  }
}

❌ Kelemahan Promise.all(): Jika Anda membutuhkan hasil dari promise-promise yang berhasil meskipun ada yang gagal, Promise.all() tidak cocok. Ini adalah pola “fail-fast”.

`Promise.allSettled()`: “Laporkan Semua Hasil”

Diperkenalkan di ES2020, Promise.allSettled() adalah solusi elegan untuk skenario di mana Anda ingin menunggu semua promise selesai (baik fulfilled atau rejected) dan mendapatkan laporan status dari masing-masing promise.

async function processMultipleRequestsSettled() {
  const request1 = fetch('https://api.example.com/data1').then(res => res.json());
  const request2 = Promise.reject(new Error('Gagal mengambil data2 dari API')); // Anggap ini gagal
  const request3 = fetch('https://api.example.com/data3').then(res => res.json());

  const results = await Promise.allSettled([request1, request2, request3]);

  console.log('Laporan semua request:', results);
  // results akan berupa array objek seperti ini:
  // [
  //   { status: 'fulfilled', value: { /* data dari data1 */ } },
  //   { status: 'rejected', reason: Error('Gagal mengambil data2 dari API') },
  //   { status: 'fulfilled', value: { /* data dari data3 */ } }
  // ]

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`✅ Request ${index + 1} berhasil:`, result.value);
    } else {
      console.error(`❌ Request ${index + 1} gagal:`, result.reason.message);
      // Anda bisa melakukan penanganan error spesifik di sini,
      // misalnya menampilkan pesan error untuk bagian UI tertentu.
    }
  });
}

processMultipleRequestsSettled();

🎯 Kapan Menggunakan Promise.allSettled():

Ketika Anda perlu menjalankan beberapa operasi independen dan ingin tahu hasil dari masing-masing, terlepas dari apakah yang lain berhasil atau gagal.
Contoh: Mengambil data untuk beberapa widget di dashboard yang berbeda. Jika satu widget gagal, widget lain tetap bisa tampil.
Contoh: Mengirim notifikasi ke beberapa layanan pihak ketiga. Anda ingin tahu notifikasi mana yang terkirim dan mana yang gagal.

Dengan Promise.allSettled(), Anda mendapatkan kontrol lebih granular atas penanganan error saat bekerja dengan banyak promise.

5. Penanganan Error Global dan Custom Error Classes

Selain try...catch di level fungsi, penting juga untuk memiliki mekanisme penanganan error global untuk menangkap error yang mungkin terlewat atau tidak ditangani secara eksplisit.

A. Penanganan Error Global di Browser

Browser menyediakan dua event global yang sangat berguna:

window.onerror: Menangkap error JavaScript synchronous yang tidak tertangkap.
window.onunhandledrejection: Menangkap promise yang di-reject tetapi tidak memiliki .catch() handler.

// Menangkap error synchronous
window.onerror = function(message, source, lineno, colno, error) {
  console.error('🚨 Global Error (Synchronous):', { message, source, lineno, colno, error });
  // Laporkan error ini ke layanan error monitoring Anda (Sentry, Bugsnag, dll.)
  return true; // Mengembalikan true mencegah error default browser
};

// Menangkap promise yang tidak ditangani
window.onunhandledrejection = function(event) {
  console.error('🚨 Global Error (Unhandled Promise Rejection):', event.reason);
  // event.reason berisi objek error dari promise yang ditolak
  // Laporkan error ini ke layanan error monitoring Anda
  event.preventDefault(); // Mencegah error default browser
};

// Contoh error synchronous (akan ditangkap oleh window.onerror)
// throw new Error('Ini error synchronous yang tidak tertangkap!');

// Contoh promise rejection yang tidak ditangani (akan ditangkap oleh onunhandledrejection)
// Promise.reject('Ups, promise ini lupa di-catch!');

⚠️ Penting: Penanganan error global adalah last resort. Selalu usahakan untuk menangani error sedekat mungkin dengan sumbernya menggunakan try...catch atau .catch(). Event global ini lebih untuk catch-all dan memastikan tidak ada error yang luput dari pantauan.

B. Custom Error Classes

Error bawaan JavaScript seperti Error, TypeError, atau ReferenceError terkadang terlalu generik. Dengan membuat custom error class, Anda bisa memberikan konteks yang lebih spesifik pada error Anda.

class NetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.name = 'NetworkError'; // Nama custom error
    this.status = status; // Tambahan properti status HTTP
  }
}

class ValidationError extends Error {
  constructor(message, errors = {}) {
    super(message);
    this.name = 'ValidationError';
    this.errors = errors; // Objek yang berisi detail validasi
  }
}

async function submitForm(formData) {
  try {
    const response = await fetch('https://api.example.com/submit', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' }
    });

    if (response.status === 400) {
      const errorData = await response.json();
      throw new ValidationError('Data formulir tidak valid', errorData.errors);
    }
    if (!response.ok) {
      throw new NetworkError(`Gagal submit formulir`, response.status);
    }

    const result = await response.json();
    console.log('Form berhasil disubmit:', result);
    return result;
  } catch (error) {
    if (error instanceof ValidationError) {
      console.error('❌ Error Validasi:', error.message, error.errors);
      // Tampilkan error validasi ke pengguna di UI
    } else if (error instanceof NetworkError) {
      console.error('❌ Error Jaringan:', error.message, 'Status:', error.status);
      // Tampilkan pesan error jaringan generik
    } else {
      console.error('❌ Error Tak Terduga:', error);
    }
    throw error; // Melempar error lagi agar bisa ditangkap di level yang lebih tinggi
  }
}

// Contoh penggunaan
submitForm({ name: 'John Doe', email: 'invalid-email' })
  .catch(err => console.log('Ditangkap di level teratas:', err.name));

✅ Manfaat Custom Error Classes:

Klarifikasi: Memberikan informasi yang lebih jelas tentang jenis error.
Debugging Lebih Mudah: Dengan instanceof, Anda bisa membedakan dan menangani jenis error secara spesifik.
Kode Lebih Bersih: Logika penanganan error menjadi lebih terstruktur.

6. Strategi Retry dan Fallback (Singkat)

Membangun aplikasi yang tangguh bukan hanya tentang menangkap error, tetapi juga tentang bagaimana aplikasi bisa “pulih” dari error tersebut.

Retry (Mencoba Kembali): Untuk error sementara (misalnya, masalah jaringan sesaat, API rate limit), mencoba kembali operasi setelah beberapa saat bisa menjadi solusi efektif. Pola seperti Exponential Backoff (mencoba kembali dengan interval waktu yang makin panjang) sering digunakan.

Baca Juga: Strategi Retry dan Exponential Backoff: Membangun Aplikasi yang Tahan Banting di Dunia Nyata
Fallback: Jika sebuah operasi gagal secara permanen atau setelah beberapa kali retry, aplikasi bisa beralih ke fungsionalitas alternatif (fallback).
- Contoh: Jika fetching data rekomendasi gagal, tampilkan saja produk terlaris.
- Contoh: Jika API utama down, coba gunakan API cadangan (walaupun mungkin dengan fitur terbatas).

Implementasi retry dan fallback biasanya melibatkan logika yang lebih kompleks dan sering ditemukan di lapisan service atau data-fetching.

7. Pentingnya Logging dan Monitoring Error

Menangani error di kode saja tidak cukup. Anda perlu tahu kapan dan di mana error terjadi di lingkungan produksi Anda.

Logging: Setiap error yang ditangkap harus di-log. Gunakan structured logging untuk memudahkan analisis.
Error Monitoring Tools: Integrasikan aplikasi Anda dengan layanan seperti Sentry, Bugsnag, atau Datadog. Alat-alat ini akan secara otomatis menangkap error, mengumpulkan konteks (stack trace, user info, browser environment), dan memberi tahu Anda.

Baca Juga: Client-Side Error Logging yang Efektif: Menangkap, Menganalisis, dan Melaporkan Bug di Aplikasi Web Anda Baca Juga: Error Monitoring dan Reporting: Menangkap dan Menganalisis Bug di Aplikasi Web Anda

Dengan logging dan monitoring yang baik, Anda bisa proaktif dalam memperbaiki bug dan menjaga kesehatan aplikasi Anda.

Kesimpulan

Penanganan error di JavaScript asynchronous adalah aspek krusial dalam membangun aplikasi web yang berkualitas tinggi. Dengan memahami perbedaan antara Promise.all() dan Promise.allSettled(), memanfaatkan global error handlers, dan merancang custom error classes, Anda memiliki perangkat yang lebih lengkap untuk membuat kode yang lebih tangguh dan mudah di-maintenance.

Ingatlah, tujuan utama bukan hanya mencegah aplikasi crash, tetapi juga memberikan pengalaman pengguna yang mulus dan informasi yang jelas saat ada masalah. Dengan menerapkan strategi-strategi ini, Anda tidak hanya memperbaiki bug, tetapi juga membangun kepercayaan pada aplikasi Anda. Selamat mencoba! ✨