Barqaror React Ilovalarini Yaratish: Komponentni Avtomatik Qayta Ishga Tushirish Strategiyasi

Barchamiz bu holatga tushganmiz. Siz veb-ilovadan foydalanayapsiz, hamma narsa silliq ketmoqda va keyin bu sodir bo'ladi. Bir bosish, aylantirish, fonda ma'lumotlarning yuklanishi—va to'satdan sahifaning butun bir qismi yo'qoladi. Yoki undan ham yomoni, butun ekran oqarib qoladi. Bu go'yo raqamli g'isht devorga urilishdek, foydalanuvchini sahifani yangilashga yoki ilovani butunlay tark etishga majbur qiladigan keskin va asabiy tajriba.

React dasturlash olamida bu 'oq ekran o'limi' ko'pincha renderlash jarayonida ishlov berilmagan JavaScript xatosi natijasidir. Standart holatda, React'ning bunday xatoga javobi butun komponentlar daraxtini o'chirish bo'lib, ilovani potensial buzilgan holatdan himoya qiladi. Bu xavfsiz bo'lsa-da, foydalanuvchi uchun dahshatli tajribani taqdim etadi. Ammo agar komponentlarimiz yanada barqaror bo'lsa-chi? Agar buzilgan komponent ishdan chiqish o'rniga, o'z xatosini chiroyli tarzda boshqarib, hatto o'zini tuzatishga harakat qilsa-chi?

Bu o'z-o'zini tiklaydigan UI'ning va'dasidir. Ushbu keng qamrovli qo'llanmada biz React'da xatolarni tiklashning kuchli va nafis strategiyasini o'rganamiz: komponentni avtomatik qayta ishga tushirish. Biz React'ning o'rnatilgan xatolarni boshqarish mexanizmlarini chuqur o'rganamiz, `key` prop'idan aqlli foydalanish usulini ochib beramiz va ilova ishdan chiqishlarini uzluksiz tiklanish oqimlariga aylantiradigan mustahkam, ishlab chiqarishga tayyor yechim yaratamiz. Xatolarning oldini olishdan ularni muqarrar ravishda yuzaga kelganda oqilona boshqarishga o'tishga tayyorlaning.

Zamonaviy UI'larning Mo'rtligi: Nima Uchun React Komponentlari Buziladi

Yechim yaratishdan oldin, avvalo muammoni tushunishimiz kerak. React ilovasidagi xatolar son-sanoqsiz manbalardan kelib chiqishi mumkin: tarmoq so'rovlarining muvaffaqiyatsizligi, API'larning kutilmagan ma'lumot formatlarini qaytarishi, uchinchi tomon kutubxonalarining istisno (exception) chiqarishi yoki oddiy dasturlash xatolari. Umuman olganda, ularni qachon sodir bo'lishiga qarab tasniflash mumkin:

• Renderlashdagi xatolar: Bular eng vayronkoridir. Ular komponentning render metodi yoki renderlash bosqichida chaqiriladigan har qanday funksiya ichida (shu jumladan hayotiy sikl metodlari va funksional komponentlar tanasi) sodir bo'ladi. Bu yerdagi xato, masalan `null` dagi xususiyatga kirishga urinish (`cannot read property 'name' of null`), komponentlar daraxti bo'ylab yuqoriga tarqaladi.
• Voqea ishlovchilaridagi xatolar: Bu xatolar foydalanuvchi harakatiga javoban, masalan `onClick` yoki `onChange` ishlovchisi ichida sodir bo'ladi. Ular renderlash siklidan tashqarida sodir bo'ladi va o'z-o'zidan React UI'sini buzmaydi. Biroq, ular ilova holatining nomuvofiqligiga olib kelishi mumkin, bu esa keyingi yangilanishda renderlash xatosiga sabab bo'lishi mumkin.
• Asinxron xatolar: Bular renderlash siklidan keyin ishlaydigan kodda, masalan `setTimeout`, `Promise.catch()` bloki yoki obuna qayta chaqiruvida (subscription callback) sodir bo'ladi. Voqea ishlovchilaridagi xatolar singari, ular darhol renderlash daraxtini buzmaydi, lekin holatni buzishi mumkin.

