M

MLOG

O'zbek

React Xatolik Chegaralarini joriy qilishni o'rganing. Ilovaning ishdan chiqishini oldini oling va foydalanuvchi tajribasini yaxshilang. Eng yaxshi amaliyotlar va real misollar.

React Xatolik Chegaralari (Error Boundaries): Mustahkam Xatoliklarni Boshqarish Bo'yicha To'liq Qo'llanma

Zamonaviy veb-dasturlash olamida silliq va ishonchli foydalanuvchi tajribasi eng muhim ahamiyatga ega. Bitta ishlov berilmagan xatolik butun React ilovasini ishdan chiqarishi, foydalanuvchilarni hafsalasi pir qilishi va qimmatli ma'lumotlarni yo'qotishiga olib kelishi mumkin. React Xatolik Chegaralari (Error Boundaries) bu xatoliklarni muvaffaqiyatli boshqarish, halokatli ishdan chiqishlarning oldini olish va yanada mustahkam hamda foydalanuvchilar uchun qulay tajribani taklif etish uchun kuchli mexanizmni taqdim etadi. Ushbu qo'llanma React Xatolik Chegaralarining maqsadi, joriy etilishi, eng yaxshi amaliyotlari va ilg'or texnikalarini qamrab olgan holda to'liq sharh beradi.

React Xatolik Chegaralari (Error Boundaries) nima?

Xatolik Chegaralari - bu o'zlarining voris komponentlar daraxtining istalgan joyida JavaScript xatoliklarini ushlaydigan, ularni jurnalga yozadigan va ishdan chiqqan komponentlar daraxti o'rniga zaxira interfeysini (fallback UI) ko'rsatadigan React komponentlaridir. Ular ilovaning bir qismidagi xatoliklar butun interfeysni ishdan chiqarishini oldini oluvchi xavfsizlik to'ri vazifasini bajaradi. React 16 versiyasida taqdim etilgan Xatolik Chegaralari avvalgi, kamroq mustahkam bo'lgan xatoliklarni boshqarish mexanizmlarini almashtirdi.

Xatolik Chegaralarini try...catch bloklari deb tasavvur qiling. Biroq, try...catch dan farqli o'laroq, ular komponentlar uchun ishlaydi va ilovangiz bo'ylab xatoliklarni boshqarishning deklarativ va qayta ishlatiladigan usulini taqdim etadi.

Nima uchun Xatolik Chegaralaridan foydalanish kerak?

Xatolik Chegaralari bir nechta muhim afzalliklarni taqdim etadi:

Xatolik Chegarasi Komponentini Yaratish

Xatolik Chegarasi komponentini yaratish uchun siz quyidagi hayotiy sikl metodlaridan birini yoki ikkalasini ham amalga oshiradigan sinf komponentini (class component) aniqlashingiz kerak:

Mana, Xatolik Chegarasi komponentining asosiy misoli:


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

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

  componentDidCatch(error, info) {
    // "componentStack" misoli:
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Ushelgan xatolik: ", error, info.componentStack);
    // Shuningdek, xatolikni xatoliklar haqida hisobot berish xizmatiga yuborishingiz mumkin
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return 
Nimadir noto'g'ri ketdi.
;
    }

    return this.props.children; 
  }
}

Tushuntirish:

Xatolik Chegaralaridan Foydalanish

Xatolik Chegarasidan foydalanish uchun, himoya qilmoqchi bo'lgan komponent yoki komponentlarni ErrorBoundary komponenti bilan o'rang:

Agar ComponentThatMightThrow xatolik yuzaga keltirsa, ErrorBoundary xatolikni ushlaydi, o'z holatini yangilaydi va zaxira interfeysini render qiladi. Ilovaning qolgan qismi normal ishlashda davom etadi.

Xatolik Chegarasini Joylashtirish

Xatolik Chegaralarini joylashtirish samarali xatoliklarni boshqarish uchun juda muhimdir. Ushbu strategiyalarni ko'rib chiqing:

Misol:


function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        

      
    

  );
}

Ushbu misolda ilovaning har bir asosiy qismi (Header, Sidebar, ContentArea, Footer) Xatolik Chegarasi bilan o'ralgan. Bu har bir bo'limga xatoliklarni mustaqil ravishda boshqarish imkonini beradi va bitta xatolikning butun ilovaga ta'sir qilishini oldini oladi.

