TypeScript Xatolik Chegaralari: Mustahkam Ilovalar Uchun Xatoliklarni Qayta Ishlash Turi Andozalari

Dasturiy ta'minotni ishlab chiqish olamida kutilmagan xatolar muqarrar. Tarmoqdagi uzilishlardan tortib kutilmagan ma'lumotlar formatlarigacha, ilovalar bunday vaziyatlarni muammosiz hal qilishga tayyor bo'lishi kerak. TypeScript o'zining kuchli tiplar tizimi bilan barqaror ilovalar yaratish uchun mustahkam asosni taklif etadi. Ushbu maqola TypeScript xatolik chegaralari tushunchasiga chuqur kirib boradi, turli xil xatoliklarni qayta ishlash turlarini, eng yaxshi amaliyotlarni va sizni yanada barqaror va qo'llab-quvvatlanadigan kod yaratish uchun bilim bilan ta'minlaydigan amaliy misollarni o'rganadi.

Xatoliklarni Qayta Ishlash Muhimligini Tushunish

Samarali xatoliklarni qayta ishlash ijobiy foydalanuvchi tajribasi va ilovaning umumiy sog'lig'i uchun hal qiluvchi ahamiyatga ega. Xatolar qayta ishlanmaganda, ular quyidagilarga olib kelishi mumkin:

• Ishdan chiqishlar va Kutilmagan Xatti-harakatlar: Qayta ishlanmagan istisnolar kodingizning bajarilishini to'xtatib, ishdan chiqishlarga yoki kutilmagan natijalarga olib kelishi mumkin.
• Ma'lumotlar Yo'qolishi va Buzilishi: Ma'lumotlarni qayta ishlash yoki saqlash paytidagi xatolar ma'lumotlarning yo'qolishiga yoki buzilishiga olib kelishi mumkin, bu esa foydalanuvchilarga va tizimning yaxlitligiga ta'sir qiladi.
• Xavfsizlik Zaifliklari: Yomon xatoliklarni qayta ishlash maxfiy ma'lumotlarni oshkor qilishi yoki zararli hujumlar uchun imkoniyatlar yaratishi mumkin.
• Salbiy Foydalanuvchi Tajribasi: Tushunarsiz xato xabarlari yoki ilovaning ishdan chiqishiga duch kelgan foydalanuvchilar, ehtimol, hafsalasi pir bo'lishi mumkin, bu esa ishonch va qabul qilinishning yo'qolishiga olib keladi.
• Mahsuldorlikning Pasayishi: Dasturchilar qayta ishlanmagan xatoliklarni tuzatish va hal qilish uchun vaqt sarflaydilar, bu esa umumiy ishlab chiqarish mahsuldorligiga to'sqinlik qiladi va reliz sikllarini sekinlashtiradi.

Boshqa tomondan, yaxshi xatoliklarni qayta ishlash quyidagilarni ta'minlaydi:

• Silliq Degradatsiya: Ilovaning ma'lum bir qismida xatolik yuzaga kelsa ham, u ishlashda davom etadi.
• Axborot Beruvchi Fikr-mulohaza: Foydalanuvchilar aniq va qisqa xato xabarlarini oladilar, bu ularga muammoni tushunish va hal qilishda yordam beradi.
• Ma'lumotlar Yaxlitligi: Muhim operatsiyalar tranzaksiyaviy tarzda boshqariladi, bu esa muhim foydalanuvchi ma'lumotlarini himoya qiladi.
• Barqarorlikning Yaxshilanishi: Ilova kutilmagan hodisalarga nisbatan ancha chidamli bo'ladi.
• Qo'llab-quvvatlash Osonligi: Muammolar paydo bo'lganda ularni aniqlash, tashxislash va tuzatish osonroq bo'ladi.

TypeScript'da Xatolik Chegaralari Nima?

Xatolik chegaralari - bu komponentlar daraxtining ma'lum bir qismidagi JavaScript xatolarini ushlab olish va butun ilovani ishdan chiqarish o'rniga zaxira UI'ni chiroyli tarzda ko'rsatish uchun ishlatiladigan dizayn andozasidir. TypeScript'ning o'zida maxsus "xatolik chegarasi" xususiyati bo'lmasa-da, bunday chegaralarni yaratish tamoyillari va usullari TypeScript'ning tiplar xavfsizligi bilan osongina qo'llaniladi va takomillashtiriladi.

