import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

Ushbu misolda:

• MyComponent'ni sekin yuklash uchun React.lazy ishlatiladi.
• Suspense LazyComponent'ni o'rab oladi.
• fallback prop'i MyComponent yuklanayotganda ko'rsatiladigan zaxira UI'ni (yuklanish indikatori) taqdim etadi.

Error Boundaries'ni Amalga Oshirish

Suspense yuklanish holatlarini boshqarsa, Error Boundaries — bu o'zining quyi komponentlar daraxtining istalgan joyidagi JavaScript xatolarini ushlaydigan, ushbu xatolarni jurnalga yozadigan va butun komponentlar daraxtini ishdan chiqarish o'rniga zaxira UI'ni ko'rsatadigan React komponentlaridir.

Error Boundaries Qanday Ishlaydi

Error Boundaries — bu quyidagi hayotiy sikl metodlarini aniqlaydigan sinf komponentlaridir:

• static getDerivedStateFromError(error): Ushbu metod quyi komponent tomonidan xatolik yuzaga kelganidan keyin chaqiriladi. U yuzaga kelgan xatolikni argument sifatida qabul qiladi va holatni yangilash uchun qiymat qaytarishi kerak.
• componentDidCatch(error, info): Ushbu metod quyi komponent tomonidan xatolik yuzaga kelganidan keyin chaqiriladi. U xatolikni va qaysi komponent xatolikni keltirib chiqargani haqidagi ma'lumotni o'z ichiga olgan info obyektini qabul qiladi. Bu xatolikni Sentry yoki Bugsnag kabi xizmatlarga yozish uchun ideal joy.

Muhim: Error Boundaries faqat daraxtda o'zidan pastda joylashgan komponentlardagi xatoliklarni ushlaydi. Error Boundary o'zining ichidagi xatolikni ushlay olmaydi.

Misol: Asosiy Error Boundary'ni Amalga Oshirish

            
import React, { Component } from 'react';

class ErrorBoundary extends 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) {
 // Xatolikni xatoliklar haqida hisobot beruvchi xizmatga ham yozishingiz mumkin
 console.error('Caught error: ', error, info);
 }

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

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Error Boundary'dan foydalanish uchun xatolik keltirib chiqarishi mumkin bo'lgan har qanday komponentni o'rab oling:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Suspense va Error Boundaries'ni Integratsiya Qilish

Haqiqiy kuch Suspense va Error Boundaries'ni birlashtirishdan kelib chiqadi. Bu sizning ilovangizda ham yuklanish holatlarini, ham xatoliklarni muvaffaqiyatli boshqarishga imkon beradi. Tavsiya etilgan amaliyot — Suspense'ni Error Boundary bilan o'rash. Shunday qilib, agar sekin yuklanayotgan komponent yuklanmasa (masalan, tarmoq xatosi), Error Boundary xatoni ushlab, foydalanuvchiga foydali xabar ko'rsatishi mumkin.

Misol: Suspense va Error Boundaries'ni Birlashtirish

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...