14-sentabr, 2025O'zbek

Reactda mustahkam xato boshqaruvi uchun JavaScript Error Boundary'ni tushunish va joriy etish bo'yicha to'liq qo'llanma.

JavaScript Error Boundary: Reactda Xatoliklarni Boshqarish Bo'yicha Qo'llanma

React dasturlash olamida kutilmagan xatolar foydalanuvchilar uchun noqulayliklarga va ilova barqarorligining buzilishiga olib kelishi mumkin. Ishonchli va barqaror ilovalarni yaratish uchun puxta o'ylangan xatoliklarni boshqarish strategiyasi juda muhim. Reactning Error Boundaries (Xatolik Chegaralari) mexanizmi komponentlar daraxtingizda yuzaga keladigan xatolarni silliq boshqarish, butun ilovaning ishdan chiqishini oldini olish va zaxira foydalanuvchi interfeysini (UI) ko'rsatish uchun kuchli vositani taqdim etadi.

Error Boundary nima?

Error Boundary - bu React komponenti bo'lib, o'zining quyi komponentlar daraxtining istalgan joyidagi JavaScript xatolarini ushlaydi, ularni qayd etadi va ishdan chiqqan komponentlar daraxti o'rniga zaxira foydalanuvchi interfeysini (UI) ko'rsatadi. Error Boundaries render qilish paytida, hayot tsikli metodlarida va o'zidan pastdagi butun daraxt konstruktorlarida yuzaga kelgan xatolarni ushlaydi.

Error Boundary'ni React komponentlari uchun try...catch bloki deb o'ylang. try...catch bloki sinxron JavaScript kodidagi istisnolarni boshqarishga imkon berganidek, Error Boundary ham React komponentlaringizni render qilish paytida yuzaga keladigan xatolarni boshqarishga imkon beradi.

Muhim Eslatma: Error Boundaries quyidagi holatlar uchun xatolarni ushlamaydi:

Hodisa ishlovchilari (event handlers) (keyingi bo'limlarda batafsil ma'lumot)
Asinxron kod (masalan, setTimeout yoki requestAnimationFrame qayta chaqiruvlari)
Server tomonida render qilish (Server-side rendering)
Error Boundary'ning o'zida yuzaga kelgan xatolar (uning quyi komponentlarida emas)

Nima uchun Error Boundaries'dan foydalanish kerak?

Error Boundaries'dan foydalanish bir nechta muhim afzalliklarni taqdim etadi:

Foydalanuvchi Tajribasini Yaxshilash: Bo'sh oq ekran yoki tushunarsiz xato xabarini ko'rsatish o'rniga, siz foydalanuvchiga qulay zaxira UI'ni ko'rsatishingiz, biror narsa noto'g'ri ketganligi haqida xabar berishingiz va ehtimol tiklanish usulini taklif qilishingiz mumkin (masalan, sahifani qayta yuklash yoki boshqa bo'limga o'tish).
Ilova Barqarorligi: Error Boundaries ilovangizning bir qismidagi xatolar butun ilovani ishdan chiqarishining oldini oladi. Bu, ayniqsa, ko'plab o'zaro bog'liq komponentlarga ega murakkab ilovalar uchun muhimdir.
Markazlashtirilgan Xato Boshqaruvi: Error Boundaries xatolarni qayd etish va muammolarning asl sababini topish uchun markazlashtirilgan joyni ta'minlaydi. Bu nosozliklarni tuzatish va texnik xizmat ko'rsatishni soddalashtiradi.
Silliq Ishdan Chiqish (Graceful Degradation): Ba'zi komponentlar ishlamay qolganda ham ilovaning qolgan qismi ishlashini ta'minlash uchun Error Boundaries'ni ilovangizning turli qismlariga strategik tarzda joylashtirishingiz mumkin. Bu xatolar yuzaga kelganda silliq ishlashni ta'minlaydi.

Reactda Error Boundaries'ni joriy etish

Error Boundary yaratish uchun siz quyidagi hayot tsikli metodlaridan birini (yoki ikkalasini) amalga oshiradigan sinf komponentini aniqlashingiz kerak:

static getDerivedStateFromError(error): Ushbu hayot tsikli metodi quyi komponent tomonidan xato yuzaga kelganidan keyin chaqiriladi. U yuzaga kelgan xatoni argument sifatida qabul qiladi va xato sodir bo'lganligini ko'rsatish uchun komponent holatini yangilaydigan qiymatni qaytarishi kerak (masalan, hasError bayrog'ini true ga o'rnatish).
componentDidCatch(error, info): Ushbu hayot tsikli metodi quyi komponent tomonidan xato yuzaga kelganidan keyin chaqiriladi. U yuzaga kelgan xatoni va qaysi komponent xatoga sabab bo'lganligi haqidagi ma'lumotlarni o'z ichiga olgan info obyektini argument sifatida qabul qiladi. Ushbu metoddan xatoni Sentry yoki Bugsnag kabi xizmatlarga yozish uchun foydalanishingiz mumkin.

Mana Error Boundary komponentining oddiy misoli:


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  static getDerivedStateFromError(error) {
    // Holatni yangilang, shunda keyingi render zaxira UI'ni ko'rsatadi.
    return {
      hasError: true,
      error: error
    };
  }

  componentDidCatch(error, info) {
    // "componentStack" misoli:
    //   in ComponentThatThrows (created by App)
    //   in MyErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    console.error("Caught an error:", error, info);
    this.setState({
        errorInfo: info.componentStack
    });
    // Xatoni xatoliklar haqida hisobot berish xizmatiga ham yozishingiz mumkin
    //logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return (
        <div>
          <h2>Biror narsa noto'g'ri ketdi.</h2>
          <p>Xato: {this.state.error ? this.state.error.message : "Noma'lum xato yuz berdi."}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Error Boundary'dan foydalanish uchun, shunchaki himoya qilmoqchi bo'lgan komponentlar daraxtini o'rang:


<ErrorBoundary>
  <MyComponentThatMightThrow/>
</ErrorBoundary>

Error Boundary'dan foydalanishning amaliy misollari

Keling, Error Boundaries ayniqsa foydali bo'lishi mumkin bo'lgan ba'zi amaliy stsenariylarni ko'rib chiqamiz:

1. API Xatoliklarini Boshqarish

API'dan ma'lumotlarni olishda tarmoq muammolari, server muammolari yoki noto'g'ri ma'lumotlar tufayli xatolar yuzaga kelishi mumkin. Ushbu xatolarni silliq boshqarish uchun ma'lumotlarni oladigan va ko'rsatadigan komponentni Error Boundary bilan o'rashingiz mumkin.


function UserProfile() {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/user');
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (error) {
        // Xato ErrorBoundary tomonidan tutiladi
        throw error; 
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Foydalanuvchi profili yuklanmoqda...</p>;
  }

  if (!user) {
    return <p>Foydalanuvchi ma'lumotlari mavjud emas.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
    </ErrorBoundary>
  );
}

Ushbu misolda, agar API so'rovi muvaffaqiyatsiz tugasa yoki xato qaytarsa, Error Boundary xatoni ushlaydi va zaxira UI'ni (Error Boundary'ning render metodi ichida aniqlangan) ko'rsatadi. Bu butun ilovaning ishdan chiqishini oldini oladi va foydalanuvchiga ko'proq ma'lumot beruvchi xabarni taqdim etadi. Zaxira UI'ni so'rovni qayta urinish imkoniyatini berish uchun kengaytirishingiz mumkin.

2. Uchinchi Tomon Kutubxonalari Xatoliklarini Boshqarish

Uchinchi tomon kutubxonalaridan foydalanganda, ular kutilmagan xatoliklarni yuzaga keltirishi mumkin. Ushbu kutubxonalardan foydalanadigan komponentlarni Error Boundaries bilan o'rash bu xatolarni silliq boshqarishga yordam beradi.

Ma'lumotlar nomuvofiqligi yoki boshqa muammolar tufayli vaqti-vaqti bilan xatoliklar chiqaradigan faraziy grafik kutubxonasini ko'rib chiqing. Grafik komponentini quyidagicha o'rashingiz mumkin:


function MyChartComponent() {
  try {
    // Grafikni uchinchi tomon kutubxonasidan foydalanib render qiling
    return <Chart data={data} />;
  } catch (error) {
    // Bu catch bloki React komponentining hayot tsikli xatolari uchun samarasiz bo'ladi
    // Bu asosan ushbu funksiya ichidagi sinxron xatolar uchun.
    console.error("Grafikni render qilishda xato:", error);
    // Xatoni ErrorBoundary tomonidan tutilishi uchun yuborishni o'ylab ko'ring
    throw error; // Xatoni qayta yuborish
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MyChartComponent />
    </ErrorBoundary>
  );
}

Agar Chart komponenti xato yuzaga keltirsa, Error Boundary uni ushlaydi va zaxira UI'ni ko'rsatadi. E'tibor bering, MyChartComponent ichidagi try/catch faqat sinxron funksiya ichidagi xatolarni ushlaydi, komponentning hayot tsiklidagi xatolarni emas. Shuning uchun bu yerda ErrorBoundary juda muhim.

3. Render Qilish Xatoliklarini Boshqarish

Noto'g'ri ma'lumotlar, noto'g'ri prop turlari yoki boshqa muammolar tufayli render qilish jarayonida xatolar yuzaga kelishi mumkin. Error Boundaries bu xatolarni ushlab, ilovaning ishdan chiqishini oldini oladi.


function DisplayName({ name }) {
  if (typeof name !== 'string') {
    throw new Error('Ism satr bo\'lishi kerak');
  }

  return <h2>Salom, {name}!</h2>;
}

function App() {
  return (
    <ErrorBoundary>
      <DisplayName name={123} />  <!-- Noto'g'ri prop turi -->
    </ErrorBoundary>
  );
}

Ushbu misolda DisplayName komponenti name propining satr bo'lishini kutadi. Agar uning o'rniga raqam uzatilsa, xato yuzaga keladi va Error Boundary uni ushlab, zaxira UI'ni ko'rsatadi.

Error Boundaries va Hodisa Ishlovchilari (Event Handlers)

Avval aytib o'tilganidek, Error Boundaries hodisa ishlovchilari ichida yuzaga keladigan xatolarni ushlamaydi. Buning sababi, hodisa ishlovchilari odatda asinxron bo'lib, Error Boundaries faqat render qilish paytida, hayot tsikli metodlarida va konstruktorlarda yuzaga keladigan xatolarni ushlaydi.

Hodisa ishlovchilaridagi xatolarni boshqarish uchun hodisa ishlovchisi funksiyasi ichida an'anaviy try...catch blokidan foydalanish kerak.


function MyComponent() {
  const handleClick = () => {
    try {
      // Xatolik yuzaga keltirishi mumkin bo'lgan kod
      throw new Error('Hodisa ishlovchisida xato yuz berdi');
    } catch (error) {
      console.error('Hodisa ishlovchisida xato ushlandi:', error);
      // Xatoni boshqaring (masalan, foydalanuvchiga xato xabarini ko'rsatish)
    }
  };

  return <button onClick={handleClick}>Meni bosing</button>;
}

Global Xatoliklarni Boshqarish

Error Boundaries React komponentlari daraxti ichidagi xatolarni boshqarish uchun ajoyib bo'lsa-da, ular barcha mumkin bo'lgan xato stsenariylarini qamrab olmaydi. Masalan, ular React komponentlaridan tashqarida yuzaga keladigan xatolarni, masalan, global hodisa tinglovchilaridagi yoki React ishga tushirilishidan oldin ishlaydigan koddagi xatolarni ushlamaydi.

Bunday turdagi xatolarni boshqarish uchun siz window.onerror hodisa ishlovchisidan foydalanishingiz mumkin.


window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global xato ishlovchisi:', message, source, lineno, colno, error);
  // Xatoni Sentry yoki Bugsnag kabi xizmatga yozing
  // Foydalanuvchiga global xato xabarini ko'rsatish (ixtiyoriy)
  return true; // Standart xato boshqaruvini oldini olish
};

window.onerror hodisa ishlovchisi ushlanmagan JavaScript xatosi yuzaga kelganda chaqiriladi. Siz undan xatoni qayd etish, foydalanuvchiga global xato xabarini ko'rsatish yoki xatoni boshqarish uchun boshqa harakatlarni amalga oshirish uchun foydalanishingiz mumkin.

Muhim: window.onerror hodisa ishlovchisidan true qiymatini qaytarish brauzerning standart xato xabarini ko'rsatishini oldini oladi. Biroq, foydalanuvchi tajribasini yodda tuting; agar siz standart xabarni bostirsangiz, uning o'rniga aniq va ma'lumot beruvchi muqobilni taqdim etganingizga ishonch hosil qiling.

Error Boundaries'dan foydalanish bo'yicha eng yaxshi amaliyotlar

Error Boundaries'dan foydalanishda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

Error Boundaries'ni strategik tarzda joylashtiring: Xatolarni izolyatsiya qilish va ularning tarqalishini oldini olish uchun ilovangizning turli qismlarini Error Boundaries bilan o'rang. Butun marshrutlarni yoki UI'ning asosiy qismlarini o'rashni o'ylab ko'ring.
Ma'lumot beruvchi zaxira UI'ni taqdim eting: Zaxira UI foydalanuvchiga xato yuz berganligi haqida xabar berishi va ehtimol tiklanish usulini taklif qilishi kerak. "Biror narsa noto'g'ri ketdi" kabi umumiy xato xabarlarini ko'rsatishdan saqlaning.
Xatolarni qayd eting: Xatolarni Sentry yoki Bugsnag kabi xizmatga yozish uchun componentDidCatch hayot tsikli metodidan foydalaning. Bu sizga muammolarning asl sababini topishga va ilovangiz barqarorligini yaxshilashga yordam beradi.
Kutilgan xatolar uchun Error Boundaries'dan foydalanmang: Error Boundaries kutilmagan xatolarni boshqarish uchun mo'ljallangan. Kutilgan xatolar uchun (masalan, validatsiya xatolari, API xatolari) try...catch bloklari yoki maxsus xato boshqaruv komponentlari kabi aniqroq xato boshqaruv mexanizmlaridan foydalaning.
Bir nechta darajadagi Error Boundaries'ni ko'rib chiqing: Turli darajadagi xato boshqaruvini ta'minlash uchun Error Boundaries'ni ichma-ich joylashtirishingiz mumkin. Masalan, sizda har qanday ushlanmagan xatolarni ushlaydigan va umumiy xato xabarini ko'rsatadigan global Error Boundary va ma'lum komponentlardagi xatolarni ushlaydigan va batafsilroq xato xabarlarini ko'rsatadigan aniqroq Error Boundaries bo'lishi mumkin.
Server tomonida render qilishni unutmang: Agar siz server tomonida render qilishdan foydalanayotgan bo'lsangiz, serverda ham xatolarni boshqarishingiz kerak bo'ladi. Error Boundaries serverda ishlaydi, lekin dastlabki render paytida yuzaga keladigan xatolarni ushlash uchun qo'shimcha xato boshqaruv mexanizmlaridan foydalanishingiz kerak bo'lishi mumkin.

Error Boundary'ning ilg'or texnikalari

1. Render Prop'dan foydalanish

Statik zaxira UI'ni render qilish o'rniga, xatolarning qanday boshqarilishida ko'proq moslashuvchanlikni ta'minlash uchun render prop'dan foydalanishingiz mumkin. Render prop bu komponent biror narsani render qilish uchun ishlatadigan funksiya propidir.


class ErrorBoundary extends React.Component {
  // ... (avvalgidek)

  render() {
    if (this.state.hasError) {
      // Zaxira UI'ni render qilish uchun render prop'dan foydalaning
      return this.props.fallbackRender(this.state.error, this.state.errorInfo);
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary fallbackRender={(error, errorInfo) => (
      <div>
        <h2>Biror narsa noto'g'ri ketdi!</h2>
        <p>Xato: {error.message}</p>
        <details style={{ whiteSpace: 'pre-wrap' }}>
          {errorInfo.componentStack}
        </details>
      </div>
    )}>
      <MyComponentThatMightThrow/>
    </ErrorBoundary>
  );
}

Bu sizga har bir Error Boundary uchun zaxira UI'ni sozlash imkonini beradi. fallbackRender propi xato va xato ma'lumotlarini argument sifatida qabul qiladi, bu sizga aniqroq xato xabarlarini ko'rsatishga yoki xatoga qarab boshqa harakatlarni bajarishga imkon beradi.

2. Error Boundary Yuqori Tartibli Komponent (HOC) sifatida

Siz boshqa komponentni Error Boundary bilan o'raydigan yuqori tartibli komponent (HOC) yaratishingiz mumkin. Bu bir xil kodni takrorlamasdan Error Boundaries'ni bir nechta komponentlarga qo'llash uchun foydali bo'lishi mumkin.


function withErrorBoundary(WrappedComponent) {
  return class WithErrorBoundary extends React.Component {
    render() {
      return (
        <ErrorBoundary>
          <WrappedComponent {...this.props} />
        </ErrorBoundary>
      );
    }
  };
}

// Foydalanish:
const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

withErrorBoundary funksiyasi komponentni argument sifatida qabul qiladi va asl komponentni Error Boundary bilan o'raydigan yangi komponentni qaytaradi. Bu sizga ilovangizdagi istalgan komponentga osongina xato boshqaruvini qo'shish imkonini beradi.

Error Boundaries'ni Sinovdan O'tkazish

Error Boundaries'ning to'g'ri ishlashiga ishonch hosil qilish uchun ularni sinovdan o'tkazish muhim. Error Boundaries'ni sinash uchun Jest va React Testing Library kabi sinov kutubxonalaridan foydalanishingiz mumkin.

Mana React Testing Library yordamida Error Boundary'ni qanday sinashga misol:


import { render, screen, fireEvent } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
  throw new Error('Bu komponent xato chiqaradi');
}

test('xato yuzaga kelganda zaxira UI'ni render qiladi', () => {
  render(
    <ErrorBoundary>
      <ComponentThatThrows />
    </ErrorBoundary>
  );

  expect(screen.getByText('Biror narsa noto\'g\'ri ketdi.')).toBeInTheDocument();
});

