React Xatolik Chegarasi Xatoliklarni Kategoriyalash: Toʻliq Qoʻllanma

Xatolarni hal qilish kuchli va oson saqlanadigan React ilovalarini yaratishning muhim jihati hisoblanadi. Reactning Xatolik Chegaralari renderlash vaqtida yuzaga keladigan xatolarni chiroyli tarzda hal qilish mexanizmini ta'minlasa-da, turli xil xato turlarini kategoriyalash va ularga javob berish qanday ekanligini tushunish haqiqatan ham bardoshli dasturni yaratish uchun juda muhimdir. Ushbu qo'llanma Xatolik Chegaralari ichida xatoliklarni kategoriyalashning turli xil usullarini o'rganadi, xatolarni boshqarish strategiyangizni yaxshilash uchun amaliy misollar va amaliy tushunchalarni taklif qiladi.

React Xatolik Chegaralari nima?

React 16 da taqdim etilgan Xatolik Chegaralari - bu o'zlarining farzand komponentlari daraxtidagi JavaScript xatolarini ushlaydigan, ushbu xatolarni qayd etadigan va butun komponent daraxtini buzish o'rniga zaxira UI-ni ko'rsatadigan React komponentlari. Ular try...catch blokiga o'xshash tarzda ishlaydi, lekin komponentlar uchun.

Xatolik Chegaralarining asosiy xususiyatlari:

• Komponent darajasidagi xatolarni hal qilish: Xatolarni ma'lum komponent ostki daraxtlari ichida ajratib oling.
• Chiroyli degradatsiya: Butun dasturning bitta komponent xatosi tufayli buzilishining oldini oling.
• Boshqariladigan zaxira UI: Xato yuz berganda foydalanuvchilarga qulay xabar yoki muqobil kontentni ko'rsating.
• Xatolarni qayd etish: Xato ma'lumotlarini qayd etish orqali xatolarni kuzatish va disk raskadrovka qilishni osonlashtiring.

Nima uchun Xatolarni Xatolik Chegaralarida Kategoriyalash kerak?

Shunchaki xatolarni ushlash kifoya emas. Xatolarni samarali hal qilish nima noto'g'ri ketganini tushunishni va shunga mos ravishda javob berishni talab qiladi. Xatolarni Xatolik Chegaralari ichida kategoriyalash bir nechta afzalliklarni taqdim etadi:

• Maqsadli xatolarni hal qilish: Turli xil xato turlari turli xil javoblarni talab qilishi mumkin. Misol uchun, tarmoq xatosi qayta urinish mexanizmini talab qilishi mumkin, ma'lumotlarni tekshirish xatosi esa foydalanuvchi tomonidan kiritilgan ma'lumotlarni tuzatishni talab qilishi mumkin.
• Yaxshilangan foydalanuvchi tajribasi: Xato turiga asoslangan holda ko'proq ma'lumotli xato xabarlarini ko'rsating. Umumiy "Nimadir noto'g'ri ketdi" xabari tarmoq muammosi yoki noto'g'ri kiritishni ko'rsatadigan aniq xabardan kamroq foydali.
• Kengaytirilgan disk raskadrovka: Xatolarni kategoriyalash disk raskadrovka qilish va muammolarning asosiy sababini aniqlash uchun qimmatli kontekstni ta'minlaydi.
• Faol monitoring: Takroriy muammolarni aniqlash va tuzatishlarni ustuvorlashtirish uchun turli xil xato turlarining chastotasini kuzatib boring.
• Strategik zaxira UI: Xatoga qarab turli xil zaxira UI-larni ko'rsating, foydalanuvchiga ko'proq tegishli ma'lumotlar yoki harakatlarni taqdim eting.

Xatolarni Kategoriyalash usullari

React Xatolik Chegaralari ichida xatolarni kategoriyalash uchun bir nechta usullardan foydalanish mumkin:

1. instanceof dan foydalanish

instanceof operatori ob'ektning ma'lum bir sinfning namunasi ekanligini tekshiradi. Bu xatolarni ularning o'rnatilgan yoki maxsus xato turlariga qarab kategoriyalash uchun foydalidir.

