Yüklenme ve Hata Durumlarını Yönetme
Bileşeninize yüklenme ve hata durum değişkenleri ekleyin, veri getirilirken bir yükleniyor göstergesi gösterin ve başarısızlıkta anlaşılır bir hata iletisi görüntüleyin.
Yüklenme ve Hata Durumlarını Yönetme, 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.
Asenkron verinin üç durumu
Her asenkron veri işleminin üç durumu vardır: yükleniyor (istek sürüyor), başarılı (veri alındı), hata (istek başarısız oldu). Arayüzünüz bu üçünü de açıkça ele almalıdır.
Yüklenme arayüzü
Yüklenme sırasında bir döndürücü, iskelet veya yer tutucu gösterin. Yüklenme sırasında düğmeleri devre dışı bırakarak formun yeniden gönderilmesini önleyin. Kullanıcı, uygulamanın çalıştığını her zaman bilmelidir.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Hata arayüzü
İstek başarısız olduğunda anlaşılır bir hata mesajı gösterin. Kullanıcıların çıkmaza girmemesi için yeniden deneme işlemi ekleyin. Geliştiriciler için hatanın tamamını günlüğe kaydedin.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Yeniden deneme mekanizması
Durumda bir yeniden deneme sayacını artırın ve bunu etkinin bağımlılık dizisine ekleyin. Kullanıcı Yeniden Dene'ye tıkladığında sayaç değişir ve etki yeniden tetiklenir.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Yüklenme durumu için en iyi uygulamalar
1) İstek başlar başlamaz yüklenme durumunu gösterin. 2) Yüklenme durumunu en aza indirin; önbelleğe alınmış veri varsa durumu yeniden ayarlamayın. 3) Sayfalama için ilk yüklemeyi daha fazla veri yüklemeden ayırın. 4) 100 ms'den kısa süreler için döndürücüyü asla göstermeyin; gecikme ekleyin veya önceki veriyi görünür tutun.
İyimser güncellemeler
İyimser güncellemeler: sunucu onaylamadan önce arayüzü hemen güncelleyin, ardından istek başarısız olursa değişikliği geri alın. Bu, anında yanıt veriliyormuş izlenimi oluşturur.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Oluşturma hataları için hata sınırları
Oluşturma sırasında fırlatılan hataları yakalamak için componentDidCatch kullanan hata sınırlarını (sınıf bileşenlerini) kullanın. Tüm uygulamanın çökmesi yerine yedek arayüz gösterirler.
HTTP hatalarını eşleme
HTTP durum kodlarını kullanıcıların anlayabileceği mesajlarla eşleyin. 401 → giriş sayfasına yönlendirin. 403 → "Erişim reddedildi" gösterin. 404 → "Bulunamadı". 429 → "Çok fazla istek gönderildi — lütfen bekleyin". 500+ → "Sunucu hatası — yeniden deneyin".
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}Karmaşık veri alma durumu için useReducer
Yüklenme, hata ve veri birbiriyle etkileşime girdiğinde (örneğin yeniden yükleme sırasında hatayı temizlemek gerektiğinde), bir durum azaltıcısı birden çok useState çağrısından daha temizdir.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — gelecek
Veri alma çerçeveleriyle (React Query, Relay, Next.js) kullanılan React Suspense, veri beklerken bileşenlerin beklemeye alınmasını sağlar. Üstteki Suspense sınırı, yedek arayüzü otomatik olarak gösterir. React'in yöneldiği yön budur.
Ağ hatası ve sunucu hatası
Ağ hataları (bağlantı yok, CORS) catch bloğunda fırlatılır. Sunucu hataları (4xx, 5xx) normal şekilde sonuçlanır; bunları algılamak için res.ok değerini kontrol etmeniz gerekir. Hata yönetiminiz her iki kategoriyi de ele almalıdır.
Kısa kontrol
"İyimser güncelleme" nedir?
Özet: Yüklenme ve hata durumları
Yükleniyor, başarılı ve hata durumlarını her zaman ele alın. Anlamlı bir yüklenme arayüzü gösterin. HTTP hatalarını kullanıcıların anlayabileceği mesajlarla eşleyin. Yeniden deneme mekanizmaları uygulayın. Anında algılanan geri bildirim için iyimser güncellemeler kullanın. Birlikte yönetilen veri alma durumu için useReducer kullanın. Suspense sonunda bu deseni daha da basitleştirecek.
Sıkça Sorulan Sorular
“Yüklenme ve Hata Durumlarını Yönetme” dersi ücretsiz mi?
Evet — “Yüklenme ve Hata Durumlarını Yönetme” 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.
“Yüklenme ve Hata Durumlarını Yönetme” dersinde ne öğreneceğim?
Bileşeninize yüklenme ve hata durum değişkenleri ekleyin, veri getirilirken bir yükleniyor göstergesi gösterin ve başarısızlıkta anlaşılır bir hata iletisi görüntüleyin. 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.
“Yüklenme ve Hata Durumlarını Yönetme” 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
- useEffect Temelleri: Bağımlılıklar ve Temizleme
- Bağlanırken Veri Getirme
- Yüklenme ve Hata Durumlarını Yönetme
- Temizleme için AbortController