React'ning asosiy vazifasi UI yaxlitligini saqlashdir. Renderlash xatosi yuzaga kelganda, React ilova holati xavfsizmi yoki UI qanday ko'rinishda bo'lishi kerakligini bilmaydi. Uning standart, himoyaviy harakati renderlashni to'xtatish va hamma narsani o'chirishdir. Bu keyingi muammolarning oldini oladi, lekin foydalanuvchini bo'sh sahifaga tikilib qoldiradi. Bizning maqsadimiz bu jarayonni to'xtatish, zararni cheklash va tiklanish yo'lini taqdim etishdir.

Birinchi Himoya Chizig'i: React Error Boundaries'ni O'zlashtirish

React renderlashdagi xatolarni ushlash uchun mahalliy yechimni taqdim etadi: Error Boundaries (Xatolik Chegaralari). Error Boundary — bu o'zining ichidagi komponentlar daraxtining istalgan joyida JavaScript xatolarini ushlay oladigan, ushbu xatolarni qayd eta oladigan va ishdan chiqqan komponentlar daraxti o'rniga zaxira UI'ni ko'rsata oladigan maxsus turdagi React komponentidir.

Qizig'i shundaki, Error Boundaries uchun hali hook ekvivalenti mavjud emas. Shuning uchun ular klass komponentlari bo'lishi shart. Klass komponenti ushbu hayotiy sikl metodlaridan birini yoki ikkalasini aniqlasa, Error Boundary'ga aylanadi:

• static getDerivedStateFromError(error): Ushbu metod quyi komponent xato chiqargandan so'ng 'render' bosqichida chaqiriladi. U komponent holatini yangilash uchun holat obyektini qaytarishi kerak, bu sizga keyingi renderda zaxira UI'ni ko'rsatish imkonini beradi.
• componentDidCatch(error, errorInfo): Ushbu metod 'commit' bosqichida, xato yuz berganidan va zaxira UI render qilinayotganidan keyin chaqiriladi. Bu xatoni tashqi xizmatga yozish kabi yon ta'sirlar uchun ideal joy.

Oddiy Error Boundary Misoli

Oddiy, qayta ishlatiladigan Error Boundary quyidagicha ko'rinadi:

            import React from 'react';

class SimpleErrorBoundary 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, errorInfo) {
    // Shuningdek, xatoni xatolarni qayd etish xizmatiga yozishingiz mumkin
    console.error("Uncaught error:", error, errorInfo);
    // Misol: logErrorToMyService(error, errorInfo);
  }

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

    return this.props.children;
  }
}

// Qanday foydalanish kerak:
<SimpleErrorBoundary>
  <MyPotentiallyBuggyComponent />
</SimpleErrorBoundary>
            

              
                Copy
              
            
          

Error Boundaries'ning Cheklovlari

Kuchli bo'lishiga qaramay, Error Boundaries har qanday muammoning yechimi emas. Ular nimalarni ushlay olmasligini tushunish muhim:

• Voqea ishlovchilari ichidagi xatolar.
• Asinxron kod (masalan, `setTimeout` yoki `requestAnimationFrame` qayta chaqiruvlari).
• Server tomonida renderlashda yuzaga keladigan xatolar.
• Error Boundary komponentining o'zida yuzaga kelgan xatolar.

Bizning strategiyamiz uchun eng muhimi, oddiy Error Boundary faqat statik zaxirani taqdim etadi. U foydalanuvchiga nimanidir buzilganligini ko'rsatadi, lekin sahifani to'liq qayta yuklamasdan tiklanish yo'lini bermaydi. Mana shu yerda bizning qayta ishga tushirish strategiyamiz ishga tushadi.

Asosiy Strategiya: `key` Prop Yordamida Komponentni Qayta Ishga Tushirish Imkoniyatini Ochish

Ko'pgina React dasturchilari `key` prop'iga birinchi marta elementlar ro'yxatini renderlashda duch kelishadi. Bizga React'ga qaysi elementlar o'zgargan, qo'shilgan yoki olib tashlanganligini aniqlashga yordam berish uchun ro'yxatdagi har bir elementga noyob `key` qo'shishni o'rgatishgan, bu esa samarali yangilanishlarga imkon beradi.