Ushbu test xato chiqaradigan ComponentThatThrows komponentini render qiladi. Keyin test Error Boundary tomonidan render qilingan zaxira UI'ning ko'rsatilishini tasdiqlaydi.

Error Boundaries va Server Komponentlari (React 18+)

React 18 va undan keyingi versiyalarda Server Komponentlarining paydo bo'lishi bilan Error Boundaries xatolarni boshqarishda muhim rol o'ynashda davom etmoqda. Server Komponentlari serverda ishlaydi va faqat render qilingan natijani mijozga yuboradi. Asosiy tamoyillar bir xil bo'lib qolsa-da, e'tiborga olish kerak bo'lgan bir nechta nozikliklar mavjud:

Server tomonida xatolarni qayd etish: Server Komponentlari ichida yuzaga keladigan xatolarni serverda qayd etayotganingizga ishonch hosil qiling. Bu server tomonidagi qayd etish freymvorkidan foydalanishni yoki xatolarni kuzatish xizmatiga yuborishni o'z ichiga olishi mumkin.
Mijoz tomonidagi zaxira: Server Komponentlari serverda render qilinsa ham, xatolar yuzaga kelgan taqdirda mijoz tomonida zaxira UI'ni taqdim etishingiz kerak. Bu, server komponentni render qila olmagan taqdirda ham, foydalanuvchining izchil tajribaga ega bo'lishini ta'minlaydi.
Oqimli SSR (Streaming SSR): Oqimli Server Tomonida Render qilish (SSR) dan foydalanganda, oqim jarayonida xatolar yuzaga kelishi mumkin. Error Boundaries ta'sirlangan oqim uchun zaxira UI'ni render qilish orqali bu xatolarni silliq boshqarishga yordam beradi.