Zaxira Interfeysini Moslashtirish

Xatolik Chegarasi tomonidan ko'rsatiladigan zaxira interfeysi ma'lumot beruvchi va foydalanuvchilar uchun qulay bo'lishi kerak. Ushbu ko'rsatmalarni hisobga oling:

Misol:


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

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

  componentDidCatch(error, info) {
    // Shuningdek, xatolikni xatoliklar haqida hisobot berish xizmatiga yuborishingiz mumkin
    console.error("Ushelgan xatolik: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return (
        

          
Voy! Nimadir noto'g'ri ketdi.

          
Kechirasiz, ushbu tarkibni ko'rsatishda xatolik yuz berdi.

          
Iltimos, sahifani yangilab ko'ring yoki muammo davom etsa, qo'llab-quvvatlash xizmatiga murojaat qiling.

          
          Qo'llab-quvvatlash xizmatiga murojaat
        

      );
    }

    return this.props.children; 
  }
}

Ushbu misol aniq xatolik xabari, tavsiya etilgan yechimlar va sahifani yangilash hamda qo'llab-quvvatlash xizmatiga murojaat qilish havolalarini o'z ichiga olgan ko'proq ma'lumot beruvchi zaxira interfeysini ko'rsatadi.

Har Xil Turdagi Xatoliklarni Boshqarish

Xatolik Chegaralari render qilish paytida, hayotiy sikl metodlarida va ulardan keyingi butun daraxt konstruktorlarida yuzaga keladigan xatoliklarni ushlaydi. Ular *quyidagilar* uchun xatoliklarni ushlamaydi:

Ushbu turdagi xatoliklarni boshqarish uchun siz turli xil texnikalardan foydalanishingiz kerak.

Hodisa Ishlovchilari

Hodisa ishlovchilarida yuzaga keladigan xatoliklar uchun standart try...catch blokidan foydalaning:


function MyComponent() {
  const handleClick = () => {
    try {
      // Xatolik yuzaga keltirishi mumkin bo'lgan kod
      throw new Error("Hodisa ishlovchisida nimadir noto'g'ri ketdi");
    } catch (error) {
      console.error("Hodisa ishlovchisidagi xatolik: ", error);
      // Xatolikni boshqaring (masalan, xatolik xabarini ko'rsatish)
      alert("Xatolik yuz berdi. Iltimos, qayta urinib ko'ring.");
    }
  };

  return ;
}

Asinxron Kod

Asinxron kodda yuzaga keladigan xatoliklar uchun asinxron funksiya ichida try...catch bloklaridan foydalaning:


function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // Ma'lumotlarni qayta ishlash
        console.log(data);
      } catch (error) {
        console.error("Ma'lumotlarni yuklashda xatolik: ", error);
        // Xatolikni boshqaring (masalan, xatolik xabarini ko'rsatish)
        alert("Ma'lumotlarni yuklab bo'lmadi. Iltimos, keyinroq qayta urinib ko'ring.");
      }
    }

    fetchData();
  }, []);

  return 
Ma'lumotlar yuklanmoqda...
;
}

Shu bilan bir qatorda, ishlov berilmagan va'da (promise) rad etishlari uchun global xatoliklarni boshqarish mexanizmidan foydalanishingiz mumkin:


window.addEventListener('unhandledrejection', function(event) {
  console.error('Ishlov berilmagan rad etish (va`da: ', event.promise, ', sabab: ', event.reason, ');');
  // Ixtiyoriy ravishda global xatolik xabarini ko'rsating yoki xatolikni xizmatga yozing
  alert("Kutilmagan xatolik yuz berdi. Iltimos, keyinroq qayta urinib ko'ring.");
});

Xatolik Chegaralarining Ilg'or Texnikalari

Xatolik Chegarasini Qayta O'rnatish

Ba'zi hollarda, siz foydalanuvchilarga Xatolik Chegarasini qayta o'rnatish va xatolikka sabab bo'lgan operatsiyani qayta urinib ko'rish imkoniyatini berishni xohlashingiz mumkin. Bu, agar xatolik tarmoq muammosi kabi vaqtinchalik muammo tufayli yuzaga kelgan bo'lsa, foydali bo'lishi mumkin.