Biroq, `key` prop'ining kuchi ro'yxatlardan ancha uzoqqa boradi. Bu React'ning solishtirish algoritmi uchun asosiy ishoradir. Mana muhim tushuncha: Komponentning `key`i o'zgarganda, React eski komponent nusxasini va uning butun DOM daraxtini tashlab yuboradi va noldan yangisini yaratadi. Bu uning holati to'liq tiklanishini va uning hayotiy sikl metodlari (yoki `useEffect` hooklari) go'yo birinchi marta o'rnatilayotgandek qayta ishlashini anglatadi.

Bu xatti-harakat bizning tiklanish strategiyamiz uchun sehrli tarkibiy qismdir. Agar biz ishdan chiqqan komponentimizning (yoki uning atrofidagi o'ramning) `key`ini o'zgartirishga majbur qila olsak, biz uni samarali ravishda 'qayta ishga tushirishimiz' mumkin. Jarayon quyidagicha ko'rinadi:

1. Bizning Error Boundary ichidagi komponent renderlash xatosini chiqaradi.
2. Error Boundary xatoni ushlaydi va zaxira UI'ni ko'rsatish uchun o'z holatini yangilaydi.
3. Ushbu zaxira UI'da "Qayta urinish" tugmasi mavjud.
4. Foydalanuvchi tugmani bosganda, biz Error Boundary ichida holat o'zgarishini ishga tushiramiz.
5. Ushbu holat o'zgarishi bola komponent uchun `key` sifatida ishlatadigan qiymatni yangilashni o'z ichiga oladi.
6. React yangi `key`ni aniqlaydi, eski buzilgan komponent nusxasini o'chiradi va yangi, toza nusxasini o'rnatadi.

Komponent to'g'ri renderlash uchun ikkinchi imkoniyatga ega bo'ladi, ehtimol vaqtinchalik muammo (masalan, vaqtinchalik tarmoq uzilishi) hal qilinganidan keyin. Foydalanuvchi ilovadagi o'z o'rnini to'liq sahifani yangilash orqali yo'qotmasdan ishga qaytadi.

Qadamma-qadam Amalga Oshirish: Qayta O'rnatiladigan Error Boundary Yaratish

Keling, `SimpleErrorBoundary`imizni kalitga asoslangan qayta ishga tushirish strategiyasini amalga oshiradigan `ResettableErrorBoundary`ga yangilaymiz.

            import React from 'react';

class ResettableErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    // 'key' holati - bu qayta renderlashni ishga tushirish uchun biz oshiradigan qiymat.
    this.state = { hasError: false, errorKey: 0 };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Haqiqiy ilovada buni Sentry yoki LogRocket kabi xizmatga yozasiz
    console.error("Error caught by boundary:", error, errorInfo);
  }

  // Bu metod bizning 'Qayta urinish' tugmamiz tomonidan chaqiriladi
  handleReset = () => {
    this.setState(prevState => ({
      hasError: false,
      errorKey: prevState.errorKey + 1
    }));
  };

  render() {
    if (this.state.hasError) {
      // Qayta o'rnatish tugmasi bilan zaxira UI'ni render qiling
      return (
        <div role="alert">
          <h2>Uzur, nimadir noto'g'ri ketdi.</h2>
          <p>Ushbu sahifadagi komponent yuklanmadi. Uni qayta yuklashga harakat qilishingiz mumkin.</p>
          <button onClick={this.handleReset}>Qayta urinish</button>
        </div>
      );
    }

    // Xato bo'lmaganda, biz children'larni render qilamiz.
    // Biz ularni dinamik kalit bilan React.Fragment (yoki div) ichiga o'raymiz.
    // handleReset chaqirilganda, bu kalit o'zgaradi va React'ni children'larni qayta mount qilishga majbur qiladi.
    return (
      <React.Fragment key={this.state.errorKey}>
        {this.props.children}
      </React.Fragment>
    );
  }
}

export default ResettableErrorBoundary;
            

              
                Copy
              
            
          

Ushbu komponentdan foydalanish uchun siz shunchaki ilovangizning ishdan chiqishga moyil bo'lishi mumkin bo'lgan har qanday qismini o'raysiz. Masalan, murakkab ma'lumotlarni olish va qayta ishlashga tayanadigan komponent:

            import DataHeavyWidget from './DataHeavyWidget';
import ResettableErrorBoundary from './ResettableErrorBoundary';