Asosiy g'oya potentsial xatolikka moyil kodni maxsus komponent yoki modul ichida izolyatsiya qilishdir. Ushbu komponent o'ram (wrapper) vazifasini bajaradi va uning ichidagi kodni kuzatib boradi. Agar xatolik yuzaga kelsa, xatolik chegarasi komponenti xatoni "ushlab oladi", uning komponentlar daraxti bo'ylab tarqalishini va potentsial ravishda ilovani ishdan chiqarishini oldini oladi. Buning o'rniga, xatolik chegarasi zaxira UI'ni render qilishi, xatoni loglashi yoki muammoni bartaraf etishga harakat qilishi mumkin.

Xatolik chegaralaridan foydalanishning afzalliklari:

• Izolyatsiya: Ilovangizning bir qismidagi xatolar boshqalariga ta'sir qilishini oldini oladi.
• Zaxira UI: To'liq buzilgan ilovaga qaraganda foydalanuvchilar uchun qulayroq tajriba taqdim etadi.
• Xatoliklarni Loglash: Nosozliklarni tuzatish va monitoring qilish uchun xatoliklar haqidagi ma'lumotlarni to'plashni osonlashtiradi.
• Qo'llab-quvvatlash Osonligi: Xatoliklarni qayta ishlash mantig'ini soddalashtiradi va kodni yangilash va qo'llab-quvvatlashni osonlashtiradi.

TypeScript'da Xatoliklarni Qayta Ishlash Turi Andozalari

TypeScript'ning tiplar tizimi to'g'ri xatoliklarni qayta ishlash andozalari bilan birlashtirilganda juda samarali bo'ladi. Quyida TypeScript ilovalaringizda xatoliklarni boshqarish uchun keng tarqalgan va samarali andozalar keltirilgan:

1. Try-Catch Bloklari

