Propagasi Error Helper Async Iterator JavaScript: Penanganan Error Stream untuk Aplikasi yang Tangguh

Pemrograman asinkron telah menjadi hal yang umum dalam pengembangan JavaScript modern, terutama saat berhadapan dengan aliran data (stream). Async iterator dan fungsi async generator menyediakan alat yang kuat untuk memproses data secara asinkron, elemen demi elemen. Namun, menangani error dengan baik dalam konstruksi ini sangat penting untuk membangun aplikasi yang tangguh dan andal. Panduan komprehensif ini menjelajahi seluk-beluk propagasi error pada helper async iterator JavaScript, memberikan contoh praktis dan praktik terbaik untuk mengelola error secara efektif dalam aplikasi streaming.

Memahami Async Iterator dan Fungsi Async Generator

Sebelum masuk ke penanganan error, mari kita tinjau secara singkat konsep dasar async iterator dan fungsi async generator.

Async Iterator

Async iterator adalah objek yang menyediakan metode next(), yang mengembalikan sebuah promise yang me-resolve menjadi objek dengan properti value dan done. Properti value menyimpan nilai berikutnya dalam urutan, dan properti done menunjukkan apakah iterator telah selesai.

Contoh:

            async function* createAsyncIterator(data) {
  for (const item of data) {
    await new Promise(resolve => setTimeout(resolve, 50)); // Mensimulasikan operasi asinkron
    yield item;
  }
}

const asyncIterator = createAsyncIterator([1, 2, 3]);

async function consumeIterator() {
  let result = await asyncIterator.next();
  while (!result.done) {
    console.log(result.value);
    result = await asyncIterator.next();
  }
}

consumeIterator(); // Output: 1, 2, 3 (dengan jeda)
            

              
                Copy
              
            
          

Fungsi Async Generator

Fungsi async generator adalah jenis fungsi khusus yang mengembalikan async iterator. Fungsi ini menggunakan kata kunci yield untuk menghasilkan nilai secara asinkron.

Contoh:

            async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 100)); // Mensimulasikan operasi asinkron
    yield i;
  }
}

async function consumeGenerator() {
  for await (const num of generateSequence(1, 5)) {
    console.log(num);
  }
}

consumeGenerator(); // Output: 1, 2, 3, 4, 5 (dengan jeda)
            

              
                Copy
              
            
          

Tantangan Penanganan Error dalam Stream Asinkron

Penanganan error dalam stream asinkron menyajikan tantangan unik dibandingkan dengan kode sinkron. Blok try/catch tradisional hanya dapat menangkap error yang terjadi dalam lingkup sinkron langsung. Saat berhadapan dengan operasi asinkron dalam async iterator atau generator, error dapat terjadi pada titik waktu yang berbeda, memerlukan pendekatan yang lebih canggih untuk propagasi error.

Pertimbangkan skenario di mana Anda memproses data dari API jarak jauh. API tersebut mungkin mengembalikan error kapan saja, seperti kegagalan jaringan atau masalah di sisi server. Aplikasi Anda harus dapat menangani error ini dengan baik, mencatatnya, dan berpotensi mencoba kembali operasi atau memberikan nilai fallback.

Strategi Propagasi Error pada Helper Async Iterator

Beberapa strategi dapat digunakan untuk menangani error secara efektif pada helper async iterator. Mari kita jelajahi beberapa teknik yang paling umum dan efektif.

1. Blok Try/Catch di Dalam Fungsi Async Generator

Salah satu pendekatan yang paling langsung adalah dengan membungkus operasi asinkron di dalam fungsi async generator dengan blok try/catch. Ini memungkinkan Anda untuk menangkap error yang terjadi selama eksekusi generator dan menanganinya sesuai kebutuhan.