function Dashboard() {
  return (
    <div>
      <h1>Mening Boshqaruv Panelim</h1>
      <ResettableErrorBoundary>
        <DataHeavyWidget userId="123" />
      </ResettableErrorBoundary>
      {/* Dashboarddagi boshqa komponentlarga ta'sir qilmaydi */}
      <AnotherWidget />
    </div>
  );
}
            

              
                Copy
              
            
          

Ushbu sozlama bilan, agar `DataHeavyWidget` ishdan chiqsa, `Dashboard`ning qolgan qismi interaktiv bo'lib qoladi. Foydalanuvchi zaxira xabarni ko'radi va `DataHeavyWidget`ga yangi boshlash imkoniyatini berish uchun "Qayta urinish"ni bosishi mumkin.

Ishlab chiqarish darajasidagi barqarorlik uchun ilg'or usullar

Bizning `ResettableErrorBoundary`imiz ajoyib boshlanishdir, ammo keng ko'lamli, global ilovada biz murakkabroq stsenariylarni ko'rib chiqishimiz kerak.

Cheksiz Xatolik Sikllarini Oldini Olish

Agar komponent har safar o'rnatilishi bilanoq darhol ishdan chiqsa-chi? Agar biz qo'lda emas, balki *avtomatik* qayta urinishni amalga oshirsak yoki foydalanuvchi qayta-qayta "Qayta urinish"ni bossa, ular cheksiz xatolik sikliga tushib qolishlari mumkin. Bu foydalanuvchi uchun asabiylashtiruvchi va sizning xatolarni qayd etish xizmatingizni spam qilishi mumkin.

Buning oldini olish uchun biz qayta urinish hisoblagichini joriy etishimiz mumkin. Agar komponent qisqa vaqt ichida ma'lum bir sondan ko'p marta ishdan chiqsa, biz qayta urinish imkoniyatini taklif qilishni to'xtatamiz va doimiyroq xato xabarini ko'rsatamiz.

            // ResettableErrorBoundary ichida...

constructor(props) {
  super(props);
  this.state = {
    hasError: false,
    errorKey: 0,
    retryCount: 0
  };
  this.MAX_RETRIES = 3;
}

// ... (getDerivedStateFromError va componentDidCatch o'zgarmagan)

handleReset = () => {
  if (this.state.retryCount < this.MAX_RETRIES) {
    this.setState(prevState => ({
      hasError: false,
      errorKey: prevState.errorKey + 1,
      retryCount: prevState.retryCount + 1
    }));
  } else {
    // Maksimal urinishlardan so'ng, xatolik holatini o'zgarishsiz qoldirishimiz mumkin
    // Zaxira UI bu holatni boshqarishi kerak bo'ladi
    console.warn("Maksimal urinishlarga erishildi. Komponent qayta o'rnatilmayapti.");
  }
};

render() {
  if (this.state.hasError) {
    if (this.state.retryCount >= this.MAX_RETRIES) {
      return (
        <div role="alert">
          <h2>Ushbu komponentni yuklab bo'lmadi.</h2>
          <p>Biz uni bir necha marta muvaffaqiyatsiz qayta yuklashga harakat qildik. Iltimos, sahifani yangilang yoki qo'llab-quvvatlash xizmatiga murojaat qiling.</p>
        </div>
      );
    }
    // Qayta urinish tugmasi bilan standart zaxira UI'ni render qiling
    // ...
  }
  // ...
}

// Muhim: Agar komponent bir muncha vaqt ishlasa, retryCount'ni qayta o'rnating
// Bu murakkabroq va ko'pincha kutubxona tomonidan yaxshiroq boshqariladi. Biz qo'shishimiz mumkin
// agar hasError false bo'lsa, hisoblagichni qayta o'rnatish uchun componentDidUpdate tekshiruvini
// true bo'lgandan keyin, lekin mantiq murakkablashishi mumkin.

            

              
                Copy
              
            
          

Hooklarni Qabul Qilish: `react-error-boundary` dan Foydalanish

Error Boundaries klass komponentlari bo'lishi kerak bo'lsa-da, React ekotizimining qolgan qismi asosan funksional komponentlar va Hooklarga o'tdi. Bu yanada zamonaviy va moslashuvchan API taqdim etadigan ajoyib jamoatchilik kutubxonalarining yaratilishiga olib keldi. Eng mashhuri `react-error-boundary`.

