Yedek arayüz
- React kursu
- Orta seviye
- Ders 55/80
- 4 dk
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.
Başlangıç kodu
import { Component } from "react";
// ErrorBoundary sınıfını buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Yedek arayüz ne gösterir?
- Kod listesi
- Hata yığını
- Teknik detay
- Nazik mesaj Doğru cevap
Açıklama: Yedek arayüz kullanıcıya nazik bir mesaj gösterir.
2 Tekrar dene butonu
<button onClick={() => this.setState({ hasError: ____ })}>Tekrar dene</button><button onClick={() => this.setState({ hasError: false })}>Tekrar dene</button>Açıklama: hasError false yapılırsa bileşen yeniden çizilir.
3 Yedek arayüz: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Yedek arayüz |
Nazik mesaj |
Tekrar dene |
State sıfırlar |
hasError |
Hata durumu |
geliştirme |
Detay gösterir |