Mengimplementasikan penanganan error saat menggunakan Fetch API

Umar Hansa

Artikel ini menunjukkan beberapa pendekatan penanganan error saat menggunakan Fetch API. Fetch API memungkinkan Anda membuat permintaan ke resource jaringan jarak jauh. Saat Anda melakukan panggilan jaringan jarak jauh, halaman web Anda akan mengalami berbagai potensi error jaringan.

Bagian berikut menjelaskan potensi error dan menjelaskan cara menulis kode yang memberikan tingkat fungsi yang wajar dan tahan terhadap error serta kondisi jaringan yang tidak terduga. Kode yang tangguh akan membuat pengguna Anda tetap puas dan mempertahankan tingkat layanan standar untuk situs Anda.

Mengantisipasi potensi error jaringan

Bagian ini menjelaskan skenario saat pengguna membuat video baru bernama "My Travels.mp4", lalu mencoba mengupload video tersebut ke situs berbagi video.

Saat menggunakan Fetch, Anda dapat dengan mudah mempertimbangkan jalur yang baik saat pengguna berhasil mengupload video. Namun, ada jalur lain yang tidak selancar itu, tetapi developer web harus merencanakannya. Jalur (tidak memuaskan) tersebut dapat terjadi karena kesalahan pengguna, melalui kondisi lingkungan yang tidak terduga, atau karena bug di situs web berbagi video.

Contoh error pengguna

• Pengguna mengupload file gambar (seperti JPEG), bukan file video.
• Pengguna mulai mengupload file video yang salah. Kemudian, di tengah proses upload, pengguna menentukan file video yang benar untuk diupload.
• Pengguna tidak sengaja mengklik "Batalkan upload" saat video sedang diupload.

Contoh perubahan lingkungan

• Koneksi internet menjadi offline saat video diupload.
• Browser dimulai ulang saat video diupload.
• Server untuk situs berbagi video dimulai ulang saat video diupload.

Contoh error pada situs berbagi video

• Situs berbagi video tidak dapat menangani nama file dengan spasi. Sebagai ganti "My Travels.mp4", metode ini mengharapkan nama seperti "My_Travels.mp4" atau "MyTravels.mp4".
• Situs berbagi video tidak dapat mengupload video yang melebihi ukuran file maksimum yang dapat diterima.
• Situs berbagi video tidak mendukung codec video dalam video yang diupload.

Contoh-contoh ini dapat dan memang terjadi di dunia nyata. Anda mungkin pernah menemukan contoh seperti itu di masa lalu. Mari kita pilih satu contoh dari setiap kategori sebelumnya, dan bahas poin-poin berikut:

• Apa perilaku default jika layanan berbagi video tidak dapat menangani contoh yang diberikan?
• Apa yang diharapkan pengguna akan terjadi dalam contoh ini?
• Bagaimana cara kami meningkatkan prosesnya?

Menangani error dengan Fetch API

Perhatikan bahwa contoh kode berikut menggunakan await tingkat atas (dukungan browser) karena fitur ini dapat menyederhanakan kode Anda.

Saat Fetch API menampilkan error

Contoh ini menggunakan pernyataan blok try/catch untuk menangkap error yang ditampilkan dalam blok try. Misalnya, jika Fetch API tidak dapat mengambil resource yang ditentukan, error akan ditampilkan. Dalam blok catch seperti ini, berhati-hatilah untuk memberikan pengalaman pengguna yang bermakna. Jika indikator lingkaran berputar, antarmuka pengguna umum yang mewakili semacam progres, ditampilkan kepada pengguna, Anda dapat melakukan tindakan berikut dalam blok catch:

1. Hapus indikator lingkaran berputar dari halaman.
2. Berikan pesan bermanfaat yang menjelaskan masalahnya, dan opsi yang dapat diambil pengguna.
3. Berdasarkan opsi yang tersedia, tampilkan tombol "Coba lagi" kepada pengguna.
4. Di balik layar, kirimkan detail error ke layanan pelacakan error, atau ke backend. Tindakan ini akan mencatat error dalam log sehingga dapat didiagnosis pada tahap berikutnya.

try {
  const response = await fetch('https://website');
} catch (error) {
  // TypeError: Failed to fetch
  console.log('There was an error', error);
}

Pada tahap selanjutnya, saat mendiagnosis error yang dicatat dalam log, Anda dapat menulis kasus pengujian untuk menangkap error tersebut sebelum pengguna mengetahui bahwa ada yang salah. Bergantung pada error, pengujian dapat berupa pengujian unit, integrasi, atau penerimaan.

Jika kode status jaringan merepresentasikan error