Misol:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary 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, errorInfo) {
    // Xatoni xato hisobot berish xizmatiga ham qayd qilishingiz mumkin
    console.error("Ushlangan xato:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Har qanday maxsus zaxira UI-ni ko'rsatishingiz mumkin
      let errorMessage = "Nimadir noto'g'ri ketdi.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "Tarmoq xatosi yuz berdi. Iltimos, ulanishingizni tekshiring va qayta urinib ko'ring.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "Validatsiya xatosi yuz berdi. Iltimos, kiritgan ma'lumotlaringizni tekshiring.";
      }

      return (
        <div>
          <h2>Xato!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Izoh:

• O'rnatilgan Error sinfini kengaytiruvchi maxsus NetworkError va ValidationError sinflari aniqlangan.
• MyErrorBoundary komponentining render usulida ushlangan xato turini tekshirish uchun instanceof operatori ishlatiladi.
• Xato turiga qarab, zaxira UI-da aniq xato xabari ko'rsatiladi.

2. Xato kodlari yoki xususiyatlaridan foydalanish

Yana bir yondashuv - xato ob'ektining o'zida xato kodlari yoki xususiyatlarini kiritish. Bu ma'lum xato stsenariylariga asoslangan holda yanada nozik kategoriyalash imkonini beradi.

Misol:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Tarmoq so'rovi muvaffaqiyatsiz tugadi");
          error.code = response.status; // Maxsus xato kodini qo'shing
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary 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, errorInfo) {
    // Xatoni xato hisobot berish xizmatiga ham qayd qilishingiz mumkin
    console.error("Ushlangan xato:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Nimadir noto'g'ri ketdi.";
      if (this.state.error.code === 404) {
        errorMessage = "Resurs topilmadi.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Server xatosi. Iltimos, keyinroq qayta urinib ko'ring.";
      }

      return (
        <div>
          <h2>Xato!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Izoh:

• fetchData funktsiyasi xato ob'ektiga code xususiyatini qo'shadi, bu HTTP holat kodini ifodalaydi.
• MyErrorBoundary komponenti aniq xato stsenariysini aniqlash uchun code xususiyatini tekshiradi.
• Turli xato xabarlari xato kodiga asoslangan holda ko'rsatiladi.

3. Markazlashtirilgan xato xaritasidan foydalanish

Murakkab ilovalar uchun markazlashtirilgan xato xaritasini saqlash kodni tashkil qilish va saqlashni yaxshilashi mumkin. Bu xato turlari yoki kodlarini aniq xato xabarlari va ishlov berish mantig'iga bog'laydigan lug'at yoki ob'ektni yaratishni o'z ichiga oladi.

Misol:

const errorMap = {
  "NETWORK_ERROR": {
    message: "Tarmoq xatosi yuz berdi. Iltimos, ulanishingizni tekshiring.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Noto'g'ri kiritish. Iltimos, ma'lumotlaringizni tekshiring.",
    retry: false,
  },
  404: {
    message: "Resurs topilmadi.",
    retry: false,
  },
  500: {
    message: "Server xatosi. Iltimos, keyinroq qayta urinib ko'ring.",
    retry: true,
  },
  "DEFAULT": {
    message: "Nimadir noto'g'ri ketdi.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

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

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

  componentDidCatch(error, errorInfo) {
    // Xatoni xato hisobot berish xizmatiga ham qayd qilishingiz mumkin
    console.error("Ushlangan xato:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Xato!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Izoh:

• errorMap ob'ekti xato turlari yoki kodlariga asoslangan xabarlar va qayta urinish bayroqlari kabi xato ma'lumotlarini saqlaydi.
• handleCustomError funktsiyasi xato xabariga asoslangan holda errorMap dan xato tafsilotlarini oladi va hech qanday aniq kod topilmasa, standartlarni qaytaradi.
• MyErrorBoundary komponenti errorMap dan tegishli xato xabarini olish uchun handleCustomError dan foydalanadi.

Xatolarni Kategoriyalash uchun eng yaxshi amaliyotlar

• Aniq xato turlarini belgilang: Ilovangiz uchun xato turlari yoki kodlarining izchil to'plamini yarating.
• Kontekstli ma'lumotlarni taqdim eting: Disk raskadrovka qilishni osonlashtirish uchun xato ob'ektlariga tegishli tafsilotlarni kiriting.
• Xatolarni hal qilish mantig'ini markazlashtiring: Xatolarni hal qilishni izchil boshqarish uchun markazlashtirilgan xato xaritasidan yoki yordamchi funktsiyalardan foydalaning.
• Xatolarni samarali qayd eting: Ishlab chiqarishda xatolarni kuzatish va tahlil qilish uchun xatolarni hisobot berish xizmatlari bilan integratsiyalashing. Ommabop xizmatlarga Sentry, Rollbar va Bugsnag kiradi.
• Xatolarni hal qilishni sinovdan o'tkazing: Xatolik Chegaralaringiz turli xil xato turlarini to'g'ri hal qilishini tekshirish uchun birlik testlarini yozing.
• Foydalanuvchi tajribasini hisobga oling: Foydalanuvchilarni hal qilishga yo'naltiruvchi ma'lumotli va foydalanuvchilarga qulay xato xabarlarini ko'rsating. Texnik jargonlardan saqlaning.
• Xato darajalarini kuzatib boring: Takroriy muammolarni aniqlash va tuzatishlarni ustuvorlashtirish uchun turli xil xato turlarining chastotasini kuzatib boring.
• Internatsionalizatsiya (i18n): Foydalanuvchiga xato xabarlarini taqdim etayotganda, xabarlaringiz turli tillar va madaniyatlarni qo'llab-quvvatlash uchun to'g'ri internatsionalizatsiya qilinganligiga ishonch hosil qiling. Tarjimalarni boshqarish uchun i18next yoki Reactning Context API kabi kutubxonalardan foydalaning.
• Kirish imkoniyati (a11y): Xato xabarlaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lishiga ishonch hosil qiling. Ekran o'qiydiganlarga qo'shimcha kontekstni taqdim etish uchun ARIA atributlaridan foydalaning.
• Xavfsizlik: Xato xabarlarida, ayniqsa ishlab chiqarish muhitida qanday ma'lumotlarni ko'rsatayotganingizga ehtiyot bo'ling. Hujumchilar tomonidan ekspluatatsiya qilinishi mumkin bo'lgan sezgir ma'lumotlarni oshkor qilishdan saqlaning. Misol uchun, oxirgi foydalanuvchilarga xom stack izlarini ko'rsatmang.

Misol stsenariy: E-tijorat ilovasida API xatolarini hal qilish

API dan mahsulot ma'lumotlarini oladigan elektron tijorat ilovasini ko'rib chiqing. Potensial xato stsenariylariga quyidagilar kiradi:

• Tarmoq xatolari: API serveri mavjud emas yoki foydalanuvchining internet aloqasi uzilgan.
• Autentifikatsiya xatolari: Foydalanuvchining autentifikatsiya belgisi yaroqsiz yoki muddati tugagan.
• Resurs topilmadi xatolari: So'ralgan mahsulot mavjud emas.
• Server xatolari: API serveri ichki xatoga duch keladi.

Xatolik Chegaralari va xatolarni kategoriyalashdan foydalanib, ilova ushbu stsenariylarni chiroyli tarzda hal qilishi mumkin:

// Misol (soddalashtirilgan)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

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

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Oldingi ko'rsatilganidek errorMap dan foydalaning
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Ushlangan xato:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Xato!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Qayta urinib ko'ring</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Izoh:

• fetchProduct funktsiyasi API javob holat kodini tekshiradi va holatga asoslangan holda aniq xato turlarini chiqaradi.
• ProductErrorBoundary komponenti ushbu xatolarni ushlaydi va tegishli xato xabarlarini ko'rsatadi.
• Tarmoq xatolari va server xatolari uchun "Qayta urinib ko'ring" tugmasi ko'rsatiladi, bu foydalanuvchiga so'rovni qayta urinish imkoniyatini beradi.
• Autentifikatsiya xatolari uchun foydalanuvchi kirish sahifasiga yo'naltirilishi mumkin.
• Resurs topilmadi xatolari uchun mahsulot mavjud emasligini ko'rsatadigan xabar ko'rsatiladi.

Xulosa

React Xatolik Chegaralari ichida xatolarni kategoriyalash bardoshli, foydalanuvchilarga qulay ilovalarni yaratish uchun zarurdir. instanceof tekshiruvlari, xato kodlari va markazlashtirilgan xato xaritalari kabi usullardan foydalanib, siz turli xil xato stsenariylarini samarali hal qilishingiz va yaxshiroq foydalanuvchi tajribasini taqdim etishingiz mumkin. Ilovangiz kutilmagan vaziyatlarni chiroyli tarzda hal qilishini ta'minlash uchun xatolarni hal qilish, qayd etish va sinovdan o'tkazish bo'yicha eng yaxshi amaliyotlarga rioya qilishni unutmang.

Ushbu strategiyalarni amalga oshirish orqali siz React ilovalaringizning barqarorligi va oson saqlanishini sezilarli darajada yaxshilashingiz, foydalanuvchilaringiz uchun joylashuvi yoki kelib chiqishidan qat'i nazar, silliq va ishonchli tajribani taqdim etishingiz mumkin.

Qo'shimcha manbalar:

• React Xatolik Chegaralari Hujjatlari
• Sentryning React 16 Xatolik Chegaralari bo'yicha qo'llanmasi
• Robin Wieruchning React Xatolik Chegarasi O'quv qo'llanmasi