Ushbu kutubxona biz hozirgina qurgan barcha mantiqni (va undan ham ko'prog'ini) tayyor holda taqdim etadigan `` komponentini beradi. Uning haqiqiy kuchi kompozitsionligi va hooklar bilan integratsiyasida yotadi.

            import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Nimadir noto'g'ri ketdi:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Qayta urinish</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // ilovangiz holatini qayta o'rnating, shunda xato qayta sodir bo'lmaydi
      }}
      // avtomatik qayta o'rnatish uchun resetKeys prop'ini ham o'tkazishingiz mumkin
      // resetKeys={[birorOzgaruvchanKalit]}
    >
      <MyComponent />
    </ErrorBoundary>
  );
}
            

              
                Copy
              
            
          

`react-error-boundary` kutubxonasi vazifalarni oqlangan tarzda ajratadi. `ErrorBoundary` komponenti holatni boshqaradi va siz UI'ni render qilish uchun `FallbackComponent` taqdim etasiz. Zaxira komponentingizga uzatilgan `resetErrorBoundary` funksiyasi qayta ishga tushirishni amalga oshiradi va siz uchun `key` manipulyatsiyasini abstraktlashtiradi.

Bundan tashqari, u `useErrorHandler` hooki yordamida asinxron xatolarni boshqarish muammosini hal qilishga yordam beradi. Siz ushbu hookni `.catch()` bloki yoki `try/catch` ichida xato obyekti bilan chaqirishingiz mumkin va u xatoni eng yaqin Error Boundary'ga tarqatadi, bu esa renderlash bilan bog'liq bo'lmagan xatoni chegarangiz boshqara oladigan xatoga aylantiradi.

Strategik Joylashuv: Chegaralaringizni Qaerga Qo'yish Kerak

Ko'p beriladigan savol: "Men Error Boundaries'ni qaerga joylashtirishim kerak?" Javob ilovangizning arxitekturasi va foydalanuvchi tajribasi maqsadlariga bog'liq. Buni kemadagi germetik to'siqlar kabi tasavvur qiling: ular bir bo'limdagi teshikni ushlab turadi va butun kemaning cho'kishini oldini oladi.

• Global Chegara: Kamida bitta yuqori darajadagi Error Boundary bilan butun ilovangizni o'rash yaxshi amaliyotdir. Bu sizning oxirgi chorangiz, dahshatli oq ekranning oldini olish uchun umumiy ushlagich. U "Kutilmagan xato yuz berdi. Iltimos, sahifani yangilang." kabi umumiy xabarni ko'rsatishi mumkin.
• Layout Chegaralari: Siz yon panellar, sarlavhalar yoki asosiy kontent maydonlari kabi asosiy layout komponentlarini o'rashingiz mumkin. Agar yon panel navigatsiyasi ishdan chiqsa, foydalanuvchi hali ham asosiy kontent bilan ishlashi mumkin.
• Vidjet Darajasidagi Chegaralar: Bu eng mayda va ko'pincha eng samarali yondashuv. Mustaqil, o'z-o'zini ta'minlaydigan vidjetlarni (chat oynasi, ob-havo vidjeti, aksiya kursi kabi) o'z Error Boundaries bilan o'rang. Bir vidjetdagi nosozlik boshqalarga ta'sir qilmaydi, bu esa yuqori darajada barqaror va xatolarga chidamli UI'ga olib keladi.

Global auditoriya uchun bu ayniqsa muhim. Ma'lumotlarni vizualizatsiya qilish vidjeti mahalliy tilga xos raqam formatlash muammosi tufayli ishdan chiqishi mumkin. Uni Error Boundary bilan izolyatsiya qilish o'sha mintaqadagi foydalanuvchilar to'liq bloklanish o'rniga ilovangizning qolgan qismidan foydalanishda davom etishlarini ta'minlaydi.

Faqat Tiklanmang, Hisobot Bering: Xatolarni Loglashni Integratsiya Qilish

Komponentni qayta ishga tushirish foydalanuvchi uchun ajoyib, ammo agar siz xato sodir bo'lganligini bilmasangiz, dasturchi uchun bu foydasizdir. `componentDidCatch` metodi (yoki `react-error-boundary` dagi `onError` prop'i) xatoliklarni tushunish va tuzatish uchun sizning darvozangizdir.

Ushbu qadam ishlab chiqarishdagi ilova uchun ixtiyoriy emas.