Contoh kode ini membuat permintaan ke layanan pengujian HTTP yang selalu merespons dengan kode status HTTP 429 Too Many Requests. Menariknya, respons tidak mencapai blok catch. Status 404, di antara kode status tertentu lainnya, tidak menampilkan error jaringan, tetapi me-resolve secara normal.

Untuk memeriksa apakah kode status HTTP berhasil, Anda dapat menggunakan salah satu opsi berikut:

• Gunakan properti Response.ok untuk menentukan apakah kode status berada dalam rentang dari 200 hingga 299.
• Gunakan properti Response.status untuk menentukan apakah respons berhasil.
• Gunakan metadata lain, seperti Response.headers, untuk menilai apakah respons berhasil.

let response;

try {
  response = await fetch('https://httpbin.org/status/429');
} catch (error) {
  console.log('There was an error', error);
}

// Uses the 'optional chaining' operator
if (response?.ok) {
  console.log('Use the response here!');
} else {
  console.log(`HTTP Response Code: ${response?.status}`)
}

Praktik terbaiknya adalah bekerja sama dengan orang-orang di organisasi dan tim Anda untuk memahami kemungkinan kode status respons HTTP. Pengembang {i>backend<i}, operasi pengembang, dan insinyur layanan terkadang dapat memberikan wawasan unik tentang kemungkinan kasus ekstrem yang mungkin tidak Anda antisipasi.

Jika terjadi error saat mengurai respons jaringan

Contoh kode ini menunjukkan jenis error lain yang dapat muncul saat mengurai isi respons. Antarmuka Response menawarkan metode yang mudah untuk mengurai berbagai jenis data, seperti teks atau JSON. Dalam kode berikut, permintaan jaringan dibuat ke layanan pengujian HTTP yang menampilkan string HTML sebagai isi respons. Namun, upaya dilakukan untuk mengurai isi respons sebagai JSON, yang menampilkan error.

let json;

try {
  const response = await fetch('https://httpbin.org/html');
  json = await response.json();
} catch (error) {
  if (error instanceof SyntaxError) {
    // Unexpected token < in JSON
    console.log('There was a SyntaxError', error);
  } else {
    console.log('There was an error', error);
  }
}

if (json) {
  console.log('Use the JSON here!', json);
}

Anda harus menyiapkan kode untuk menerima berbagai format respons, dan memverifikasi bahwa respons yang tidak terduga tidak merusak halaman web bagi pengguna.

Pertimbangkan skenario berikut: Anda memiliki resource jarak jauh yang menampilkan respons JSON yang valid, dan berhasil diuraikan dengan metode Response.json(). Bisa jadi layanan tidak berfungsi. Setelah dinonaktifkan, 500 Internal Server Error akan ditampilkan. Jika teknik penanganan error yang sesuai tidak digunakan selama penguraian JSON, hal ini dapat merusak halaman bagi pengguna karena error yang tidak ditangani ditampilkan.

Saat permintaan jaringan harus dibatalkan sebelum selesai

Contoh kode ini menggunakan AbortController untuk membatalkan permintaan yang sedang berlangsung. Permintaan yang sedang berlangsung adalah permintaan jaringan yang telah dimulai, tetapi belum selesai.

Skenario saat Anda mungkin perlu membatalkan permintaan yang sedang berlangsung dapat bervariasi, tetapi pada akhirnya bergantung pada kasus penggunaan dan lingkungan Anda. Kode berikut menunjukkan cara meneruskan AbortSignal ke Fetch API. AbortSignal dilampirkan ke AbortController, dan AbortController menyertakan metode abort(), yang memberi tahu browser bahwa permintaan jaringan harus dibatalkan.

const controller = new AbortController();
const signal = controller.signal;

// Cancel the fetch request in 500ms
setTimeout(() => controller.abort(), 500);

try {
  const url = 'https://httpbin.org/delay/1';
  const response = await fetch(url, { signal });
  console.log(response);
} catch (error) {
  // DOMException: The user aborted a request.
  console.log('Error: ', error)
}

Kesimpulan

Salah satu aspek penting dalam menangani error adalah menentukan berbagai bagian yang dapat mengalami error. Untuk setiap skenario, pastikan Anda memiliki penggantian yang sesuai untuk pengguna. Sehubungan dengan permintaan pengambilan, tanyakan pada diri Anda pertanyaan seperti:

• Apa yang terjadi jika server target berhenti berfungsi?
• Apa yang terjadi jika Pengambilan menerima respons yang tidak terduga?
• Apa yang terjadi jika koneksi internet pengguna gagal?

Bergantung pada kompleksitas halaman web, Anda juga dapat membuat sketsa diagram alir yang menjelaskan fungsi dan antarmuka pengguna untuk berbagai skenario.