Getirme API'sini kullanırken hata işlemeyi uygulama

Umar Hansa
Umar Hansa

Bu makalede, Getirme API'si ile çalışırken bazı hata işleme yaklaşımları gösterilmektedir. Fetch API, uzak bir ağ kaynağına istek göndermenize 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 hatalar ile beklenmedik ağ koşullarına karşı dayanıklı, makul düzeyde işlevsellik sağlayan kodların nasıl 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.

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ştiricilerin planlaması gereken başka yollar da vardır. Bu tür (istenmeyen) yollar, kullanıcı hatası, beklenmedik çevre koşulları veya video paylaşım web sitesindeki bir hata nedeniyle oluşabilir.

Kullanıcı hatalarına örnekler

  • 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 beklenir.
  • 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?
İşlem 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.
Varsayılan olarak ne olur? Orijinal dosya arka planda yüklenmeye devam ederken yeni dosya aynı anda yüklenir.
Kullanıcının beklentisi Kullanıcı, ek internet bant genişliği harcanmaması için orijinal yüklemenin durdurulmasını bekler.
Neler iyileştirilebilir? JavaScript, yeni dosya yüklenmeye başlamadan önce orijinal dosya için Get isteklerini iptal eder.
İşlem Kullanıcı, videoyu yüklerken internet bağlantısını kaybeder.
Varsayılan olarak ne olur? Yükleme ilerleme çubuğu %50'de takılı görünüyor. Sonunda Fetch API zaman aşımı yaşar ve yüklenen veriler atılır. İnternet bağlantısı tekrar sağlandığında kullanıcının dosyasını yeniden yüklemesi gerekir.
Kullanıcının beklentisi Kullanıcı, dosyası yüklenemediğinde bilgilendirilmeyi ve internete tekrar bağlandığında yüklemenin% 50'den otomatik olarak devam etmesini bekler.
Neler iyileştirilebilir? Yükleme sayfası, kullanıcıyı internet bağlantısı sorunları hakkında bilgilendirir ve internet bağlantısı tekrar sağlandığında yüklemenin devam edeceğini belirtir.
İşlem Video paylaşım web sitesi, boşluk içeren dosya adlarını işleyemez. "Seyahatlerim.mp4" yerine "Seyahatlerim.mp4" veya "Seyahatlerim.mp4" gibi adlar beklenir.
Varsayılan olarak ne olur? Kullanıcı, yüklemenin tamamen tamamlanmasını beklemelidir. Dosya yüklendikten ve ilerleme çubuğunda "%100" yazısı göründükten sonra ilerleme çubuğunda "Lütfen tekrar deneyin" mesajı gösterilir.
Kullanıcının beklentisi Kullanıcı, dosya adı sınırlamaları hakkında yükleme başlamadan önce veya en azından yüklemenin ilk saniyesinde bilgilendirilmeyi bekler.
Neler iyileştirilebilir? Video paylaşım hizmetinin, boşluk içeren dosya adlarını desteklemesi idealdir. Alternatif seçenekler arasında, yükleme başlamadan önce kullanıcıyı dosya adı sınırlamaları hakkında bilgilendirmek de vardır. Alternatif olarak, video paylaşım hizmeti yüklemeyi ayrıntılı bir hata mesajıyla reddedebilir.

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. Bu tür bir catch bloğunda 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:

  1. Dönen çubuğu sayfadan kaldırın.
  2. Ne tür bir sorunla karşılaşıldığını ve kullanıcının hangi seçenekleri kullanabileceğini açıklayan yararlı mesajlar gösterin.
  3. Kullanılabilir seçeneklere göre kullanıcıya "Tekrar dene" düğmesi gösterin.
  4. 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ı arasında yer alan 404 durumu, ağ hatası döndürmez, bunun yerine normal şekilde çözülür.

HTTP durum kodunun başarılı olup olmadığını kontrol etmek için aşağıdaki seçeneklerden birini kullanabilirsiniz:

  • Durum kodunun 200 ile 299 arasındaki aralıkta olup olmadığını belirlemek için Response.ok mülkünü 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.headers gibi 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}`)
}

Olası HTTP yanıt durum kodlarını anlamak için kuruluşunuzdaki ve ekibinizdeki kişilerle birlikte çalışmanız önerilir. 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övdesinin ayrıştırılmasıyla 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. Hizmetin devre dışı kalması mümkündür. 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ği 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.

Devam eden bir isteği iptal etmeniz gerekebilecek senaryolar değişiklik 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ı ele almanın önemli bir yönü, hataya yol açabilecek ç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 şu tür 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ı senaryolardaki işlevleri ve kullanıcı arayüzünü açıklayan bir akış şeması da çizebilirsiniz.