Xatolik Chegarasini qayta o'rnatish uchun, xatolik holatini boshqarish va qayta o'rnatish funksiyasini ta'minlash uchun Redux yoki Context kabi holatni boshqarish kutubxonasidan foydalanishingiz mumkin. Shu bilan bir qatorda, siz Xatolik Chegarasini qayta o'rnatishga (remount) majburlash orqali oddiyroq yondashuvdan foydalanishingiz mumkin.

Misol (Qayta o'rnatishga majburlash):


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorCount: 0, key: 0 };
  }

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

  componentDidCatch(error, info) {
    // Shuningdek, xatolikni xatoliklar haqida hisobot berish xizmatiga yuborishingiz mumkin
    console.error("Ushelgan xatolik: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return (
        

          
Voy! Nimadir noto'g'ri ketdi.

          
Kechirasiz, ushbu tarkibni ko'rsatishda xatolik yuz berdi.

          
        

      );
    }

    return 
{this.props.children}
;
  }
}

Ushbu misolda o'rovchi div ga 'key' qo'shilgan. Kalitni o'zgartirish komponentni qayta o'rnatishga majbur qiladi, bu esa xatolik holatini samarali tozalaydi. resetError metodi komponentning key holatini yangilaydi, bu esa komponentning qayta o'rnatilishiga va uning vorislarini qayta render qilishiga sabab bo'ladi.

Xatolik Chegaralarini Suspense bilan Birgalikda Ishlatish

React Suspense sizga biror shart bajarilguncha (masalan, ma'lumotlar yuklanguncha) komponentning render qilinishini "to'xtatib turish" imkonini beradi. Siz asinxron operatsiyalar uchun yanada mustahkamroq xatoliklarni boshqarish tajribasini taqdim etish uchun Xatolik Chegaralarini Suspense bilan birlashtirishingiz mumkin.


import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      Yuklanmoqda...
}> ); } function DataFetchingComponent() { const data = useData(); // Ma'lumotlarni asinxron ravishda yuklaydigan maxsus hook return
{data.value}
; }

Ushbu misolda, DataFetchingComponent maxsus hook yordamida ma'lumotlarni asinxron ravishda yuklaydi. Suspense komponenti ma'lumotlar yuklanayotganda yuklanish indikatorini ko'rsatadi. Agar ma'lumotlarni yuklash jarayonida xatolik yuz bersa, ErrorBoundary xatolikni ushlaydi va zaxira interfeysini ko'rsatadi.

React Xatolik Chegaralari Uchun Eng Yaxshi Amaliyotlar

Haqiqiy Hayotdan Misollar

Mana, Xatolik Chegaralaridan qanday foydalanish mumkinligiga oid bir nechta haqiqiy hayotdan misollar:

Xatolik Chegaralariga Muqobillar

Garchi Xatolik Chegaralari React-da xatoliklarni boshqarishning tavsiya etilgan usuli bo'lsa-da, siz ko'rib chiqishingiz mumkin bo'lgan ba'zi muqobil yondashuvlar mavjud. Biroq, shuni yodda tutingki, bu muqobillar ilova ishdan chiqishining oldini olish va uzluksiz foydalanuvchi tajribasini ta'minlashda Xatolik Chegaralari kabi samarali bo'lmasligi mumkin.

Natijada, Xatolik Chegaralari React-da xatoliklarni boshqarish uchun mustahkam va standartlashtirilgan yondashuvni taqdim etadi, bu esa ularni ko'pchilik holatlar uchun afzal ko'rilgan tanlovga aylantiradi.

Xulosa

React Xatolik Chegaralari mustahkam va foydalanuvchilar uchun qulay React ilovalarini yaratish uchun muhim vositadir. Xatoliklarni ushlash va zaxira interfeyslarini ko'rsatish orqali ular ilova ishdan chiqishining oldini oladi, foydalanuvchi tajribasini yaxshilaydi va xatoliklarni tuzatishni soddalashtiradi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz o'z ilovalaringizda Xatolik Chegaralarini samarali joriy qilishingiz va butun dunyo bo'ylab foydalanuvchilar uchun yanada mustahkam va ishonchli foydalanuvchi tajribasini yaratishingiz mumkin.

React Xatolik Chegaralari (Error Boundaries): Mustahkam Xatoliklarni Boshqarish Bo'yicha To'liq Qo'llanma | MLOG