Hata Yönetimi: HTTP Durum Kodları
HTTP durum kodlarını kullanıcıya gösterilecek mesajlarla eşleştirmeyi, ağ hatalarıyla sunucu hatalarını ayırt etmeyi ve yeniden deneme mantığını uygulamayı öğrenin.
Hata Yönetimi: HTTP Durum Kodları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
HTTP Durum Kodu Kategorileri
Durum kodları ilk rakamlarına göre gruplanır: 2xx başarı, 3xx yönlendirme, 4xx istemci hatası (sizin hatanız), 5xx sunucu hatası (karşı tarafın hatası).
Yaygın 2xx Kodları
200 OK: gövde içeren başarılı yanıt. 201 Oluşturuldu: kaynak oluşturuldu (genellikle yeni kaynağı döndürür). 204 İçerik Yok: gövde olmadan başarılı yanıt (DELETE, bazen PUT).
Yaygın 4xx Kodları
400 Hatalı İstek: biçimi bozuk girdi. 401 Yetkisiz: kimlik doğrulama bilgileri eksik veya geçersiz. 403 Yasaklandı: kimlik doğrulandı ancak izin yok. 404 Bulunamadı: kaynak mevcut değil. 409 Çakışma: durum çakışması (yinelenen e-posta). 422 İşlenemeyen Varlık: doğrulama başarısız oldu.
Yaygın 5xx Kodları
500 Dahili Sunucu Hatası: genel sunucu arızası. 502 Hatalı Ağ Geçidi: üst hizmet başarısız oldu. 503 Hizmet Kullanılamıyor: sunucu aşırı yüklendi veya kapalı. 504 Ağ Geçidi Zaman Aşımı: üst hizmet zamanında yanıt vermedi.
Kodları Kullanıcı Mesajlarına Dönüştürme
Durum kodlarını yararlı arayüz mesajlarına dönüştürün; kullanıcıya hiçbir zaman 'Error 500' göstermeyin.
function userMessage(status) {
if (status === 401) return 'Please sign in to continue.';
if (status === 403) return "You don't have permission for that.";
if (status === 404) return 'Not found.';
if (status === 409) return 'Already exists.';
if (status === 422) return 'Please check the form for errors.';
if (status >= 500) return 'Something went wrong. Try again in a moment.';
return 'Something unexpected happened.';
}Ağ Hataları ve Sunucu Hataları
Başarısız bir veri getirme işlemi (çevrim dışı olma, DNS hatası, CORS), sunucunun hata yanıtı vermesinden farklıdır. Ağ hataları hata oluşturur; sunucu hataları ise durumu >= 400 olan bir Response döndürür.
try {
const res = await fetch('/api/users');
if (!res.ok) {
// Server replied but with error status
throw new Error(`Server error ${res.status}`);
}
return res.json();
} catch (err) {
if (err instanceof TypeError) {
// Network failure — fetch couldn't reach server
throw new Error('Network error. Check your connection.');
}
throw err;
}5xx ve Ağ Hataları için Yeniden Deneme Mantığı
Sunucu hataları ve ağ arızaları çoğu zaman geçicidir. Üstel geri çekilmeyle yeniden deneyin.
async function fetchWithRetry(url, options, maxRetries = 3) {
for (let attempt = 0; attempt < maxRetries; attempt++) {
try {
const res = await fetch(url, options);
if (res.ok || (res.status >= 400 && res.status < 500)) return res;
// 5xx — retryable
} catch (err) {
if (attempt === maxRetries - 1) throw err;
}
await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
}
}4xx Hatalarında Yeniden Denemeyin
4xx hataları sizin hatanızdır; yeniden denemek yardımcı olmaz. Yalnızca 5xx hatalarını ve ağ arızalarını yeniden deneyin. Bunun istisnası, çoğu zaman Retry-After üst bilgisi içeren 429'dur (Çok Fazla İstek).
Retry-After Üst Bilgisini Okuma
Sunucular 429 ve 503 yanıtlarında Retry-After gönderebilir; yeniden denemeden önce belirtilen saniye kadar bekleyin.
const res = await fetch('/api/limited');
if (res.status === 429) {
const after = parseInt(res.headers.get('Retry-After') || '5', 10);
await new Promise(r => setTimeout(r, after * 1000));
return fetch('/api/limited');
}Doğrulama Hatalarını Gösterme
422 yanıtları genellikle alan hatalarını listeleyen bir JSON gövdesi içerir. Bu hataları ilgili form girdisinin yanında görüntüleyin.
// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }
if (res.status === 422) {
const { errors } = await res.json();
Object.entries(errors).forEach(([field, msg]) => {
setFieldError(field, msg);
});
}Telemetri: Hataları Bir Hizmete Kaydetme
Hataları Sentry, Datadog veya LogRocket'a göndererek üretim ortamında görebilmenizi sağlayın. İstek URL'sini, yöntemi, durumu ve temizlenmiş bir gövdeyi ekleyin (gizli bilgiler olmadan).
Kullanıcıya Uygulanabilir Kurtarma Seçenekleri Sunma
Her hata arayüzü, kullanıcıya ilerleyebileceği bir yol sunmalıdır: yeniden deneme düğmesi, desteğe bağlantı veya çalışan bir sayfaya geri dönme seçeneği. Çıkmaz oluşturan hata ekranları kullanıcıları hayal kırıklığına uğratır.
Hızlı Kontrol
Bir API, 422 İşlenemeyen Varlık yanıtı döndürüyor. Bu genellikle ne anlama gelir?
Özet: HTTP Hata Yönetimi
2xx başarı, 3xx yönlendirme, 4xx istemci hatası, 5xx sunucu hatasıdır. Kodları kullanıcı dostu mesajlarla eşleştirin. Ağ hatalarını (fetch'ten gelen TypeError), sunucu hatalarından (res.ok false) ayırın. 5xx hatalarını ve ağ arızalarını üstel geri çekilmeyle yeniden deneyin; Retry-After içeren 429 dışında 4xx hatalarını hiçbir zaman yeniden denemeyin. 422 alan hatalarını gösterin. Hataları Sentry gibi bir hizmete kaydedin.
Sıkça Sorulan Sorular
“Hata Yönetimi: HTTP Durum Kodları” dersi ücretsiz mi?
Evet — “Hata Yönetimi: HTTP Durum Kodları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Hata Yönetimi: HTTP Durum Kodları” dersinde ne öğreneceğim?
HTTP durum kodlarını kullanıcıya gösterilecek mesajlarla eşleştirmeyi, ağ hatalarıyla sunucu hatalarını ayırt etmeyi ve yeniden deneme mantığını uygulamayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Hata Yönetimi: HTTP Durum Kodları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Fetch API: GET POST PUT DELETE
- Axios: Interceptor'lar ve Temel URL
- Hata Yönetimi: HTTP Durum Kodları
- Veri Önbelleğe Alma için SWR ve React Query