React
Yedek arayüz
Hata durumunda gösterilen yedek arayüzü yazmayı öğrenirsin.
Yedek arayüz
Hata yakalandığında kullanıcıya gösterilen arayüze yedek arayüz (fallback UI) denir. Basit bir mesaj olabileceği gibi, 'tekrar dene' butonu da içerebilir.
Yedek arayüz, hatanın teknik detayını değil, kullanıcıya nazik bir açıklama sunar. 'Bir şeyler ters gitti' gibi ifadeler yaygındır. Gerekirse bir destek bağlantısı eklenir.
'Tekrar dene' butonu state'i sıfırlayıp bileşeni yeniden çizdirir; bu, geçici hatalarda işe yarar.
Yedek arayüz tasarımı
İyi bir yedek arayüz üç şey sunar: ne olduğunu (kısa mesaj), ne yapılabileceği (tekrar dene veya ana sayfaya dön) ve gerekirse destek bağlantısı. Kullanıcıyı yalnız bırakmamak önemlidir.
Büyük uygulamalarda yedek arayüz bölgesel olur: header hatası başlık çubuğunda, sidebar hatası kenar çubuğunda gösterilir. Böylece uygulamanın geri kalanı çalışmaya devam eder.
Hata ayıklama bilgisi yalnızca geliştirme ortamında gösterilir; üretime gizli kalır.
Uygulama Yedek arayüz ve buton
Aşağıdaki iskeleti tamamla. ErrorBoundary sınıfı yaz; hasError doğruysa <h1>Hata</h1> ve <button onClick={() => this.setState({ hasError: false })}>Tekrar dene</button> döndür, değilse this.props.children döndür. Dışa aktar.
Örnek çözümü göster
import { Component } from "react";
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return (
<div>
<h1>Hata</h1>
<button onClick={() => this.setState({ hasError: false })}>Tekrar dene</button>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
Kendini test et
-
Yedek arayüz ne gösterir?
- Kod listesi
- Hata yığını
- Teknik detay
- Nazik mesaj
Cevabı göster
Nazik mesaj — Yedek arayüz kullanıcıya nazik bir mesaj gösterir.
-
Tekrar dene butonu
<button onClick={() => this.setState({ hasError: ____ })}>Tekrar dene</button>
Cevabı göster
<button onClick={() => this.setState({ hasError: false })}>Tekrar dene</button>
-
Yedek arayüz: kavramları eşleştir
- Yedek arayüz
- Nazik mesaj
- Tekrar dene
- State sıfırlar
- hasError
- Hata durumu
- geliştirme
- Detay gösterir
Sıradaki ders: Özet - Error boundary