Server Komponentlarida xatolarni boshqarish rivojlanayotgan soha, shuning uchun eng so'nggi eng yaxshi amaliyotlar va tavsiyalardan xabardor bo'lish muhimdir.

Qochish Kerak Bo'lgan Umumiy Xatolar

Error Boundaries'ga haddan tashqari ishonish: Error Boundaries'ni komponentlaringizdagi to'g'ri xato boshqaruvining o'rnini bosuvchi vosita sifatida ishlatmang. Har doim xatolarni silliq boshqaradigan mustahkam va ishonchli kod yozishga harakat qiling.
Xatolarni e'tiborsiz qoldirish: Muammolarning asl sababini topish uchun Error Boundaries tomonidan ushlangan xatolarni qayd etganingizga ishonch hosil qiling. Shunchaki zaxira UI'ni ko'rsatib, xatoni e'tiborsiz qoldirmang.
Validatsiya xatolari uchun Error Boundaries'dan foydalanish: Error Boundaries validatsiya xatolarini boshqarish uchun to'g'ri vosita emas. Buning o'rniga aniqroq validatsiya texnikalaridan foydalaning.
Error Boundaries'ni sinovdan o'tkazmaslik: Ularning to'g'ri ishlashiga ishonch hosil qilish uchun Error Boundaries'ni sinovdan o'tkazing.

Xulosa

Error Boundaries - bu mustahkam va ishonchli React ilovalarini yaratish uchun kuchli vositadir. Error Boundaries'ni qanday qilib samarali joriy etish va ishlatishni tushunish orqali siz foydalanuvchi tajribasini yaxshilashingiz, ilovaning ishdan chiqishini oldini olishingiz va nosozliklarni tuzatishni soddalashtirishingiz mumkin. Error Boundaries'ni strategik tarzda joylashtirishni, ma'lumot beruvchi zaxira UI'ni taqdim etishni, xatolarni qayd etishni va Error Boundaries'ni sinchkovlik bilan sinovdan o'tkazishni unutmang.

Ushbu qo'llanmada keltirilgan ko'rsatmalar va eng yaxshi amaliyotlarga rioya qilish orqali siz React ilovalaringizning xatolarga chidamli bo'lishini va foydalanuvchilaringiz uchun ijobiy tajriba taqdim etishini ta'minlashingiz mumkin.