Bu makalede, Fetch API ile çalışırken karşılaşılan bazı hata işleme yaklaşımları gösterilmektedir. Getirme API'si, uzak bir ağ kaynağına istekte bulunmanıza olanak tanır. Uzak bir ağ çağrısı yaptığınızda, web sayfanız çeşitli olası ağ hatalarına maruz kalır.
Aşağıdaki bölümlerde olası hatalar ve hatalar ile beklenmedik ağ koşullarına karşı dayanıklı, makul bir işlevsellik düzeyi sağlayan kodun nasıl yazılacağı açıklanmaktadır. Esnek kod, kullanıcılarınızın mutlu olmasını sağlar ve web siteniz için standart bir hizmet düzeyini korur.
Potansiyel ağ hatalarını tahmin etme
Bu bölümde, kullanıcının "My Travels.mp4" adlı yeni bir video oluşturduğu ve ardından videoyu bir video paylaşım web sitesine yüklemeye çalıştığı bir senaryo açıklanmaktadır.
Getirme ile çalışırken, kullanıcının videoyu başarıyla yüklediği mutlu yolu göz önünde bulundurmak kolaydır. Ancak sorunsuz olmayan ancak web geliştiricilerinin plan yapması gereken başka yollar da vardır. Bu tür (mutsuz) yollar kullanıcı hatası, beklenmedik çevre koşulları veya video paylaşım web sitesindeki bir hata nedeniyle ortaya çıkabilir.
Kullanıcı hatası örnekleri
- Kullanıcı, video dosyası yerine bir resim dosyası (JPEG gibi) yükler.
- Kullanıcı yanlış video dosyasını yüklemeye başlar. Ardından, yüklemenin bir kısmında, kullanıcı yükleme için doğru video dosyasını belirler.
- Kullanıcı, video yüklenirken yanlışlıkla "Yüklemeyi iptal et"i tıklar.
Çevresel değişikliklere örnekler
- Video yüklenirken internet bağlantısı çevrimdışı oluyor.
- Video yüklenirken tarayıcı yeniden başlatılır.
- Video paylaşım web sitesinin sunucuları, video yüklenirken yeniden başlatılır.
Video paylaşım web sitesiyle ilgili hatalara örnekler
- Video paylaşımı web sitesi, boşluk içeren dosya adlarını işleyemez.
"My Travels.mp4"yerine"My_Travels.mp4"veya"MyTravels.mp4"gibi bir ad bekler. - Video paylaşımı web sitesi, kabul edilebilir maksimum dosya boyutunu aşan bir video yükleyemez.
- Video paylaşımı web sitesi, yüklenen videoda video codec'ini desteklemiyor.
Bunlar, gerçek dünyada da karşılaşılabilecek örneklerdir. Geçmişte bu tür örneklerle karşılaşmış olabilirsiniz. Önceki kategorilerin her birinden bir örnek seçip aşağıdaki noktaları tartışalım:
- Video paylaşım hizmeti verilen örneği işleyemezse varsayılan davranış nedir?
- Kullanıcı bu örnekte ne olmasını bekliyor?
- Süreci nasıl iyileştirebiliriz?
Fetch API ile hataları ele alma
Bu özellik, kodunuzu basitleştirebileceği için aşağıdaki kod örneklerinde üst düzey await (tarayıcı desteği) kullanıldığını unutmayın.
Fetch API hata verdiğinde
Bu örnekte try bloğu içinde atılan hataları yakalamak için try/catch blok ifadesi kullanılmaktadır. Örneğin, Fetch API'si belirtilen kaynağı getiremiyorsa bir hata verilir. Bunun gibi bir catch bloğu içinde anlamlı bir kullanıcı deneyimi sunmaya özen gösterin. Kullanıcıya, bir tür ilerleme durumunu temsil eden yaygın bir kullanıcı arayüzü olan döner simge gösteriliyorsa catch bloğu içinde aşağıdaki işlemleri yapabilirsiniz:
- Sayfadaki döner simgeyi kaldırın.
- Sorunun ne olduğunu ve kullanıcının hangi seçenekleri kullanabileceğini açıklayan faydalı mesajlar sağlayın.
- Mevcut seçeneklere göre, kullanıcıya "Tekrar dene" düğmesi sunun.
- Arka planda, hatanın ayrıntılarını hata izleme hizmetinize veya arka uca gönderin. Bu işlem, sonraki bir aşamada teşhis edilebilmesi için hatayı günlüğe kaydeder.
try {
const response = await fetch('https://website');
} catch (error) {
// TypeError: Failed to fetch
console.log('There was an error', error);
}
Sonraki bir aşamada, günlüğe kaydettiğiniz hatayı teşhis ederken, kullanıcılarınız bir sorun olduğunun farkında olmadan söz konusu hatayı yakalamak için bir test senaryosu yazabilirsiniz. Hataya bağlı olarak test bir birim, entegrasyon veya kabul testi olabilir.
Ağ durum kodu bir hatayı gösterdiğinde
Bu kod örneği, her zaman 429 Too Many Requests HTTP durum koduyla yanıt veren bir HTTP test hizmetine istek gönderir. İşin ilginç yanı, yanıtın catch blokuna ulaşmıyor olması. Diğer bazı durum kodlarının yanı sıra 404 durumu da ağ hatası döndürmez ancak normal şekilde çözümlenir.
HTTP durum kodunun başarılı olup olmadığını kontrol etmek için aşağıdaki seçeneklerden herhangi birini kullanabilirsiniz:
- Durum kodunun
200-299aralığında olup olmadığını belirlemek içinResponse.oközelliğini kullanın. - Yanıtın başarılı olup olmadığını belirlemek için
Response.statusözelliğini kullanın. - Yanıtın başarılı olup olmadığını değerlendirmek için
Response.headersgibi diğer meta verileri kullanın.
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}`)
}
En iyi uygulama, olası HTTP yanıt durumu kodlarını anlamak için kuruluşunuzdaki ve ekibinizdeki kişilerle birlikte çalışmaktır. Arka uç geliştiricileri, geliştirici operasyonları ve servis mühendisleri bazen beklemediğiniz olası uç durumlar hakkında benzersiz bilgiler sağlayabilir.
Ağ yanıtı ayrıştırılırken bir hata oluştuğunda
Bu kod örneğinde, yanıt gövdesinin ayrıştırılmasında ortaya çıkabilecek başka bir hata türü gösterilmektedir. Response arayüzü, metin veya JSON gibi farklı veri türlerini ayrıştırmak için kullanışlı yöntemler sunar. Aşağıdaki kodda, yanıt gövdesi olarak bir HTML dizesi döndüren HTTP test hizmetine bir ağ isteği yapılmış. Ancak yanıt gövdesi JSON olarak ayrıştırılmaya çalışılır ve hata oluşur.
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);
}
Kodunuzu çeşitli yanıt biçimlerini almak üzere hazırlamanız ve beklenmedik bir yanıtın kullanıcının web sayfasını bozmadığını doğrulamanız gerekir.
Şu senaryoyu düşünün: Geçerli bir JSON yanıtı döndüren uzak bir kaynağınız var ve bu, Response.json() yöntemi ile başarıyla ayrıştırılmış. Hizmet kesintisi olabilir. Aşağı tüketildiğinde 500 Internal Server Error döndürülür. JSON ayrıştırılırken uygun hata işleme teknikleri kullanılmazsa işlenmeyen bir hata bildirileceği için kullanıcı sayfası bozulabilir.
Ağ isteğinin tamamlanmadan önce iptal edilmesi gerektiğinde
Bu kod örneğinde, hazırlık aşamasındaki bir isteği iptal etmek için AbortController kullanılmaktadır. Devam eden istek, başlamış ancak tamamlanmamış bir ağ isteğidir.
Devam eden bir isteği iptal etmenizin gerekebileceği senaryolar değişiklik gösterse de sonuçta bu, kullanım alanınıza ve ortamınıza bağlıdır. Aşağıdaki kod, bir AbortSignal öğesinin Fetch API'sine nasıl iletileceğini göstermektedir. AbortSignal bir AbortController öğesine ekli ve AbortController, tarayıcıya ağ isteğinin iptal edilmesi gerektiğini belirten bir abort() yöntemi içerir.
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)
}
Sonuç
Hataları ele almanın önemli yanlarından biri, ters gidebilecek çeşitli bölümlerin tanımlanmasıdır. Her senaryoda kullanıcı için uygun bir yedeğiniz olduğundan emin olun. Getirme istekleriyle ilgili olarak kendinize aşağıdakiler gibi sorular sorun:
- Hedef sunucu çökerse ne olur?
- Getirme beklenmeyen bir yanıt alırsa ne olur?
- Kullanıcının internet bağlantısı kesilirse ne olur?
Web sayfanızın karmaşıklığına bağlı olarak, farklı senaryolara yönelik işlevleri ve kullanıcı arayüzünü açıklayan bir akış şeması da hazırlayabilirsiniz.