Mengimplementasikan penanganan error saat menggunakan Fetch API

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 menyenangkan) tersebut dapat terjadi karena error pengguna, melalui kondisi lingkungan yang tidak terduga, atau karena bug di situs 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 "Cancel 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 sedang 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 melihat contoh seperti itu sebelumnya. 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 tersebut?
  • Bagaimana cara kami meningkatkan prosesnya?
Tindakan Pengguna mulai mengupload file video yang salah. Kemudian, di tengah proses upload, pengguna menentukan file video yang benar untuk diupload.
Yang terjadi secara default File asli akan terus diupload di latar belakang saat file baru diupload secara bersamaan.
Yang diharapkan pengguna Pengguna mengharapkan upload asli berhenti sehingga tidak ada bandwidth internet tambahan yang terbuang.
Hal yang dapat ditingkatkan JavaScript membatalkan permintaan Pengambilan untuk file asli sebelum file baru mulai diupload.
Tindakan Pengguna kehilangan koneksi internetnya saat sedang mengupload video.
Yang terjadi secara default Status progres upload tampaknya macet di 50%. Pada akhirnya, Fetch API mengalami waktu tunggu habis dan data yang diupload akan dihapus. Saat konektivitas internet kembali, pengguna harus mengupload ulang file mereka.
Yang diharapkan pengguna Pengguna mengharapkan untuk diberi tahu saat file mereka tidak dapat diupload, dan mereka mengharapkan upload mereka akan otomatis dilanjutkan pada 50% saat mereka kembali online.
Hal yang dapat ditingkatkan Halaman upload memberi tahu pengguna tentang masalah konektivitas internet, dan meyakinkan pengguna bahwa upload akan dilanjutkan saat konektivitas internet telah dilanjutkan.
Tindakan Situs berbagi video tidak dapat menangani nama file dengan spasi. Sebagai ganti "My Travels.mp4", nama yang diharapkan adalah seperti "My_Travels.mp4" atau "MyTravels.mp4".
Yang terjadi secara default Pengguna harus menunggu hingga upload selesai sepenuhnya. Setelah file diupload, dan status progresnya menunjukkan "100%", status progres akan menampilkan pesan: "Coba lagi".
Yang diharapkan pengguna Pengguna mengharapkan untuk diberi tahu tentang batasan nama file sebelum upload dimulai, atau setidaknya dalam detik pertama upload.
Hal yang dapat 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 tingkat teratas (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 yang bermanfaat yang menjelaskan masalah yang terjadi, dan opsi yang dapat dilakukan pengguna.
  3. Berdasarkan opsi yang tersedia, tampilkan tombol "Coba lagi" kepada pengguna.
  4. Di balik layar, kirim detail error ke layanan pelacakan error, atau ke backend. Tindakan ini akan mencatat error ke 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. 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 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(). Layanan mungkin mengalami gangguan. 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 menunjukkan 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 menentukan berbagai bagian yang dapat mengalami error. Untuk setiap skenario, pastikan Anda memiliki penggantian yang sesuai untuk pengguna. Sehubungan dengan permintaan pengambilan, ajukan pertanyaan pada diri Anda seperti:

  • Apa yang terjadi jika server target tidak 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.