Hata Yönetimi Referansı
React uygulamalarında hata yönetimi, modern web uygulamalarının ve SPA’ların stabilitesi için kritik bir bileşendir. Hata yönetimi, bir bileşende meydana gelen hataların tüm uygulamayı çökertmesini önler ve kullanıcıya kesintisiz bir deneyim sunar. React, hata yönetimi için Error Boundaries (Hata Sınırları) gibi mekanizmalar sunar; bunlar, alt bileşenlerde oluşan hataları yakalayarak kullanıcıya alternatif bir arayüz gösterebilir veya hata raporlarını loglayabilir.
Bu referansta, hata yönetiminin React geliştirme süreçlerinde nasıl uygulanacağı, Error Boundaries’in nasıl kullanılacağı, state ve lifecycle yönetimiyle hataların nasıl yakalanıp yönetileceği detaylı olarak ele alınacaktır. Kullanıcılar ayrıca asenkron işlemlerde hata yakalama, bileşenlerin yeniden render edilmesini optimize etme ve performanslı hata yönetimi stratejileri hakkında bilgi sahibi olacaklardır.
Okuyucular, hata yönetimini ileri düzey React projelerinde uygulayabilecek, reusable bileşenler oluşturabilecek ve uygulama güvenliğini artıracak teknikleri öğreneceklerdir. Bu referans, hem hata yakalama hem de kullanıcı deneyimini koruma odaklıdır ve modern web uygulamalarındaki en iyi uygulamalar ile bütünleşir.
Temel Örnek
jsximport React, { Component, useState } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("Yakalanan hata:", error, info);
}
render() {
if (this.state.hasError) {
return <h2>Bu bileşende bir hata oluştu.</h2>;
}
return this.props.children;
}
}
function HataOlusturanBilesen() {
const [count, setCount] = useState(0);
if (count === 3) {
throw new Error("Sayaç limiti aşıldı!");
}
return ( <div> <p>Şu anki değer: {count}</p>
<button onClick={() => setCount(count + 1)}>Artır</button> </div>
);
}
export default function App() {
return ( <ErrorBoundary> <HataOlusturanBilesen /> </ErrorBoundary>
);
}Bu örnekte ErrorBoundary sınıf bileşeni, alt bileşenlerde oluşan hataları yakalamak için kullanılır. getDerivedStateFromError metodu hatayı algılayıp state’i günceller ve kullanıcıya fallback bir arayüz gösterir. componentDidCatch, hatayı loglamak ve gerekli debug bilgilerini toplamak için kullanılır.
HataOlusturanBilesen fonksiyonel bileşeni, useState ile state yönetimini gösterir. Sayaç 3’e ulaştığında kasıtlı olarak bir hata fırlatır. Bu sayede Error Boundary’nin hata yönetimini nasıl ele aldığı ve uygulamanın tamamının çökmesini önlediği gösterilmiş olur. Bu pattern, özellikle veri çekme veya kullanıcı etkileşimlerinin yoğun olduğu SPA’larda kritik öneme sahiptir.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
function VeriGetir({ url }) {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(res => {
if (!res.ok) throw new Error("Veri yüklenemedi");
return res.json();
})
.then(setData)
.catch(setError);
}, [url]);
if (error) return <div>Hata: {error.message}</div>;
if (!data) return <div>Yükleniyor...</div>;
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}
export default function App() {
return <VeriGetir url="https://jsonplaceholder.typicode.com/posts/1" />;
}Advanced React Implementation
jsximport React, { Component } from 'react';
class GelismisErrorBoundary extends Component {
state = { hasError: false, error: null, errorInfo: null };
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
this.setState({ errorInfo });
logHataServisine(error, errorInfo);
}
render() {
if (this.state.hasError) {
return ( <div> <h1>Hata oluştu</h1>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()} <br />
{this.state.errorInfo?.componentStack} </details> </div>
);
}
return this.props.children;
}
}
function logHataServisine(error, info) {
console.log("Hata servisine gönderiliyor:", error, info);
}
export default GelismisErrorBoundary;React’te hata yönetimi için en iyi uygulamalar arasında Error Boundaries kullanımı, asenkron işlemlerde try/catch ile hata yakalama ve state mutasyonlarından kaçınma yer alır. Prop drilling’i azaltmak, gereksiz render’lardan kaçınmak ve React DevTools veya Sentry gibi araçlarla hataları takip etmek performans ve güvenlik açısından kritik öneme sahiptir.
Performance optimizasyonu için React.memo, useCallback ve useMemo kullanmak önemlidir. Kullanıcıya gösterilen hata mesajları basit ve anlaşılır olmalı, detaylı loglar ise geliştiriciler için tutulmalıdır. Bu yöntemler, büyük ölçekli React uygulamalarında stabil ve güvenli bir deneyim sunar.
📊 Kapsamlı Referans
| React Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| ErrorBoundary | Alt bileşenlerdeki hataları yakalar | <ErrorBoundary>{children}</ErrorBoundary> | <ErrorBoundary><HataOlusturanBilesen /></ErrorBoundary> | Uygulama stabilitesi |
| getDerivedStateFromError | Hata oluştuğunda state günceller | static getDerivedStateFromError(error) | static getDerivedStateFromError(error) { return { hasError: true }; } | Sadece sınıf bileşenleri |
| componentDidCatch | Hata loglama | componentDidCatch(error, info) | componentDidCatch(error, info) { console.log(error, info); } | Debug ve monitöring |
| useState | State yönetimi | const [state, setState] = useState(initial) | const [count, setCount] = useState(0) | State mutasyonundan kaçının |
| useEffect | Asenkron işlemler | useEffect(() => {}, [deps]) | useEffect(() => { fetchData(); }, []); | Veri çekme işlemleri |
| try/catch | Hata yakalama | try { ... } catch(error) { ... } | try { await fetch(url); } catch(e) { setError(e); } | Asenkron ve senkron |
| setState | State güncelleme | this.setState({ key: value }) | this.setState({ hasError: true }); | Sınıf bileşenleri için |
| React.memo | Render optimizasyonu | export default React.memo(Component) | export default React.memo(HataOlusturanBilesen); | Performans artırır |
| PropTypes | Prop doğrulama | Component.propTypes = {...} | HataOlusturanBilesen.propTypes = { count: PropTypes.number } | Hata önleme |
| Fallback UI | Hata durumunda gösterilecek UI | <Fallback /> | <ErrorBoundary fallback={<Fallback />}><Component /></ErrorBoundary> | UX iyileştirir |
📊 Complete React Properties Reference
| Property | Values | Default | Description | React Support |
|---|---|---|---|---|
| hasError | true, false | false | Hata olup olmadığını belirtir | Sınıf bileşenleri |
| error | Error object | null | Yakalanan hata bilgisi | Sınıf bileşenleri |
| errorInfo | object | null | Bileşen stack trace bilgisi | Sınıf bileşenleri |
| children | ReactNode | null | Alt bileşenler | Tüm bileşenler |
| fallback | ReactNode | null | Hata durumunda gösterilecek arayüz | React 16+ |
| getDerivedStateFromError | function | null | State güncelleme | Sınıf bileşenleri |
| componentDidCatch | function | null | Hata loglama | Sınıf bileşenleri |
| useState | function | null | Fonksiyonel bileşen state | Fonksiyonel bileşenler |
| useEffect | function | null | Hook ile asenkron işlemler | Fonksiyonel bileşenler |
| setState | function | null | Sınıf bileşeni state güncelleme | Sınıf bileşenleri |
| React.memo | function | null | Render optimizasyonu | Fonksiyonel bileşenler |
| PropTypes | object | null | Prop doğrulama | Tüm bileşenler |
Hata yönetimi React projelerinde uygulamanın güvenilirliğini ve performansını artırır. Error Boundaries ve try/catch ile asenkron işlemler, kullanıcıya kesintisiz deneyim sunarken geliştiriciye hata raporlama sağlar. Bir sonraki adım olarak global state yönetimi, logging entegrasyonu ve ileri düzey performans optimizasyonu konularına odaklanmak, React projelerinde hatasız ve ölçeklenebilir mimari oluşturmak için önemlidir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek