Mengimplementasikan penanganan error saat menggunakan Fetch API

Umar Hansa

Artikel ini menunjukkan beberapa pendekatan penanganan error saat menggunakan Fetch API. Dengan Fetch API, Anda dapat membuat permintaan ke resource jaringan jarak jauh. Saat Anda melakukan panggilan jaringan jarak jauh, halaman web Anda menjadi rentan terhadap berbagai potensi error jaringan.

Bagian berikut menjelaskan potensi error dan menjelaskan cara menulis kode yang menyediakan tingkat fungsionalitas wajar yang tahan terhadap error dan kondisi jaringan yang tidak terduga. Kode yang tangguh menjaga kepuasan pengguna 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 ke situs berbagi video.

Saat menggunakan fitur Ambil, mudah untuk mempertimbangkan jalur senang tempat pengguna berhasil mengupload video. Namun, ada jalur lain yang tidak semulus, tetapi ada jalur yang harus direncanakan oleh developer web. Jalur (tidak puas) tersebut dapat terjadi karena kesalahan pengguna, melalui kondisi lingkungan yang tidak terduga, atau karena ada 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, saat 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 sedang diupload.
  • Browser akan dimulai ulang saat video sedang diupload.
  • Server untuk situs berbagi video akan dimulai ulang saat video sedang diupload.

Contoh kesalahan pada situs web berbagi video

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

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

  • Apa perilaku default-nya jika layanan berbagi video tidak dapat menangani contoh yang diberikan?
  • Apa yang diharapkan pengguna akan terjadi dalam contoh?
  • Bagaimana kami dapat meningkatkan prosesnya?
Tindakan Pengguna mulai mengupload file video yang salah. Kemudian, saat proses upload, pengguna menentukan file video yang benar untuk diupload.
Yang terjadi secara default File asli terus diupload di latar belakang sementara file baru diupload pada saat yang sama.
Apa yang diharapkan pengguna Pengguna mengharapkan upload asli berhenti sehingga tidak ada bandwidth internet tambahan yang terbuang.
Apa yang bisa ditingkatkan JavaScript membatalkan permintaan Ambil untuk file asli sebelum file baru mulai diunggah.
Tindakan Pengguna kehilangan koneksi internet saat sedang mengupload video.
Yang terjadi secara default Status progres upload tampaknya macet di 50%. Pada akhirnya, Fetch API akan mengalami waktu tunggu dan data yang diupload akan dihapus. Setelah kembali terhubung ke internet, pengguna harus mengupload ulang file mereka.
Apa yang diharapkan pengguna Pengguna ingin diberi tahu jika filenya tidak dapat diupload, dan ingin upload-nya dilanjutkan secara otomatis saat file kembali online.
Apa yang bisa ditingkatkan Halaman upload memberi tahu pengguna tentang masalah konektivitas internet, dan meyakinkan pengguna bahwa upload akan dilanjutkan saat koneksi internet telah dilanjutkan.
Tindakan Situs web berbagi video tidak dapat menangani nama file dengan spasi. Alih-alih "My Travels.mp4", ia mengharapkan nama seperti "My_Travels.mp4" atau "MyTravels.mp4".
Yang terjadi secara default Pengguna harus menunggu upload selesai sepenuhnya. Setelah file diupload, dan status progres bertuliskan "100%", status progres akan menampilkan pesan: "Coba lagi".
Apa yang diharapkan pengguna Pengguna ingin diberi tahu tentang batasan nama file sebelum upload dimulai, atau setidaknya dalam satu detik pertama upload.
Apa yang bisa ditingkatkan Idealnya, layanan berbagi video mendukung nama file dengan spasi. Opsi alternatifnya adalah memberi tahu pengguna tentang batasan nama file sebelum upload dimulai. Atau, layanan berbagi video harus menolak upload dengan pesan error mendetail.

Menangani error dengan Fetch API

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

Saat Fetch API memunculkan 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 muncul. Dalam blok catch seperti ini, pastikan Anda memberikan pengalaman pengguna yang bermanfaat. 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 apa yang salah, dan opsi apa 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 Anda, atau ke back-end. Tindakan ini akan mencatat error dalam log agar dapat didiagnosis di tahap selanjutnya.
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 telah dicatat dalam log, Anda dapat menulis kasus pengujian untuk menangkap error tersebut sebelum pengguna menyadari adanya sesuatu yang salah. Bergantung pada error-nya, pengujian dapat berupa pengujian unit, integrasi, atau penerimaan.

Saat kode status jaringan menampilkan error

Contoh kode ini membuat permintaan ke layanan pengujian HTTP yang selalu merespons dengan kode status HTTP 429 Too Many Requests. Menariknya, responsnya 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 responsnya 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 kode status respons HTTP potensial. Developer backend, operasi developer, dan engineer layanan terkadang dapat memberikan insight unik tentang kemungkinan kasus ekstrem yang mungkin tidak Anda antisipasi.

Jika terjadi error saat menguraikan respons jaringan

Contoh kode ini menunjukkan jenis error lain yang dapat muncul saat menguraikan 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, sehingga muncul 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 mengambil berbagai format respons, dan memverifikasi bahwa respons yang tidak diharapkan tidak merusak halaman web untuk pengguna.

Pertimbangkan skenario berikut: Anda memiliki resource jarak jauh yang menampilkan respons JSON yang valid, dan resource tersebut berhasil diuraikan dengan metode Response.json(). Layanan dapat mati. Setelah selesai, 500 Internal Server Error akan ditampilkan. Jika teknik penanganan error yang tepat tidak digunakan selama penguraian JSON, halaman dapat rusak bagi pengguna karena menampilkan error yang tidak tertangani.

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 yang mengharuskan Anda 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 menandakan kepada 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 dengan menentukan berbagai bagian yang dapat mengalami error. Untuk setiap skenario, pastikan Anda memiliki penggantian yang sesuai bagi pengguna. Berkaitan dengan permintaan pengambilan, tanyakan pada diri Anda sendiri pertanyaan-pertanyaan berikut:

  • Apa yang terjadi jika server target mati?
  • Apa yang terjadi jika Fetch menerima respons yang tidak diharapkan?
  • 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.