Bu makalede, Getirme API'si ile çalışırken bazı hata işleme yaklaşımları gösterilmektedir. Getirme API'si, uzak bir ağ kaynağına istekte bulunmanıza olanak tanır. Uzak 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 hatalara ve beklenmedik ağ koşullarına karşı dirençli, makul bir işlevsellik düzeyinde nasıl kod yazılacağı açıklanmaktadır. Esnek kod, kullanıcılarınızın memnuniyetini sağlar ve web siteniz için standart bir hizmet düzeyi sunar.
Olası ağ hatalarını öngörme
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.
Fetch ile çalışırken kullanıcının videoyu başarıyla yüklediği başarılı yolu dikkate almak kolaydır. Ancak, bu kadar sorunsuz olmayan ancak web geliştiricilerinin planlaması gereken başka yollar da vardır. Bu tür (mutsuz) yollar, kullanıcı hatası, beklenmedik ortam koşulları veya video paylaşımı web sitesindeki bir hata nedeniyle ortaya çıkabilir.
Kullanıcı hatası örnekleri
- Kullanıcı, video dosyası yerine resim dosyası (JPEG gibi) yükler.
- Kullanıcı yanlış video dosyasını yüklemeye başlar. Ardından, yükleme işleminin ortasında kullanıcı yüklenecek doğru video dosyasını belirtir.
- Kullanıcı, video yüklenirken yanlışlıkla "Yüklemeyi iptal et"i tıklar.
Çevre değişikliklerine örnekler
- Video yüklenirken internet bağlantısı çevrimdışı olur.
- 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 hata örnekleri
- 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 edilen maksimum dosya boyutunu aşan bir video yükleyemiyor.
- Video paylaşım web sitesi, yüklenen videodaki video codec'ini desteklemiyor.
Bu örnekler gerçek hayatta yaşanabilir ve yaşanmaktadır. 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ı, örnekte ne olmasını bekler?
- Süreci nasıl iyileştirebiliriz?
Fetch API ile hataları işleme
Aşağıdaki kod örneklerinde, bu özellik kodunuzu basitleştirebileceği için üst düzey await (tarayıcı desteği) kullanıldığını unutmayın.
Fetch API hataları oluşturduğunda
Bu örnekte, try bloğunda oluşturulan hataları yakalamak için bir try/catch blok ifadesi kullanılmaktadır. Örneğin, Fetch API belirtilen kaynağı getiremezse bir hata atılır. Bunun gibi bir catch blokunda anlamlı bir kullanıcı deneyimi sunmaya özen gösterin. Kullanıcıya bir tür ilerlemeyi temsil eden yaygın bir kullanıcı arayüzü olan bir döndürme çubuğu gösteriliyorsa catch bloğunda aşağıdaki işlemleri yapabilirsiniz:
- Döner simgeyi sayfadan kaldırın.
- Neyin yanlış gittiğini ve kullanıcının hangi seçenekleri kullanabileceğini açıklayan faydalı mesajlar sağlayın.
- Kullanılabilir seçeneklere göre kullanıcıya "Tekrar dene" düğmesi gösterin.
- Arka planda, hatanın ayrıntılarını hata izleme hizmetinize veya arka uca gönderin. Bu işlem, hatayı daha sonra teşhis edilebilmesi için günlüğe kaydeder.
try {
const response = await fetch('https://website');
} catch (error) {
// TypeError: Failed to fetch
console.log('There was an error', error);
}
Daha sonraki bir aşamada, günlüğe kaydettiğiniz hatayı teşhis ederken kullanıcılarınız bir sorun olduğunu fark etmeden önce bu tür bir hatayı yakalamak için bir test senaryosu yazabilirsiniz. Hataya bağlı olarak test bir birim, entegrasyon veya kabul testi olabilir.
Ağ durumu kodu bir hatayı temsil ettiğinde
Bu kod örneği, her zaman 429 Too Many Requests HTTP durum koduyla yanıt veren bir HTTP test hizmetine istek gönderir. Yanıtın catch bloğuna ulaşmaması ilginçtir. Diğer bazı durum kodlarının yanı sıra 404 durumu, ağ hatası döndürmez, bunun yerine 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
200ile299arasındaki aralıkta 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 durum kodlarını anlamak için kuruluşunuzdaki ve ekibinizdeki kişilerle birlikte çalışmaktır. Arka uç geliştiriciler, geliştirici işlemleri ve servis mühendisleri bazen beklemediğiniz olası uç durumlar hakkında benzersiz bilgiler sağlayabilir.
Ağ yanıtı ayrıştırılırken hata oluştuğunda
Bu kod örneğinde, yanıt gövdesi ayrıştırılırken 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 HTML dizesi döndüren bir HTTP test hizmetine ağ isteği gönderilir. Ancak yanıt gövdesi JSON olarak ayrıştırılmaya çalışıldığında 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 alacak şekilde hazırlamanız ve beklenmedik bir yanıtın kullanıcının web sayfasını bozmadığından emin olmanız gerekir.
Aşağıdaki senaryoyu düşünün: Geçerli bir JSON yanıtı döndüren ve Response.json() yöntemiyle başarıyla ayrıştırılan uzak bir kaynağınız var. Hizmet kesilebilir. Kapatıldıktan sonra 500 Internal Server Error döndürülür. JSON ayrıştırılırken uygun hata işleme teknikleri kullanılmazsa, ele alınmayan bir hata nedeniyle sayfa kullanıcı için bozulabilir.
Ağ isteğinin tamamlanmadan önce iptal edilmesi gerektiğinde
Bu kod örneğinde, devam eden bir isteği iptal etmek için AbortController kullanılmaktadır. İletim aşamasında istek, başlatılmış ancak tamamlanmamış bir ağ isteğidir.
Yayındaki bir isteği iptal etmeniz gereken senaryolar farklılık gösterebilir ancak sonuçta kullanım alanınıza ve ortamınıza bağlıdır. Aşağıdaki kodda, Fetch API'ye bir AbortSignal öğesinin nasıl iletileceği gösterilmektedir. AbortSignal, bir AbortController'a eklenir 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ın ele alınmasındaki önemli noktalardan biri, yanlış gidebilecek çeşitli bölümleri tanımlamaktır. Her senaryo için kullanıcıya uygun bir yedek planınız olduğundan emin olun. Getirme isteğiyle ilgili olarak kendinize aşağıdakiler gibi sorular sorun:
- Hedef sunucu devre dışı kalırsa ne olur?
- Fetch beklenmedik 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ı senaryolar için işlevleri ve kullanıcı arayüzünü açıklayan bir akış şeması da oluşturabilirsiniz.