Error boundary'ler nedir ve ne yakalarlar?

Question

Accepted Answer

**error boundary** bir bileşendir ve **render işlemi** sırasında alt ağacında fırlatılan JavaScript hatalarını yakalar, tüm uygulamayı çökmek yerine fallback UI gösterir ve hatayı günlüğe kaydedebilir. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Neyi yakalar — neyi yakalamaz ✅ Yakalar: **render**'da hataları, **lifecycle methods**'ta hataları ve altındaki bileşenlerin yapıcılarında hataları. ❌ **Yakalamaz**: - **event handlers**'da hataları (orada normal `try/catch` kullanın). - **Async** kodu (promises, `setTimeout`) — bunlar render akışının dışındadır. - boundary'nin kendisindeki hataları veya **SSR** sırasındaki hataları. ## Neden önemli - Error boundary'ler şu anda **class components** olmalıdır (veya hook dostu bir API için `react-error-boundary` kütüphanesini kullanın). - Bağımsız bölümleri çevreleyen birden fazla boundary yerleştirin (widget'lar, rotalar) böylece başarısız olan bir widget her şeyi devirmez — tek bir top-level boundary herhangi bir hatayı tamamen boş bir sayfaya dönüştürür.