JavaScript va TypeScript'da xatoliklarni qayta ishlashning asosiy qurilish bloki `try-catch` blokidir. U sizga `try` bloki ichida kodni bajarish va yuborilgan har qanday istisnolarni ushlash imkonini beradi. Bu sinxron operatsiya bo'lib, funksiya ichidagi xatoliklarni to'g'ridan-to'g'ri qayta ishlash uchun idealdir.

            function fetchData(url: string): Promise<any> {
  try {
    return fetch(url).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP xatosi! Status: ${response.status}`);
      }
      return response.json();
    });
  } catch (error) {
    console.error("Ma'lumotlarni olishda xatolik yuz berdi:", error);
    // Xatolikni qayta ishlash (masalan, foydalanuvchiga xato xabarini ko'rsatish)
    return Promise.reject(error);
  }
}
            

              
                Copy
              
            
          

Ushbu misolda `fetchData` funksiyasi berilgan URL'dan ma'lumotlarni olishga harakat qiladi. Agar `fetch` chaqiruvi muvaffaqiyatsiz bo'lsa (masalan, tarmoq xatosi, yomon URL) yoki javob statusi 'ok' bo'lmasa, xatolik yuboriladi. Keyin `catch` bloki xatolikni qayta ishlaydi. Xatolikni tarqatish uchun `Promise.reject(error)` ishlatilishiga e'tibor bering, shunda chaqiruvchi kod ham uni qayta ishlashi mumkin. Bu asinxron operatsiyalar uchun keng tarqalgan.

2. Promise'lar va Asinxron Xatoliklarni Qayta Ishlash

Asinxron operatsiyalar JavaScript'da, ayniqsa API'lar, ma'lumotlar bazasi bilan o'zaro aloqalar va fayllar bilan ishlashda keng tarqalgan. Promise'lar bu stsenariylarda xatoliklarni qayta ishlash uchun kuchli mexanizmni taqdim etadi. `try-catch` bloki foydali, ammo ko'p hollarda siz xatoliklarni Promise'ning `.then()` va `.catch()` metodlari ichida qayta ishlaysiz.

            function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP xatosi! Status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error("Ma'lumotlarni olishda xatolik yuz berdi:", error);
      // Xatolikni qayta ishlash (masalan, foydalanuvchiga xato xabarini ko'rsatish)
      return Promise.reject(error);
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log("Ma'lumotlar muvaffaqiyatli olindi:", data);
  })
  .catch(error => {
    console.error("Ma'lumotlarni olishda xatolik:", error);
    // Foydalanuvchiga qulay xato xabarini ko'rsatish
  });
            

              
                Copy
              
            
          

Ushbu misolda `fetchData` funksiyasi asinxron `fetch` operatsiyasini boshqarish uchun Promise'dan foydalanadi. Xatolar `.catch()` blokida ushlanadi, bu sizga ularni asinxron operatsiya uchun maxsus qayta ishlash imkonini beradi.

3. Xatolik Sinfari va Maxsus Xatolik Tiplari

TypeScript sizga maxsus xatolik sinflarini aniqlash imkonini beradi, bu esa yanada tuzilgan va ma'lumotli xatoliklarni qayta ishlashni ta'minlaydi. Bu qayta ishlatiladigan va tiplar xavfsizligi ta'minlangan xatoliklarni qayta ishlash mantig'ini yaratish uchun ajoyib amaliyotdir. Maxsus xatolik sinflarini yaratish orqali siz quyidagilarni qilishingiz mumkin:

• Maxsus Xatolik Kodlarini Qo'shish: Turli xil xatolik turlarini farqlash.
• Kontekst Taqdim Etish: Xatolikka oid qo'shimcha ma'lumotlarni saqlash.
• O'qish va Qo'llab-quvvatlashni Yaxshilash: Xatoliklarni qayta ishlash kodingizni tushunishni osonlashtirish.

            class ApiError extends Error {
  statusCode: number;
  code: string;

  constructor(message: string, statusCode: number, code: string) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code;
    // Prototipni aniq belgilash
    Object.setPrototypeOf(this, ApiError.prototype);
  }
}

async function getUserData(userId: number): Promise<any> {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      let errorMessage = 'Foydalanuvchi ma\'lumotlarini olishda xatolik';
      if (response.status === 404) {
        errorMessage = 'Foydalanuvchi topilmadi';
      }
      throw new ApiError(errorMessage, response.status, 'USER_NOT_FOUND');
    }
    return await response.json();
  } catch (error: any) {
    if (error instanceof ApiError) {
      console.error("API xatosi:", error.message, error.statusCode, error.code);
      // Kodga asoslangan maxsus API xatosini qayta ishlash
      if (error.code === 'USER_NOT_FOUND') {
        // 'foydalanuvchi topilmadi' xabarini ko'rsatish
      }
    } else {
      console.error("Kutilmagan xatolik yuz berdi:", error);
      // Boshqa xatoliklarni qayta ishlash
    }
    throw error; // Xatoni qayta yuborish yoki qayta ishlash
  }
}

getUserData(123)
  .then(userData => console.log("Foydalanuvchi ma'lumotlari:", userData))
  .catch(error => console.error("Foydalanuvchi ma'lumotlarini olishda xatolik:", error));
            

              
                Copy
              
            
          

Ushbu misol o'rnatilgan `Error` sinfidan meros olgan `ApiError` sinfini aniqlaydi. U ko'proq kontekst taqdim etish uchun `statusCode` va `code` xususiyatlarini o'z ichiga oladi. `getUserData` funksiyasi ushbu maxsus xatolik sinfidan foydalanadi, maxsus xatolik turlarini ushlaydi va qayta ishlaydi. `instanceof` operatoridan foydalanish tiplarni xavfsiz tekshirish va xatolik turiga qarab maxsus xatoliklarni qayta ishlash imkonini beradi.

4. `Result` Tipi (Funksional Xatoliklarni Qayta Ishlash)

Funksional dasturlash ko'pincha muvaffaqiyatli natija yoki xatoni ifodalash uchun `Result` tipidan (shuningdek, `Either` tipi deb ham ataladi) foydalanadi. Bu andoza xatoliklarni toza va tiplar xavfsizligi ta'minlangan usulda qayta ishlashni ta'minlaydi. `Result` tipi odatda ikkita variantga ega: `Ok` (muvaffaqiyat uchun) va `Err` (muvaffaqiyatsizlik uchun).

            
// Umumiy Result tipini aniqlash

interface Ok<T> {
    type: 'ok';
    value: T;
}

interface Err<E> {
    type: 'err';
    error: E;
}

type Result<T, E> = Ok<T> | Err<E>

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return { type: 'err', error: 'Nolga bo\'lish' };
  }
  return { type: 'ok', value: a / b };
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1.type === 'ok') {
  console.log('Natija:', result1.value);
} else {
  console.error('Xatolik:', result1.error);
}

if (result2.type === 'ok') {
  console.log('Natija:', result2.value);
} else {
  console.error('Xatolik:', result2.error);
}
            

              
                Copy
              
            
          

`divide` funksiyasi yo bo'linish natijasini o'z ichiga olgan `Ok` turidagi `Result`ni yoki xato xabarini o'z ichiga olgan `Err` turidagi `Result`ni qaytaradi. Bu andoza chaqiruvchini ham muvaffaqiyat, ham muvaffaqiyatsizlik stsenariylarini aniq qayta ishlashga majbur qilishini ta'minlaydi, bu esa qayta ishlanmagan xatoliklarning oldini oladi.

5. Dekoratorlar (ilg'or xatoliklarni qayta ishlash uchun - chegaralarni amalga oshirish uchun kamdan-kam to'g'ridan-to'g'ri ishlatiladi)

Garchi bu to'g'ridan-to'g'ri xatolik chegaralari uchun andoza bo'lmasa-da, dekoratorlar xatoliklarni qayta ishlash mantig'ini metodlarga deklarativ usulda qo'llash uchun ishlatilishi mumkin. Bu kodingizdagi andoza kodni kamaytirishi mumkin. Biroq, bu foydalanish asosiy xatolik chegaralarini amalga oshirish uchun yuqoridagi boshqa andozalarga qaraganda kamroq tarqalgan.

            
function handleError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = async function (...args: any[]) {
    try {
      const result = await originalMethod.apply(this, args);
      return result;
    } catch (error: any) {
      console.error(`${propertyKey} da xatolik:`, error);
      // Xatolikni shu yerda qayta ishlang (masalan, log yozish, standart qiymatni ko'rsatish va hokazo)
      return null; // Yoki aniqroq xatolikni yuborish
    }
  };

  return descriptor;
}

class MyService {
  @handleError
  async fetchData(url: string): Promise<any> {
    // Xatolikni simulyatsiya qilish
    if (Math.random() < 0.5) {
      throw new Error('Simulyatsiya qilingan tarmoq xatosi');
    }
    const response = await fetch(url);
    return await response.json();
  }
}

            

              
                Copy
              
            
          

Ushbu misolda `@handleError` dekoratori aniqlangan. Dekorator asl metodni o'rab oladi, har qanday xatoliklarni ushlaydi va ularni loglaydi. Bu asl metod kodini o'zgartirmasdan xatoliklarni qayta ishlash imkonini beradi.

Frontend Freymvorklarida Xatolik Chegaralarini Amalga Oshirish (React Misoli)

Asosiy tushunchalar o'xshash bo'lsa-da, xatolik chegaralarini amalga oshirish siz foydalanayotgan frontend freymvorkiga qarab biroz farq qiladi. Keling, interaktiv foydalanuvchi interfeyslarini yaratish uchun eng keng tarqalgan freymvork bo'lgan React'ga e'tibor qaratamiz.

React Xatolik Chegaralari

React xatolik chegaralarini yaratish uchun maxsus mexanizmni taqdim etadi. Xatolik chegarasi - bu o'zining ichki komponentlar daraxtining istalgan joyidagi JavaScript xatolarini ushlaydigan, ushbu xatolarni loglaydigan va butun ilovani ishdan chiqarish o'rniga zaxira UI'ni ko'rsatadigan React komponentidir. Xatolik chegaralari render qilish, hayot sikli metodlari va uning barcha ichki komponentlarining konstruktorlari paytida yuzaga keladigan xatolarni ushlaydi.

React'da xatolik chegarasini yaratish uchun asosiy metodlar:

• `static getDerivedStateFromError(error)`: Bu statik metod ichki komponent xatolik yuborgandan so'ng chaqiriladi. U xatoni parametr sifatida qabul qiladi va holatni yangilash uchun obyekt qaytarishi kerak. U zaxira UI'ni ishga tushirish uchun holatni yangilashda, masalan, `error` belgisini `true` ga o'rnatishda ishlatiladi.
• `componentDidCatch(error, info)`: Bu metod ichki komponent tomonidan xatolik yuborilgandan so'ng chaqiriladi. U xatoni va xatolikni yuborgan komponent haqida ma'lumotni o'z ichiga olgan obyektni qabul qiladi. U odatda xatoni loglash uchun ishlatiladi. Bu metod faqat uning ichki komponentlari render qilinishi paytida yuzaga keladigan xatolar uchun chaqiriladi.

            import React from 'react';

interface Props {
    children: React.ReactNode;
}

interface State {
    hasError: boolean;
    error: Error | null;
}

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

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

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // Shuningdek, xatolikni xatoliklar haqida hisobot berish xizmatiga yozishingiz mumkin
    console.error('Ushlanmagan xato:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return (
        <div className="error-boundary">
          <h2>Nimadir noto'g'ri ketdi.</h2>
          <p>Biz buni tuzatish ustida ishlayapmiz!</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.stack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Ushbu `ErrorBoundary` komponenti o'zining ichki komponentlarini o'rab oladi. Agar o'ralgan komponentlar ichida biron bir xatolik yuzaga kelsa, `getDerivedStateFromError` metodi holatni yangilash uchun chaqiriladi, bu esa komponentni zaxira UI bilan qayta render qilishga sabab bo'ladi. `componentDidCatch` metodi xatolarni loglash uchun ishlatiladi. ErrorBoundary'dan foydalanish uchun siz shunchaki ilovangizning qismlarini uning ichiga o'rashingiz kerak bo'ladi:

            
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponentThatMightError />
      </ErrorBoundary>
      <AnotherComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

`ErrorBoundary` komponentini potentsial muammoli komponentlar atrofida joylashtirish orqali siz ushbu komponentlarni izolyatsiya qilasiz va xatolar yuzaga kelganda zaxira UI'ni taqdim etasiz, bu esa butun ilovaning ishdan chiqishini oldini oladi.

Boshqa Freymvorklarda Xatolik Chegaralari (Konseptual)

Amalga oshirish tafsilotlari farq qilsa-da, xatolik chegaralarining asosiy tamoyillari Angular va Vue.js kabi boshqa frontend freymvorklariga ham qo'llanilishi mumkin. Siz odatda bunga o'xshash strategiyalar yordamida erishasiz:

• Angular: Komponentlardagi xatoliklarni qayta ishlash, maxsus xatolik qayta ishlovchilari va interceptor'lardan foydalanish. Angular'ning `ErrorHandler` sinfidan foydalanishni va potentsial muammoli komponentlarni xatoliklarni qayta ishlash mantiqi bilan o'rashni ko'rib chiqing.
• Vue.js: Komponentlar ichida `try...catch` bloklarini qo'llash yoki `Vue.config.errorHandler` orqali ro'yxatdan o'tgan global xatolik qayta ishlovchilaridan foydalanish. Vue shuningdek React xatolik chegaralariga o'xshash komponent darajasida xatoliklarni qayta ishlash xususiyatlariga ega.

Xatolik Chegaralari va Xatoliklarni Qayta Ishlash uchun Eng Yaxshi Amaliyotlar

Xatolik chegaralari va xatoliklarni qayta ishlash turlari andozalaridan samarali foydalanish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:

• Xatolikka Moyil Kodni Izolyatsiya Qiling: Xatolik yuborishi mumkin bo'lgan komponentlar yoki kod qismlarini xatolik chegaralari yoki tegishli xatoliklarni qayta ishlash tuzilmalari ichiga o'rang.
• Aniq Xato Xabarlarini Taqdim Eting: Foydalanuvchi uchun kontekst va yo'l-yo'riq beradigan, tushunarli xato xabarlarini ishlab chiqing. Tushunarsiz yoki texnik jargondan saqlaning.
• Xatoliklarni Samarali Loglang: Xatolarni kuzatish, tegishli ma'lumotlarni (stack trace'lar, foydalanuvchi konteksti va hokazo) to'plash va nosozliklarni tuzatishni osonlashtirish uchun mustahkam xatolarni loglash tizimini joriy qiling. Ishlab chiqarish muhitlari uchun Sentry, Bugsnag yoki Rollbar kabi xizmatlardan foydalaning.
• Zaxira UI'larni Amalga Oshiring: Xatoliklarni chiroyli tarzda qayta ishlaydigan va butun ilovaning ishdan chiqishini oldini oladigan mazmunli zaxira UI'larni taqdim eting. Zaxira UI foydalanuvchiga nima bo'lganini ma'lum qilishi va, agar kerak bo'lsa, ular qanday harakatlar qilishlari mumkinligini taklif qilishi kerak.
• Maxsus Xatolik Sinfaridan Foydalaning: Turli xil xatolik turlarini ifodalash va yanada samarali xatoliklarni qayta ishlash uchun qo'shimcha kontekst va ma'lumot qo'shish uchun maxsus xatolik sinflarini yarating.
• Xatolik Chegaralarining Qamrovini Ko'rib Chiqing: Butun ilovani bitta xatolik chegarasiga o'ramang, chunki bu asosiy muammolarni yashirishi mumkin. Buning o'rniga, xatolik chegaralarini strategik ravishda komponentlar yoki ilova qismlari atrofida joylashtiring.
• Xatoliklarni Qayta Ishlashni Sinovdan O'tkazing: Xatoliklarni qayta ishlash mantig'ingiz kutilganidek ishlashini va zaxira UI'lar to'g'ri ko'rsatilishini ta'minlash uchun birlik testlari va integratsiya testlarini yozing. Xatolar yuzaga kelishi mumkin bo'lgan stsenariylar uchun sinovdan o'tkazing.
• Xatolarni Kuzatib Boring va Tahlil Qiling: Takrorlanadigan muammolarni aniqlash, xato tendentsiyalarini kuzatish va takomillashtirish uchun sohalarni aniqlash uchun ilovangizning xato loglarini muntazam ravishda kuzatib boring.
• Ma'lumotlarni Validatsiya Qilishga Harakat Qiling: Noto'g'ri ma'lumotlar formatlari tufayli kutilmagan xatoliklarning oldini olish uchun tashqi manbalardan olingan ma'lumotlarni validatsiya qiling.
• Promise'lar va Asinxron Operatsiyalarni Ehtiyotkorlik Bilan Boshqaring: Asinxron operatsiyalarda yuzaga kelishi mumkin bo'lgan xatolarni `.catch()` bloklari yoki tegishli xatoliklarni qayta ishlash mexanizmlari yordamida qayta ishlashingizga ishonch hosil qiling.

Amaliy Misollar va Xalqaro Masalalar

Keling, xatolik chegaralari va xatoliklarni qayta ishlash turlari andozalarini xalqaro miqyosda qo'llashning ba'zi amaliy misollarini ko'rib chiqamiz:

Misol: Elektron Tijorat Ilovasi (Ma'lumotlarni Olish)

Mahsulotlar ro'yxatini ko'rsatadigan elektron tijorat ilovasini tasavvur qiling. Ilova mahsulot ma'lumotlarini backend API'dan oladi. Xatolik chegarasi API chaqiruvlari bilan bog'liq potentsial muammolarni hal qilish uchun ishlatiladi.

            
interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
  // ... boshqa mahsulot tafsilotlari
}

class ProductList extends React.Component<{}, { products: Product[] | null; loading: boolean; error: Error | null }> {
  state = { products: null, loading: true, error: null };

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      this.setState({ products, loading: false });
    } catch (error: any) {
      this.setState({ error, loading: false });
    }
  }

  async fetchProducts(): Promise<Product[]> {
    const response = await fetch('/api/products'); // API manzili
    if (!response.ok) {
      throw new Error(`Mahsulotlarni olishda xatolik: ${response.status}`);
    }
    return await response.json();
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Mahsulotlar yuklanmoqda...</div>;
    }

    if (error) {
      return (
        <div className="error-message">
          <p>Kechirasiz, mahsulotlarni yuklashda muammo yuzaga keldi.</p>
          <p>Iltimos, keyinroq qayta urinib ko'ring.</p>
          <p>Xato tafsilotlari: {error.message}</p> {/* Nosozliklarni tuzatish uchun xato xabarini log yozish */}
        </div>
      );
    }

    return (
      <ul>
        {products && products.map(product => (
          <li key={product.id}>{product.name} - {product.price} {product.currency}</li>
        ))}
      </ul>
    );
  }
}

// Xatolik Chegarasi (React Komponenti)
class ProductListErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false, error: null };
    }

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

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
      // Shuningdek, xatolikni xatoliklar haqida hisobot berish xizmatiga yozishingiz mumkin
      console.error('Mahsulotlar ro\'yxati xatosi:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Zaxira UI'ni render qilish (masalan, xato xabari, qayta urinish tugmasi)
        return (
          <div className="product-list-error">
            <h2>Voy, nimadir noto'g'ri ketdi!</h2>
            <p>Hozirda mahsulot ma'lumotlarini yuklay olmaymiz.</p>
            <button onClick={() => window.location.reload()} >Qayta urinish</button>
          </div>
        );
      }
      return this.props.children;
    }
}

// Foydalanish
function App() {
  return (
    <div>
      <ProductListErrorBoundary>
        <ProductList />
      </ProductListErrorBoundary>
    </div>
  );
}


            

              
                Copy
              
            
          

Ushbu misolda:

• `ProductList` mahsulot ma'lumotlarini oladi. U yuklanish holatini, muvaffaqiyatli mahsulot ma'lumotlarini va komponent ichidagi xato holatini boshqaradi.
• `ProductListErrorBoundary` render qilish va API chaqiruvlari paytidagi xatolarni ushlash uchun `ProductList` komponentini o'rash uchun ishlatiladi.
• Agar API so'rovi muvaffaqiyatsiz bo'lsa, `ProductListErrorBoundary` UI'ni ishdan chiqarish o'rniga foydalanuvchiga qulay xato xabarini render qiladi.
• Xato xabari foydalanuvchiga yangilash imkonini beruvchi “qayta urinish” opsiyasini taqdim etadi.
• Mahsulot ma'lumotlaridagi `currency` maydoni xalqaro kutubxonalardan (masalan, JavaScript'dagi Intl) foydalanib to'g'ri ko'rsatilishi mumkin, bu esa valyutani foydalanuvchining lokal sozlamalariga muvofiq formatlashni ta'minlaydi.

Misol: Xalqaro Shakl Validatsiyasi

Foydalanuvchi ma'lumotlarini, shu jumladan manzil ma'lumotlarini to'playdigan shaklni ko'rib chiqing. To'g'ri validatsiya muhim, ayniqsa turli xil manzil formatlariga ega bo'lgan turli mamlakatlardagi foydalanuvchilar bilan ishlaganda.

            
// Soddalashtirilgan manzil interfeysini tasavvur qiling
interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

class AddressForm extends React.Component<{}, { address: Address; errors: { [key: string]: string } }> {
  state = {
    address: {
      street: '',
      city: '',
      postalCode: '',
      country: 'US', // Standart mamlakat
    },
    errors: {},
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      address: {
        ...prevState.address,
        [name]: value,
      },
      errors: {
        ...prevState.errors,
        [name]: '', // Ushbu maydon uchun avvalgi xatoliklarni tozalash
      },
    }));
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { address } = this.state;
    const errors = this.validateAddress(address);
    if (Object.keys(errors).length > 0) {
      this.setState({ errors });
    }
    else {
      // Shaklni yuborish (masalan, API'ga)
      alert('Shakl yuborildi!'); // Haqiqiy yuborish mantiqi bilan almashtiring
    }
  };

  validateAddress = (address: Address) => {
    const errors: { [key: string]: string } = {};

    // Tanlangan mamlakatga asoslangan validatsiya qoidalari
    if (!address.street) {
      errors.street = 'Ko\'cha manzili talab qilinadi';
    }
    if (!address.city) {
      errors.city = 'Shahar talab qilinadi';
    }

    // Misol: mamlakatga asoslangan pochta indeksi validatsiyasi
    switch (address.country) {
      case 'US':
        if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(address.postalCode)) {
          errors.postalCode = 'Yaroqsiz AQSh pochta indeksi';
        }
        break;
      case 'CA':
        if (!/^[A-Za-z][0-9][A-Za-z][ ]?[0-9][A-Za-z][0-9]$/.test(address.postalCode)) {
          errors.postalCode = 'Yaroqsiz Kanada pochta indeksi';
        }
        break;
      // Qo'shimcha mamlakatlar va validatsiya qoidalarini qo'shing
      default:
        if (!address.postalCode) {
          errors.postalCode = 'Pochta indeksi talab qilinadi';
        }
        break;
    }

    return errors;
  };

  render() {
    const { address, errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="street">Ko'cha:</label>
        <input
          type="text"
          id="street"
          name="street"
          value={address.street}
          onChange={this.handleChange}
        />
        {errors.street && <div className="error">{errors.street}</div>}

        <label htmlFor="city">Shahar:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={address.city}
          onChange={this.handleChange}
        />
        {errors.city && <div className="error">{errors.city}</div>}

        <label htmlFor="postalCode">Pochta indeksi:</label>
        <input
          type="text"
          id="postalCode"
          name="postalCode"
          value={address.postalCode}
          onChange={this.handleChange}
        />
        {errors.postalCode && <div className="error">{errors.postalCode}</div>}

        <label htmlFor="country">Mamlakat:</label>
        <select
          id="country"
          name="country"
          value={address.country}
          onChange={this.handleChange}
        >
          <option value="US">Amerika Qo'shma Shtatlari</option>
          <option value="CA">Kanada</option>
          <!-- Qo'shimcha mamlakatlarni qo'shing -->
        </select>

        <button type="submit">Yuborish</button>
      </form>
    );
  }
}


            

              
                Copy
              
            
          

Ushbu misolda:

• `AddressForm` komponenti shakl ma'lumotlari va validatsiya mantig'ini boshqaradi.
• `validateAddress` funksiyasi tanlangan mamlakatga qarab validatsiyalarni amalga oshiradi.
• Mamlakatga xos pochta indeksi validatsiya qoidalari qo'llaniladi (AQSh va CA ko'rsatilgan).
• Ilova lokalga mos formatlash uchun `Intl` API'sidan foydalanadi. Bu joriy foydalanuvchining lokaliga muvofiq raqam, sana va valyutani dinamik ravishda formatlash uchun ishlatiladi.
• Xato xabarlari global miqyosda yaxshiroq foydalanuvchi tajribasini ta'minlash uchun tarjima qilinishi mumkin.
• Ushbu yondashuv foydalanuvchilarga joylashuvidan qat'i nazar, shaklni qulay tarzda to'ldirish imkonini beradi.

Xalqarolashtirish bo'yicha Eng Yaxshi Amaliyotlar:

• Lokalizatsiya Kutubxonasidan Foydalaning: i18next, react-intl yoki LinguiJS kabi kutubxonalar matnni tarjima qilish, sanalarni, raqamlarni va valyutalarni foydalanuvchining lokaliga qarab formatlash uchun xususiyatlarni taqdim etadi.
• Lokalni Tanlashni Taqdim Eting: Foydalanuvchilarga o'zlari afzal ko'rgan til va mintaqani tanlashga ruxsat bering. Bu ochiladigan ro'yxat, sozlamalar yoki brauzer sozlamalariga asoslangan avtomatik aniqlash orqali bo'lishi mumkin.
• Sana, Vaqt va Raqam Formatlarini Boshqaring: Sanalar, vaqtlar, raqamlar va valyutalarni turli lokallar uchun mos ravishda formatlash uchun `Intl` API'sidan foydalaning.
• Matn Yo'nalishini Hisobga Oling: UI'ni ham chapdan o'ngga (LTR), ham o'ngdan chapga (RTL) matn yo'nalishlarini qo'llab-quvvatlaydigan qilib loyihalashtiring. RTL'ni qo'llab-quvvatlashga yordam beradigan kutubxonalar mavjud.
• Madaniy Farqlarni Hisobga Oling: UI va xato xabarlarini loyihalashda madaniy me'yorlarga e'tibor bering. Ba'zi madaniyatlarda haqoratli yoki nomaqbul bo'lishi mumkin bo'lgan til yoki tasvirlardan foydalanishdan saqlaning.
• Turli Lokallarda Sinovdan O'tkazing: Tarjima va formatlash to'g'ri ishlashini va UI to'g'ri ko'rsatilishini ta'minlash uchun ilovangizni turli lokallarda sinchkovlik bilan sinovdan o'tkazing.

Xulosa

TypeScript xatolik chegaralari va samarali xatoliklarni qayta ishlash turlari andozalari ishonchli va foydalanuvchiga qulay ilovalar yaratishning muhim tarkibiy qismlaridir. Ushbu amaliyotlarni joriy etish orqali siz kutilmagan ishdan chiqishlarning oldini olishingiz, foydalanuvchi tajribasini yaxshilashingiz va nosozliklarni tuzatish va texnik xizmat ko'rsatish jarayonlarini soddalashtirishingiz mumkin. Oddiy `try-catch` bloklaridan tortib, yanada murakkab `Result` tipi va maxsus xatolik sinflarigacha, bu andozalar sizga real dunyo qiyinchiliklariga bardosh bera oladigan mustahkam ilovalar yaratish imkonini beradi. Ushbu usullarni o'zlashtirish orqali siz yaxshiroq TypeScript kodi yozasiz va global foydalanuvchilaringizga yaxshiroq tajriba taqdim etasiz.

Loyihangizning ehtiyojlariga va ilovangizning murakkabligiga eng mos keladigan xatoliklarni qayta ishlash andozalarini tanlashni unutmang. Har doim foydalanuvchilarni har qanday potentsial muammolar bo'yicha yo'naltiradigan aniq, ma'lumot beruvchi xato xabarlari va zaxira UI'larni taqdim etishga e'tibor qarating. Ushbu ko'rsatmalarga rioya qilish orqali siz yanada barqaror, qo'llab-quvvatlanadigan va pirovardida global bozorda muvaffaqiyatli bo'ladigan ilovalarni yaratishingiz mumkin.

Ushbu andozalar va usullar bilan o'z loyihalaringizda tajriba o'tkazishni va ularni ilovangizning o'ziga xos talablariga moslashtirishni ko'rib chiqing. Bu yondashuv kod sifatining yaxshilanishiga va barcha foydalanuvchilar uchun yanada ijobiy tajribaga hissa qo'shadi.