Contoh:

            async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}:`, error);
      // Opsional, yield nilai fallback atau lempar kembali error
      yield { error: error.message, url: url }; // Yield sebuah objek error
    }
  }
}

async function consumeData() {
  for await (const item of fetchData(['https://example.com/data1', 'https://example.com/data2'])) {
    if (item.error) {
      console.warn(`Encountered an error for URL: ${item.url}, Error: ${item.error}`);
    } else {
      console.log('Received data:', item);
    }
  }
}

consumeData();
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi generator fetchData mengambil data dari daftar URL. Jika terjadi error selama operasi fetch, blok catch akan mencatat error dan me-yield objek error. Fungsi konsumen kemudian memeriksa properti error pada nilai yang di-yield dan menanganinya sesuai. Pola ini memastikan bahwa error dilokalkan dan ditangani di dalam generator, mencegah seluruh stream dari kerusakan.

2. Menggunakan `Promise.prototype.catch` untuk Penanganan Error

Teknik umum lainnya melibatkan penggunaan metode .catch() pada promise di dalam fungsi async generator. Ini memungkinkan Anda untuk menangani error yang terjadi selama resolusi sebuah promise.

Contoh:

            async function* fetchData(urls) {
  for (const url of urls) {
    const promise = fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .catch(error => {
        console.error(`Error fetching data from ${url}:`, error);
        return { error: error.message, url: url }; // Kembalikan sebuah objek error
      });

    yield await promise;
  }
}

async function consumeData() {
  for await (const item of fetchData(['https://example.com/data1', 'https://example.com/data2'])) {
    if (item.error) {
      console.warn(`Encountered an error for URL: ${item.url}, Error: ${item.error}`);
    } else {
      console.log('Received data:', item);
    }
  }
}

consumeData();
            

              
                Copy
              
            
          

Dalam contoh ini, metode .catch() digunakan untuk menangani error yang terjadi selama operasi fetch. Jika terjadi error, blok catch akan mencatat error dan mengembalikan objek error. Fungsi generator kemudian me-yield hasil dari promise, yang bisa berupa data yang diambil atau objek error. Pendekatan ini menyediakan cara yang bersih dan ringkas untuk menangani error yang terjadi selama resolusi promise.

3. Mengimplementasikan Fungsi Bantuan Penanganan Error Kustom

Untuk skenario penanganan error yang lebih kompleks, akan bermanfaat untuk membuat fungsi bantuan penanganan error kustom. Fungsi ini dapat mengenkapsulasi logika penanganan error dan menyediakan cara yang konsisten untuk menangani error di seluruh aplikasi Anda.

Contoh:

            async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Error fetching data from ${url}:`, error);
    return { error: error.message, url: url }; // Kembalikan sebuah objek error
  }
}

async function* fetchData(urls) {
  for (const url of urls) {
    yield await safeFetch(url);
  }
}

async function consumeData() {
  for await (const item of fetchData(['https://example.com/data1', 'https://example.com/data2'])) {
    if (item.error) {
      console.warn(`Encountered an error for URL: ${item.url}, Error: ${item.error}`);
    } else {
      console.log('Received data:', item);
    }
  }
}

consumeData();
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi safeFetch mengenkapsulasi logika penanganan error untuk operasi fetch. Fungsi generator fetchData kemudian menggunakan fungsi safeFetch untuk mengambil data dari setiap URL. Pendekatan ini mempromosikan penggunaan kembali kode dan kemudahan pemeliharaan.

4. Menggunakan Helper Async Iterator: `map`, `filter`, `reduce` dan Penanganan Error

Helper async iterator JavaScript (`map`, `filter`, `reduce`, dll.) menyediakan cara yang mudah untuk mengubah dan memproses stream asinkron. Saat menggunakan helper ini, sangat penting untuk memahami bagaimana error dipropagasi dan bagaimana menanganinya secara efektif.

a) Penanganan Error di `map`

Helper map menerapkan fungsi transformasi ke setiap elemen dari stream asinkron. Jika fungsi transformasi melempar error, error tersebut akan dipropagasi ke konsumen.

