Chapter 27 — Xatolarni Boshqarish

Yaxshi ilova — xatolarni "yashirmaydi", balki ularni chiroyli va foydali tarzda boshqaradi.

---

27.1 Error Boundaries

Example

App.jsx
React JSXNusxalash
01class ErrorBoundary extends React.Component {
02  state = { hasError: false };
03 
04  static getDerivedStateFromError() {
05    return { hasError: true };
06  }
07 
08  componentDidCatch(error, info) {
09    console.error("Xatolik:", error, info);
10  }
11 
12  render() {
13    if (this.state.hasError) {
14      return <h2>Nimadir xato ketdi.</h2>;
15    }
16    return this.props.children;
17  }
18}
19 
20<ErrorBoundary>
21  <ProductList />
22</ErrorBoundary>

Why Does It Exist?

Agar bitta komponentda kutilmagan JavaScript xatosi yuz bersa, butun ilova "oq ekran" bo'lib qolishi mumkin. Error Boundary — shu xatoni "ushlab", faqat o'sha qismni fallback UI bilan almashtiradi.

💡 Key Idea
Error Boundary hozircha faqat class komponent sifatida yozilishi mumkin — funksional komponent uchun bevosita ekvivalenti yo'q, lekin uni bir marta yozib, butun ilovada qayta ishlatish mumkin.

27.2 Async Xatolarni Boshqarish

Example

App.jsx
React JSXNusxalash
01async function loadUser(id) {
02  try {
03    const res = await fetch(`/api/users/${id}`);
04    if (!res.ok) throw new Error("Foydalanuvchi topilmadi");
05    return await res.json();
06  } catch (error) {
07    console.error(error);
08    throw error;
09  }
10}

⚠️ Common Mistake
Error Boundary — async kod (masalan fetch yoki setTimeout ichidagi) xatolarni ushlamaydi. Bunday holatlarda try/catch yoki state orqali qo'lda boshqarish kerak.

📝 Practice Exercises

🔴 Exercise 1 — Hard

Task: Butun ilovani o'rab turuvchi umumiy ErrorBoundary yarating va uni bir nechta sahifada qayta ishlating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function ProductPage() {
02  useEffect(() => {
03    fetch("/api/product").then(res => {
04      if (!res.ok) throw new Error("Xato");
05    });
06  }, []);
07  return <ErrorBoundary><Content /></ErrorBoundary>;
08}

Your Task: fetch ichida throw qilingan xato ErrorBoundary tomonidan ushlanadimi?

<details> <summary>Solution</summary> Yo'q — bu asinxron (Promise ichidagi) xato, Error Boundary faqat render paytidagi sinxron xatolarni ushlaydi. To'g'ri yechim — xatoni state orqali boshqarish: ```jsx const [error, setError] = useState(null); useEffect(() => { fetch("/api/product") .then(res => { if (!res.ok) throw new Error("Xato"); }) .catch(setError); }, []); if (error) return <ErrorMessage error={error} />; ``` </details>

📌 Chapter Summary

Error Boundary — render va lifecycle xatolarini ushlab, fallback UI ko'rsatadi, lekin asinxron xatolarni ushlamaydi. Asinxron xatolar try/catch yoki .catch() orqali alohida boshqariladi.

🎯 Key Takeaways

• Error Boundary — faqat render/lifecycle xatolari uchun
• Asinxron xatolar uchun try/catch yoki state kerak
• Bitta umumiy ErrorBoundary butun ilovada qayta ishlatilishi mumkin

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01class ErrorBoundary extends React.Component {
02  state = { hasError: false };
03  static getDerivedStateFromError() { return { hasError: true }; }
04  componentDidCatch(error, info) { console.error(error, info); }
05  render() {
06    if (this.state.hasError) return <Fallback />;
07    return this.props.children;
08  }
09}

---