- Konu sahibi
- #1
React hata sınırı (Error Boundary), alt bileşen ağacında render sırasında, yaşam döngüsü metotlarında ve sınıf bileşenlerinin kurucularında oluşan JavaScript hatalarını yakalar. Yakalanan hata tüm arayüzü bozmak yerine, sınırın tanımladığı yedek ekranın gösterilmesini sağlar. Ancak olay işleyicilerindeki hataları, zamanlayıcı ve diğer asenkron kod hatalarını, sunucu tarafı render hatalarını veya hata sınırının kendi hatalarını otomatik olarak yakalamaz. Güncel React’te useTransition’ın döndürdüğü startTransition işlevi içinde atılan hataların sınır tarafından yakalanabildiği özel durumu, sıradan zamanlayıcı/Promise davranışıyla karıştırmayın.
Bir hata sınırının alt ağacında şu durumlar yakalanabilir:
Hata sınırı hatayı kendi alt ağacında yakalar; üst seviyedeki veya hata sınırının dışındaki bileşenleri korumaz. Sınırın kendisi hata verirse, hatayı yakalayacak başka bir üst sınır gerekir.
Aşağıdaki hatalar Error Boundary tarafından otomatik olarak yakalanmaz:
Örneğin bir tıklama sırasında API isteği başarısız olursa hata sınırının devreye girmesini beklemeyin. İstek hatasını
React'te yerleşik hata sınırı sınıf bileşeniyle oluşturulur. Aşağıdaki örnekte
Fonksiyon bileşenleri doğrudan hata sınırı olamaz; bunun için sınıf tabanlı bir sınır yazabilir veya projede kullanılan, hata sınırı sağlayan bir çözümü tercih edebilirsiniz. Üretimde yedek ekranı, hatayı sessizce gizlemek yerine kayıt sistemine bildirip kullanıcının yeniden denemesine veya güvenli bir bölüme dönmesine imkân vermelidir.
Geliştirme araçları fallback üretilse bile hata overlay’i gösterebilir; yalnız kırmızı geliştirme ekranı gördüğünüz için sınırın hiç çalışmadığını varsaymayın. Sıradan bir try bloğunda başlatılan ama await edilmeyen Promise’in sonraki reddi de o senkron catch’e otomatik düşmez.
Tek bir sınırı uygulamanın tamamının çevresine koymak basit bir genel yedek ekran sağlar; fakat tüm sayfanın etkilenmesine yol açabilir. Büyük uygulamalarda sınırı sayfa, panel veya bağımsız widget çevresine yerleştirmek genellikle daha kullanışlıdır. Böylece yalnız bozulan bölüm yedek ekrana geçer ve diğer bölümler çalışmayı sürdürebilir.
Bir olay işleyicisini test etmek için hata sınırına güvenmeyin. Örneğin:
Bu ayrım önemlidir: hata sınırı render edilemeyen React alt ağacını izole eder; iş mantığı, ağ isteği ve kullanıcı etkileşimi hatalarının sorumluluğu ise ilgili kodda kalır.
Hayır. Hatanın ayrıntılarını kaydetmek ve yedek arayüz göstermek için kullanılır. Asıl düzeltme, hataya neden olan bileşen veya verinin düzeltilmesini gerektirir.
Evet. Sınırın hata durumunu temizleyen bir yeniden deneme akışı tasarlanabilir. Pratikte sınır, yeni bir
Genellikle hayır. Form doğrulama hataları beklenen kullanıcı durumlarıdır; alanların yanında normal durum yönetimiyle gösterilmelidir. Error Boundary, beklenmeyen render ve bileşen ağacı hataları içindir.
Hangi hatalar yakalanır?
Bir hata sınırının alt ağacında şu durumlar yakalanabilir:
- Bir fonksiyon bileşeninin JSX üretirken veya render sırasında hata vermesi.
- Bir sınıf bileşeninin
render,constructorveya yaşam döngüsü metotlarında hata oluşması. - Alt bileşenlerden birinin geçersiz veri nedeniyle render edilememesi.
Hata sınırı hatayı kendi alt ağacında yakalar; üst seviyedeki veya hata sınırının dışındaki bileşenleri korumaz. Sınırın kendisi hata verirse, hatayı yakalayacak başka bir üst sınır gerekir.
Yakalanmayan durumlar
Aşağıdaki hatalar Error Boundary tarafından otomatik olarak yakalanmaz:
- Butona tıklama gibi olay işleyicilerinde oluşan hatalar. Bunlarda
try...catchveya uygun hata durumu kullanılmalıdır. -
setTimeout, Promise ve diğer asenkron işlemlerde sonradan oluşan hatalar. - Sunucu tarafında render edilirken oluşan hatalar.
- Hata sınırının kendi kodundaki hatalar.
Örneğin bir tıklama sırasında API isteği başarısız olursa hata sınırının devreye girmesini beklemeyin. İstek hatasını
catch içinde ele alıp kullanıcıya yüklenemedi, yeniden dene veya benzeri bir durum göstermelisiniz.En küçük çalışan hata sınırı örneği
React'te yerleşik hata sınırı sınıf bileşeniyle oluşturulur. Aşağıdaki örnekte
ProblemliBilesen render sırasında hata verir ve sınır yedek ekranı gösterir:
Kod:
import React from "react";
class HataSiniri extends React.Component {
state = { hata: null };
static getDerivedStateFromError(hata) {
return { hata };
}
componentDidCatch(hata, bilgi) {
console.error("React alt ağaç hatası:", hata, bilgi);
}
render() {
if (this.state.hata) {
return <p>Bu bölüm şu anda görüntülenemiyor.</p>;
}
return this.props.children;
}
}
function ProblemliBilesen() {
throw new Error("Örnek render hatası");
}
export default function Uygulama() {
return (
<HataSiniri>
<ProblemliBilesen />
</HataSiniri>
);
}Örneği çalıştırma ve sonucu yorumlama
- Bu kodu çalışan bir React uygulamasının giriş bileşenine yerleştirin ve uygulamayı geliştirme sunucusuyla çalıştırın.
- Sayfayı açtığınızda
ProblemliBilesenhata fırlatacağı için beklenen görünür çıktıBu bölüm şu anda görüntülenemiyor.olur. - Geliştirici konsolunda hata ve bileşen yığını görülür. Bu kayıt, hatanın yok olduğu anlamına gelmez; yalnızca kullanıcıya gösterilecek alternatif ekranın üretildiği anlamına gelir.
- Yedek ekran görünmüyorsa önce
ProblemliBilesenöğesinin gerçektenHataSiniriiçinde olup olmadığını ve sınırın kendisinin hata verip vermediğini kontrol edin.
Fonksiyon bileşenleri doğrudan hata sınırı olamaz; bunun için sınıf tabanlı bir sınır yazabilir veya projede kullanılan, hata sınırı sağlayan bir çözümü tercih edebilirsiniz. Üretimde yedek ekranı, hatayı sessizce gizlemek yerine kayıt sistemine bildirip kullanıcının yeniden denemesine veya güvenli bir bölüme dönmesine imkân vermelidir.
| Hata yeri | Boundary beklentisi | İlgili çözüm |
|---|---|---|
| Alt bileşenin render’ı | Uygun üst sınır yakalar | Fallback ve kontrollü kayıt |
| Normal click işleyicisi | Otomatik yakalamaz | İşleyicide hata durumu/catch |
| Sıradan timer/asenkron callback | Otomatik yakalamaz | İşlemin kendi hata akışı |
| Boundary’nin kendi render’ı | Kendisi yakalayamaz | Daha üst sınır ve gerçek düzeltme |
Geliştirme araçları fallback üretilse bile hata overlay’i gösterebilir; yalnız kırmızı geliştirme ekranı gördüğünüz için sınırın hiç çalışmadığını varsaymayın. Sıradan bir try bloğunda başlatılan ama await edilmeyen Promise’in sonraki reddi de o senkron catch’e otomatik düşmez.
Hata sınırını nereye yerleştirmeli?
Tek bir sınırı uygulamanın tamamının çevresine koymak basit bir genel yedek ekran sağlar; fakat tüm sayfanın etkilenmesine yol açabilir. Büyük uygulamalarda sınırı sayfa, panel veya bağımsız widget çevresine yerleştirmek genellikle daha kullanışlıdır. Böylece yalnız bozulan bölüm yedek ekrana geçer ve diğer bölümler çalışmayı sürdürebilir.
Bir olay işleyicisini test etmek için hata sınırına güvenmeyin. Örneğin:
Kod:
function KaydetButonu() {
function kaydet() {
try {
// Bu örnek senkron hatadır. Asenkron işlem için await/catch gerekir.
throw new Error("Kaydetme başarısız");
} catch (hata) {
console.error(hata);
}
}
return <button type="button" onClick={kaydet}>Kaydet</button>;
}Bu ayrım önemlidir: hata sınırı render edilemeyen React alt ağacını izole eder; iş mantığı, ağ isteği ve kullanıcı etkileşimi hatalarının sorumluluğu ise ilgili kodda kalır.
Kaynaklar
Sık sorulan sorular
Hata sınırı yakalanan hatayı otomatik olarak düzeltir mi?
Hayır. Hatanın ayrıntılarını kaydetmek ve yedek arayüz göstermek için kullanılır. Asıl düzeltme, hataya neden olan bileşen veya verinin düzeltilmesini gerektirir.
Bir hata sınırını sıfırlayıp bileşeni yeniden deneyebilir miyim?
Evet. Sınırın hata durumunu temizleyen bir yeniden deneme akışı tasarlanabilir. Pratikte sınır, yeni bir
key ile yeniden oluşturulabilir veya sınıf bileşeninde hata durumunu temizleyen bir düğme sağlanabilir; ancak aynı hata koşulu sürüyorsa yeniden deneme yine başarısız olur.Hata sınırı form doğrulama hataları için uygun mudur?
Genellikle hayır. Form doğrulama hataları beklenen kullanıcı durumlarıdır; alanların yanında normal durum yönetimiyle gösterilmelidir. Error Boundary, beklenmeyen render ve bileşen ağacı hataları içindir.