Contoh:

            async function* generateNumbers(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

async function consumeData() {
  try {
    const asyncIterable = generateNumbers(5);

    const mappedIterable = asyncIterable.map(async (num) => {
      if (num === 3) {
        throw new Error('Error processing number 3');
      }
      return num * 2;
    });

    for await (const item of mappedIterable) {
      console.log(item);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

consumeData(); // Output: 2, 4, Terjadi error: Error: Error memproses angka 3
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi transformasi melempar error saat memproses angka 3. Error tersebut ditangkap oleh blok catch di fungsi consumeData. Perhatikan bahwa error menghentikan iterasi.

b) Penanganan Error di `filter`

Helper filter menyaring elemen dari stream asinkron berdasarkan fungsi predikat. Jika fungsi predikat melempar error, error tersebut akan dipropagasi ke konsumen.

Contoh:

            async function* generateNumbers(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

async function consumeData() {
  try {
    const asyncIterable = generateNumbers(5);

    const filteredIterable = asyncIterable.filter(async (num) => {
      if (num === 3) {
        throw new Error('Error filtering number 3');
      }
      return num % 2 === 0;
    });

    for await (const item of filteredIterable) {
      console.log(item);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

consumeData(); // Output: Terjadi error: Error: Error menyaring angka 3
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi predikat melempar error saat memproses angka 3. Error tersebut ditangkap oleh blok catch di fungsi consumeData.

c) Penanganan Error di `reduce`

Helper reduce mereduksi stream asinkron menjadi satu nilai menggunakan fungsi reducer. Jika fungsi reducer melempar error, error tersebut akan dipropagasi ke konsumen.

Contoh:

            async function* generateNumbers(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

async function consumeData() {
  try {
    const asyncIterable = generateNumbers(5);

    const sum = await asyncIterable.reduce(async (acc, num) => {
      if (num === 3) {
        throw new Error('Error reducing number 3');
      }
      return acc + num;
    }, 0);

    console.log('Sum:', sum);
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

consumeData(); // Output: Terjadi error: Error: Error mereduksi angka 3
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi reducer melempar error saat memproses angka 3. Error tersebut ditangkap oleh blok catch di fungsi consumeData.

5. Penanganan Error Global dengan `process.on('unhandledRejection')` (Node.js) atau `window.addEventListener('unhandledrejection')` (Browser)

Meskipun tidak spesifik untuk async iterator, mengonfigurasi mekanisme penanganan error global dapat memberikan jaring pengaman untuk penolakan promise yang tidak tertangani yang mungkin terjadi di dalam stream Anda. Ini sangat penting di lingkungan Node.js.

Contoh Node.js:

            process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
  // Opsional, lakukan pembersihan atau keluar dari proses
});

async function* generateNumbers(n) {
  for (let i = 1; i <= n; i++) {
    if (i === 3) {
      throw new Error('Simulated Error'); // Ini akan menyebabkan unhandled rejection jika tidak ditangkap secara lokal
    }
    yield i;
  }
}

async function main() {
  const iterator = generateNumbers(5);
  for await (const num of iterator) {
    console.log(num);
  }
}

main(); // Akan memicu 'unhandledRejection' jika error di dalam generator tidak ditangani.
            

              
                Copy
              
            
          

Contoh Browser:

            window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason, event.promise);
  // Anda dapat mencatat error atau menampilkan pesan yang ramah pengguna di sini.
});

async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`); // Mungkin menyebabkan unhandled rejection jika `fetchData` tidak dibungkus dalam try/catch
  }
  return response.json();
}

async function processData() {
  const data = await fetchData('https://example.com/api/nonexistent'); // URL yang kemungkinan akan menyebabkan error.
  console.log(data);
}

processData();
            

              
                Copy
              
            
          

Pertimbangan Penting:

• Debugging: Handler global berharga untuk mencatat dan men-debug penolakan yang tidak tertangani.
• Pembersihan: Anda dapat menggunakan handler ini untuk melakukan operasi pembersihan sebelum aplikasi crash.
• Mencegah Crash: Meskipun mereka mencatat error, mereka *tidak* mencegah aplikasi dari potensi crash jika error tersebut secara fundamental merusak logika. Oleh karena itu, penanganan error lokal di dalam stream asinkron selalu menjadi pertahanan utama.

Praktik Terbaik untuk Penanganan Error pada Helper Async Iterator

Untuk memastikan penanganan error yang tangguh pada helper async iterator Anda, pertimbangkan praktik terbaik berikut:

• Lokalkan Penanganan Error: Tangani error sedekat mungkin dengan sumbernya. Gunakan blok try/catch atau metode .catch() di dalam fungsi async generator untuk menangkap error yang terjadi selama operasi asinkron.
• Sediakan Nilai Fallback: Saat terjadi error, pertimbangkan untuk me-yield nilai fallback atau nilai default untuk mencegah seluruh stream dari crash. Ini memungkinkan konsumen untuk terus memproses stream meskipun beberapa elemen tidak valid.
• Catat Error: Catat error dengan detail yang cukup untuk memfasilitasi debugging. Sertakan informasi seperti URL, pesan error, dan jejak tumpukan (stack trace).
• Coba Ulang Operasi: Untuk error sementara, seperti kegagalan jaringan, pertimbangkan untuk mencoba kembali operasi setelah jeda singkat. Terapkan mekanisme coba ulang dengan jumlah percobaan maksimum untuk menghindari perulangan tak terbatas.
• Gunakan Fungsi Bantuan Penanganan Error Kustom: Enkapsulasi logika penanganan error dalam fungsi bantuan kustom untuk mempromosikan penggunaan kembali kode dan kemudahan pemeliharaan.
• Pertimbangkan Penanganan Error Global: Terapkan mekanisme penanganan error global, seperti process.on('unhandledRejection') di Node.js, untuk menangkap penolakan promise yang tidak tertangani. Namun, andalkan penanganan error lokal sebagai pertahanan utama.
• Pemberhentian yang Baik (Graceful Shutdown): Dalam aplikasi sisi server, pastikan kode pemrosesan stream asinkron Anda menangani sinyal seperti SIGINT (Ctrl+C) dan SIGTERM dengan baik untuk mencegah kehilangan data dan memastikan pemberhentian yang bersih. Ini melibatkan penutupan sumber daya (koneksi basis data, handle file, koneksi jaringan) dan menyelesaikan operasi yang tertunda.
• Pantau dan Beri Peringatan: Terapkan sistem pemantauan dan peringatan untuk mendeteksi dan merespons error dalam kode pemrosesan stream asinkron Anda. Ini akan membantu Anda mengidentifikasi dan memperbaiki masalah sebelum berdampak pada pengguna Anda.

Contoh Praktis: Penanganan Error dalam Skenario Dunia Nyata

Mari kita periksa beberapa contoh praktis penanganan error dalam skenario dunia nyata yang melibatkan helper async iterator.

Contoh 1: Memproses Data dari Beberapa API dengan Mekanisme Fallback

Bayangkan Anda perlu mengambil data dari beberapa API. Jika satu API gagal, Anda ingin menggunakan API fallback atau mengembalikan nilai default.

            async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Error fetching data from ${url}:`, error);
    return null; // Menandakan kegagalan
  }
}

async function* fetchDataWithFallback(apiUrls, fallbackUrl) {
  for (const apiUrl of apiUrls) {
    let data = await safeFetch(apiUrl);
    if (data === null) {
      console.log(`Attempting fallback for ${apiUrl}`);
      data = await safeFetch(fallbackUrl);
      if (data === null) {
        console.warn(`Fallback also failed for ${apiUrl}. Returning default value.`);
        yield { error: `Failed to fetch data from ${apiUrl} and fallback.` };
        continue; // Lanjut ke URL berikutnya
      }
    }
    yield data;
  }
}

async function processData() {
  const apiUrls = ['https://api.example.com/data1', 'https://api.nonexistent.com/data2', 'https://api.example.com/data3'];
  const fallbackUrl = 'https://backup.example.com/default_data';
  for await (const item of fetchDataWithFallback(apiUrls, fallbackUrl)) {
    if (item.error) {
      console.warn(`Error processing data: ${item.error}`);
    } else {
      console.log('Processed data:', item);
    }
  }
}

processData();
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi generator fetchDataWithFallback mencoba mengambil data dari daftar API. Jika sebuah API gagal, ia mencoba mengambil data dari API fallback. Jika API fallback juga gagal, ia mencatat peringatan dan me-yield objek error. Fungsi konsumen kemudian menangani error tersebut sesuai kebutuhan.

Contoh 2: Pembatasan Laju (Rate Limiting) dengan Penanganan Error

Saat berinteraksi dengan API, terutama API pihak ketiga, Anda sering kali perlu menerapkan pembatasan laju untuk menghindari melebihi batas penggunaan API. Penanganan error yang tepat sangat penting untuk mengelola error pembatasan laju.

            const rateLimit = 5; // Jumlah permintaan per detik
let requestCount = 0;
let lastRequestTime = 0;

async function throttledFetch(url) {
  const now = Date.now();
  if (requestCount >= rateLimit && now - lastRequestTime < 1000) {
    const delay = 1000 - (now - lastRequestTime);
    console.log(`Rate limit exceeded. Waiting ${delay}ms...`);
    await new Promise(resolve => setTimeout(resolve, delay));
  }

  try {
    const response = await fetch(url);
    if (response.status === 429) { // Batas laju terlampaui
      console.warn('Rate limit exceeded. Retrying after a delay...');
      await new Promise(resolve => setTimeout(resolve, 2000)); // Tunggu lebih lama
      return throttledFetch(url); // Coba lagi
    }

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

    const data = await response.json();
    requestCount++;
    lastRequestTime = Date.now();
    return data;

  } catch (error) {
    console.error(`Error fetching ${url}:`, error);
    throw error; // Lempar kembali error setelah mencatat
  }
}

async function* fetchUrls(urls) {
  for (const url of urls) {
    try {
      yield await throttledFetch(url);
    } catch (err) {
      console.error(`Failed to fetch URL ${url} after retries. Skipping.`);
      yield { error: `Failed to fetch ${url}` }; // Memberi sinyal error ke konsumen
    }
  }
}

async function consumeData() {
  const urls = ['https://api.example.com/resource1', 'https://api.example.com/resource2', 'https://api.example.com/resource3'];
  for await (const item of fetchUrls(urls)) {
    if (item.error) {
      console.warn(`Error: ${item.error}`);
    } else {
      console.log('Data:', item);
    }
  }
}

consumeData();
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi throttledFetch menerapkan pembatasan laju dengan melacak jumlah permintaan yang dibuat dalam satu detik. Jika batas laju terlampaui, ia menunggu sejenak sebelum membuat permintaan berikutnya. Jika error 429 (Too Many Requests) diterima, ia menunggu lebih lama dan mencoba kembali permintaan tersebut. Error juga dicatat dan dilempar kembali untuk ditangani oleh pemanggil.

Kesimpulan

Penanganan error adalah aspek penting dari pemrograman asinkron, terutama saat bekerja dengan async iterator dan fungsi async generator. Dengan memahami strategi propagasi error dan menerapkan praktik terbaik, Anda dapat membangun aplikasi streaming yang tangguh dan andal yang menangani error dengan baik dan mencegah crash yang tidak terduga. Ingatlah untuk memprioritaskan penanganan error lokal, menyediakan nilai fallback, mencatat error secara efektif, dan mempertimbangkan mekanisme penanganan error global untuk ketahanan tambahan. Selalu ingat untuk merancang untuk kegagalan dan membangun aplikasi Anda agar dapat pulih dengan baik dari error.