Sentry, Datadog, LogRocket yoki Bugsnag kabi professional xatolarni kuzatish xizmatini integratsiya qiling. Ushbu platformalar har bir xato uchun bebaho kontekstni taqdim etadi:

• Stek Izi: Xatoni chiqargan aniq kod qatori.
• Komponent Steki: Xatoga olib kelgan React komponentlar daraxti, bu sizga mas'ul komponentni aniqlashga yordam beradi.
• Brauzer/Qurilma Ma'lumoti: Operatsion tizim, brauzer versiyasi, ekran o'lchami.
• Foydalanuvchi Konteksti: Anonimlashtirilgan foydalanuvchi ID, bu sizga xato bitta foydalanuvchiga yoki ko'pchilikka ta'sir qilayotganini ko'rishga yordam beradi.
• Harakatlar Izi: Xatogacha olib borgan foydalanuvchi harakatlari izi.

            // componentDidCatch'da Sentry'ni misol sifatida ishlatish
import * as Sentry from "@sentry/react";

class ReportingErrorBoundary extends React.Component {
  // ... state va getDerivedStateFromError ...

  componentDidCatch(error, errorInfo) {
    Sentry.withScope((scope) => {
      scope.setExtras(errorInfo);
      Sentry.captureException(error);
    });
  }

  // ... render mantig'i ...
}
            

              
                Copy
              
            
          

Avtomatik tiklanishni mustahkam hisobot berish bilan birlashtirib, siz kuchli qayta aloqa zanjirini yaratasiz: foydalanuvchi tajribasi himoyalangan va siz ilovani vaqt o'tishi bilan yanada barqaror qilish uchun kerakli ma'lumotlarni olasiz.

Haqiqiy Hayotiy Misol: O'z-o'zini Tiklaydigan Ma'lumot Vidjeti

Keling, hamma narsani amaliy misol bilan bog'laymiz. Tasavvur qiling, bizda API'dan foydalanuvchi ma'lumotlarini oladigan `UserProfileCard` bor. Bu karta ikki yo'l bilan ishdan chiqishi mumkin: ma'lumotlarni olish paytida tarmoq xatosi yoki API kutilmagan ma'lumot shaklini qaytarganda (masalan, `user.profile` yo'q bo'lsa) renderlash xatosi.

Potensial Xatoga Uchraydigan Komponent

            import React, { useState, useEffect } from 'react';

// Xatoga uchrashi mumkin bo'lgan soxta fetch funksiyasi
const fetchUser = async (userId) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error('Tarmoq javobi yaxshi emas edi');
  }
  const data = await response.json();
  // Potensial API shartnomasi muammosini simulyatsiya qilish
  if (Math.random() > 0.5) {
    delete data.profile;
  }
  return data;
};

const UserProfileCard = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    const loadUser = async () => {
      try {
        const userData = await fetchUser(userId);
        if (isMounted) setUser(userData);
      } catch (err) {
        if (isMounted) setError(err);
      }
    };
    loadUser();
    return () => { isMounted = false; };
  }, [userId]);

  // Bu yerda react-error-boundary'dan useErrorHandler hookidan foydalanishimiz mumkin
  // Oddiylik uchun render qismini xatoga uchrashiga yo'l qo'yamiz.
  // if (error) { throw error; } // Bu hook yondashuvi bo'lar edi

  if (!user) {
    return <div>Profil yuklanmoqda...</div>;
  }

  // Agar user.profile mavjud bo'lmasa, bu qator renderlash xatosini chiqaradi
  return (
    <div className="card">
      <img src={user.profile.avatarUrl} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.profile.bio}</p>
    </div>
  );
};

export default UserProfileCard;
            

              
                Copy
              
            
          

Chegara bilan O'rash

Endi, biz UI'mizni himoya qilish uchun `react-error-boundary` kutubxonasidan foydalanamiz.

            import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import UserProfileCard from './UserProfileCard';

function ErrorFallbackUI({ error, resetErrorBoundary }) {
  return (
    <div role="alert" className="card-error">
      <p>Foydalanuvchi profilini yuklab bo'lmadi.</p>
      <button onClick={resetErrorBoundary}>Qayta urinish</button>
    </div>
  );
}

function App() {
  // Bu o'zgaradigan holat bo'lishi mumkin, masalan, turli profillarni ko'rish
  const [currentUserId, setCurrentUserId] = React.useState('user-1');

  return (
    <div>
      <h1>Foydalanuvchi Profillari</h1>
      <ErrorBoundary
        FallbackComponent={ErrorFallbackUI}
        // Biz currentUserId'ni resetKeys'ga o'tkazamiz.
        // Agar foydalanuvchi BOSHQA profilni ko'rishga harakat qilsa, chegara ham qayta o'rnatiladi.
        resetKeys={[currentUserId]}
      >
        <UserProfileCard userId={currentUserId} />
      </ErrorBoundary>
      <button onClick={() => setCurrentUserId('user-2')}>Keyingi foydalanuvchini ko'rish</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Foydalanuvchi Oqimi

1. `UserProfileCard` o'rnatiladi va `user-1` uchun ma'lumotlarni oladi.
2. Bizning simulyatsiya qilingan API tasodifiy ravishda `profile` obyekti bo'lmagan ma'lumotlarni qaytaradi.
3. Renderlash paytida `user.profile.avatarUrl` `TypeError` xatosini chiqaradi.
4. `ErrorBoundary` bu xatoni ushlaydi. Oq ekran o'rniga `ErrorFallbackUI` render qilinadi.
5. Foydalanuvchi "Foydalanuvchi profilini yuklab bo'lmadi." xabarini va "Qayta urinish" tugmasini ko'radi.
6. Foydalanuvchi "Qayta urinish"ni bosadi.
7. `resetErrorBoundary` chaqiriladi. Kutubxona ichkaridan o'z holatini qayta o'rnatadi. Kalit yashirin tarzda boshqarilgani uchun, `UserProfileCard` o'chiriladi va qayta o'rnatiladi.
8. Yangi `UserProfileCard` nusxasidagi `useEffect` yana ishga tushadi va ma'lumotlarni qayta oladi.
9. Bu safar API to'g'ri ma'lumot shaklini qaytaradi.
10. Komponent muvaffaqiyatli render qilinadi va foydalanuvchi profil kartasini ko'radi. UI bir bosish bilan o'zini o'zi tikladi.

Xulosa: Ishdan Chiqishdan Tashqari - UI Rivojlantirish uchun Yangi Tafakkur

Error Boundaries va `key` prop'i bilan quvvatlangan komponentni avtomatik qayta ishga tushirish strategiyasi bizning frontend dasturlashga yondashuvimizni tubdan o'zgartiradi. U bizni har bir mumkin bo'lgan xatoning oldini olishga urinadigan himoyaviy pozitsiyadan, muvaffaqiyatsizlikni kutadigan va undan oqilona tiklanadigan tizimlarni quradigan hujumkor pozitsiyaga o'tkazadi.

Ushbu namunani amalga oshirib, siz sezilarli darajada yaxshiroq foydalanuvchi tajribasini taqdim etasiz. Siz nosozliklarni cheklaysiz, umidsizlikning oldini olasiz va foydalanuvchilarga to'liq sahifani qayta yuklash kabi qo'pol vositaga murojaat qilmasdan oldinga siljish yo'lini berasiz. Global ilova uchun bu barqarorlik hashamat emas; bu dasturiy ta'minotingiz duch keladigan turli xil muhitlar, tarmoq sharoitlari va ma'lumotlar o'zgarishlarini boshqarish uchun zaruratdir.

Asosiy xulosalar oddiy:

• O'rang: Xatolarni cheklash va butun ilovangizning ishdan chiqishini oldini olish uchun Error Boundaries'dan foydalaning.
• Kalitlang: Muvaffaqiyatsizlikdan so'ng komponent holatini to'liq qayta o'rnatish va qayta ishga tushirish uchun `key` prop'idan foydalaning.
• Kuzating: Asosiy sababni tashxislash va tuzatish uchun ushlangan xatolarni har doim kuzatuv xizmatiga yozing.

Barqaror ilovalarni yaratish yetuk muhandislik belgisidir. Bu foydalanuvchiga chuqur hamdardlikni va veb-dasturlashning murakkab dunyosida muvaffaqiyatsizlik shunchaki imkoniyat emas, balki muqarrarlik ekanligini tushunishni ko'rsatadi. Uni rejalashtirish orqali siz nafaqat funksional, balki haqiqatan ham mustahkam va ishonchli ilovalarni yaratishingiz mumkin.