React'da Xatoliklarni Tiklash: Barqaror Ilovalar uchun Silliq Degradatsiya Strategiyalari

Mustahkam va barqaror React ilovalarini yaratish xatoliklarni boshqarishga kompleks yondashuvni talab qiladi. Xatoliklarning oldini olish muhim bo‘lsa-da, ish vaqtida yuzaga keladigan muqarrar istisnolarni silliq tarzda bartaraf etish uchun strategiyalarga ega bo‘lish ham birdek muhimdir. Ushbu blog posti React'da silliq degradatsiyani amalga oshirishning turli usullarini o'rganib, kutilmagan xatolar yuzaga kelganda ham silliq va informativ foydalanuvchi tajribasini ta'minlaydi.

Nima uchun Xatoliklarni Tiklash Muhim?

Tasavvur qiling, foydalanuvchi sizning ilovangiz bilan ishlayotganda to'satdan bir komponent ishdan chiqib, tushunarsiz xato xabari yoki bo'sh ekranni ko'rsatadi. Bu hafsalasi pir bo'lishiga, yomon foydalanuvchi tajribasiga va potentsial ravishda foydalanuvchilarning ketib qolishiga olib kelishi mumkin. Samarali xatolarni tiklash bir necha sabablarga ko'ra juda muhimdir:

• Yaxshilangan Foydalanuvchi Tajribasi: Buzilgan UI ko'rsatish o'rniga, xatoliklarni silliq tarzda bartaraf eting va foydalanuvchiga informativ xabarlar taqdim eting.
• Ilovaning Barqarorligini Oshirish: Xatoliklarning butun ilovani ishdan chiqarishining oldini oling. Xatoliklarni ajratib oling va ilovaning qolgan qismini ishlashda davom etishiga imkon bering.
• Kengaytirilgan Tuzatish (Debugging): Xato tafsilotlarini yozib olish va tuzatishni osonlashtirish uchun jurnalga yozish va hisobot berish mexanizmlarini joriy eting.
• Yaxshiroq Konversiya Ko'rsatkichlari: Funktsional va ishonchli ilova foydalanuvchilarning yuqori darajada qoniqishiga va natijada, ayniqsa elektron tijorat yoki SaaS platformalari uchun yaxshiroq konversiya ko'rsatkichlariga olib keladi.

Xatolik Chegaralari (Error Boundaries): Asosiy Yondashuv

Xatolik chegaralari — bu o‘zlarining ichki komponentlar daraxtining istalgan joyida JavaScript xatolarini ushlaydigan, ularni jurnalga yozadigan va ishdan chiqqan komponent daraxti o‘rniga zaxira interfeysni (UI) ko‘rsatadigan React komponentlaridir. Ularni JavaScript'dagi `catch {}` bloki deb o'ylang, lekin React komponentlari uchun.

Xatolik Chegarasi Komponentini Yaratish

Xatolik chegaralari — bu `static getDerivedStateFromError()` va `componentDidCatch()` hayotiy sikl metodlarini amalga oshiradigan sinf komponentlaridir. Keling, oddiy xatolik chegarasi komponentini yaratamiz:

            import React from 'react';

class ErrorBoundary 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) {
    // Shuningdek, xatoni xatoliklar haqida hisobot beruvchi xizmatga yozishingiz mumkin
    console.error("Captured error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
    // Misol: xatoniXizmatgaYozish(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return (
        <div>
          <h2>Nimadir noto'g'ri bajarildi.</h2>
          <p>{this.state.error && this.state.error.toString()}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Tushuntirish:

• `getDerivedStateFromError(error)`: Ushbu statik metod quyi komponent tomonidan xatolik yuzaga kelganidan keyin chaqiriladi. U xatoni argument sifatida qabul qiladi va holatni yangilash uchun qiymat qaytarishi kerak. Bu holda, zaxira UI'ni ishga tushirish uchun `hasError` ni `true` ga o'rnatamiz.
• `componentDidCatch(error, errorInfo)`: Ushbu metod quyi komponent tomonidan xatolik yuzaga kelganidan keyin chaqiriladi. U xato va qaysi komponent xatoni yuzaga keltirganligi haqidagi ma'lumotlarni o'z ichiga olgan `errorInfo` obyektini qabul qiladi. Siz ushbu metoddan xatolarni xizmatga yozish yoki boshqa yon ta'sirlarni bajarish uchun foydalanishingiz mumkin.
• `render()`: Agar `hasError` `true` bo'lsa, zaxira UI'ni render qiling. Aks holda, komponentning ichki elementlarini render qiling.

Xatolik Chegarasidan Foydalanish

Xatolik chegarasidan foydalanish uchun, shunchaki himoya qilmoqchi bo'lgan komponentlar daraxtini u bilan o'rab oling:

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

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

Agar `MyComponent` yoki uning ichidagi biror komponent xatolik yuzaga keltirsa, `ErrorBoundary` uni ushlaydi va o'zining zaxira interfeysini ko'rsatadi.

Xatolik Chegaralari Uchun Muhim Mulohazalar

• Donadorlik (Granularity): Xatolik chegaralaringiz uchun mos donadorlik darajasini aniqlang. Butun ilovani bitta xatolik chegarasi bilan o'rash juda qo'pol bo'lishi mumkin. Alohida funksiyalar yoki komponentlarni o'rashni ko'rib chiqing.
• Zaxira UI: Foydalanuvchiga foydali ma'lumot beradigan mazmunli zaxira UI'larni loyihalashtiring. Umumiy xato xabarlaridan saqlaning. Foydalanuvchiga qayta urinish yoki qo'llab-quvvatlash xizmatiga murojaat qilish imkoniyatlarini taqdim etishni ko'rib chiqing. Masalan, agar foydalanuvchi profilni yuklashga harakat qilsa va muvaffaqiyatsizlikka uchrasa, "Profilni yuklab bo'lmadi. Iltimos, internet aloqangizni tekshiring yoki keyinroq qayta urinib ko'ring" kabi xabar ko'rsating.
• Jurnalga Yozish (Logging): Xato tafsilotlarini yozib olish uchun mustahkam jurnalga yozish tizimini joriy eting. Xato xabari, stek treysi va foydalanuvchi kontekstini (masalan, foydalanuvchi IDsi, brauzer ma'lumotlari) kiriting. Ishlab chiqarishdagi xatolarni kuzatish uchun markazlashtirilgan jurnal yozish xizmatidan (masalan, Sentry, Rollbar) foydalaning.
• Joylashuv: Xatolik chegaralari faqat daraxtda o'zlaridan *pastda* joylashgan komponentlardagi xatolarni ushlaydi. Xatolik chegarasi o'z ichidagi xatolarni ushlay olmaydi.
• Hodisalarni Qayta Ishlovchilar va Asinxron Kod: Xatolik chegaralari hodisalarni qayta ishlovchilar (masalan, bosish hodisalari) yoki `setTimeout` yoki `Promise` qayta chaqiruvlari kabi asinxron kod ichidagi xatolarni ushlamaydi. Ular uchun siz `try...catch` bloklaridan foydalanishingiz kerak bo'ladi.

Zaxira Komponentlar: Alternativalarni Taqdim Etish

Zaxira komponentlar — bu asosiy komponent yuklanmaganda yoki to'g'ri ishlamaganda render qilinadigan UI elementlaridir. Ular xatolar yuzaga kelganda ham funksionallikni saqlab qolish va ijobiy foydalanuvchi tajribasini taqdim etish usulini taklif qiladi.

Zaxira Komponentlar Turlari

• Soddalashtirilgan Versiya: Agar murakkab komponent ishdan chiqsa, siz asosiy funksionallikni ta'minlaydigan soddalashtirilgan versiyani render qilishingiz mumkin. Masalan, agar matn muharriri ishdan chiqsa, siz oddiy matn kiritish maydonini ko'rsatishingiz mumkin.
• Keshdagi Ma'lumotlar: Agar API so'rovi muvaffaqiyatsiz bo'lsa, siz keshdagi ma'lumotlarni yoki standart qiymatni ko'rsatishingiz mumkin. Bu foydalanuvchiga ma'lumotlar yangilanmagan bo'lsa ham, ilova bilan ishlashda davom etishiga imkon beradi.
• O'rinbosar Kontent: Agar rasm yoki video yuklanmasa, siz o'rinbosar rasm yoki kontent mavjud emasligini bildiruvchi xabar ko'rsatishingiz mumkin.
• Qayta Urinish Imkoniyati Bilan Xato Xabari: Foydalanuvchiga qulay xato xabari bilan operatsiyani qayta urinish imkoniyatini ko'rsating. Bu foydalanuvchiga o'z yutuqlarini yo'qotmasdan harakatni yana bir bor sinab ko'rishga imkon beradi.
• Qo'llab-quvvatlash Xizmatiga Murojaat Havolasi: Muhim xatolar uchun qo'llab-quvvatlash sahifasiga yoki aloqa formasiga havola bering. Bu foydalanuvchiga yordam so'rash va muammo haqida xabar berish imkonini beradi.

Zaxira Komponentlarni Amalga Oshirish

Siz zaxira komponentlarni amalga oshirish uchun shartli renderlash yoki `try...catch` iborasidan foydalanishingiz mumkin.

Shartli Renderlash

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      }
    }

    fetchData();
  }, []);

  if (error) {
    return <p>Xato: {error.message}. Iltimos, keyinroq qayta urinib ko'ring.</p>; // Zaxira UI
  }

  if (!data) {
    return <p>Yuklanmoqda...</p>;
  }

  return <div>{/* Ma'lumotlarni shu yerda render qiling */}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

Try...Catch Iborasi

            import React, { useState } from 'react';

function MyComponent() {
  const [content, setContent] = useState(null);

  try {
      //Potensial Xatolikka Moyil Kod
      if (content === null){
          throw new Error("Kontent null");
      }
    return <div>{content}</div>
  } catch (error) {
    return <div>Xatolik yuz berdi: {error.message}</div> // Zaxira UI
  }
}

export default MyComponent;

            

              
                Copy
              
            
          

Zaxira Komponentlarning Afzalliklari

• Yaxshilangan Foydalanuvchi Tajribasi: Xatoliklarga nisbatan silliqroq va informativroq javob beradi.
• Oshirilgan Barqarorlik: Alohida komponentlar ishdan chiqqanda ham ilovaning ishlashda davom etishiga imkon beradi.
• Soddalashtirilgan Tuzatish: Xatolik manbasini aniqlash va ajratib olishga yordam beradi.

Ma'lumotlarni Tekshirish: Xatoliklarni Manbada Oldini Olish

Ma'lumotlarni tekshirish — bu ilovangiz tomonidan ishlatiladigan ma'lumotlarning to'g'ri va izchil ekanligini ta'minlash jarayonidir. Ma'lumotlarni tekshirish orqali siz ko'plab xatolarning birinchi navbatda yuzaga kelishini oldini olishingiz mumkin, bu esa yanada barqaror va ishonchli ilovaga olib keladi.

Ma'lumotlarni Tekshirish Turlari

• Mijoz Tomonida Tekshirish: Ma'lumotlarni serverga yuborishdan oldin brauzerda tekshirish. Bu ishlash samaradorligini oshirishi va foydalanuvchiga darhol fikr-mulohaza bildirish imkonini berishi mumkin.
• Server Tomonida Tekshirish: Ma'lumotlarni mijozdan qabul qilingandan keyin serverda tekshirish. Bu xavfsizlik va ma'lumotlar yaxlitligi uchun zarur.

Tekshirish Usullari

• Turni Tekshirish: Ma'lumotlarning to'g'ri turda ekanligini ta'minlash (masalan, string, number, boolean). TypeScript kabi kutubxonalar bu borada yordam berishi mumkin.
• Formatni Tekshirish: Ma'lumotlarning to'g'ri formatda ekanligini ta'minlash (masalan, elektron pochta manzili, telefon raqami, sana). Buning uchun regulyar ifodalardan foydalanish mumkin.
• Diapazonni Tekshirish: Ma'lumotlarning ma'lum bir diapazonda ekanligini ta'minlash (masalan, yosh, narx).
• Majburiy Maydonlar: Barcha majburiy maydonlar mavjudligini ta'minlash.
• Maxsus Tekshirish: Muayyan talablarga javob berish uchun maxsus tekshirish mantiqini amalga oshirish.

Misol: Foydalanuvchi Kiritgan Ma'lumotlarni Tekshirish

            import React, { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');

  const handleEmailChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);

    // Elektron pochtani oddiy regulyar ifoda yordamida tekshirish
    if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(newEmail)) {
      setEmailError('Yaroqsiz elektron pochta manzili');
    } else {
      setEmailError('');
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (emailError) {
      alert('Iltimos, shakldagi xatolarni to\'g\'irlang.');
      return;
    }
    // Shaklni yuborish
    alert('Shakl muvaffaqiyatli yuborildi!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      {emailError && <div style={{ color: 'red' }}>{emailError}</div>}
      <button type="submit">Yuborish</button>
    </form>
  );
}

export default MyForm;

            

              
                Copy
              
            
          

Ma'lumotlarni Tekshirishning Afzalliklari

• Kamaytirilgan Xatolar: Noto'g'ri ma'lumotlarning ilovaga kirishini oldini oladi.
• Yaxshilangan Xavfsizlik: SQL in'ektsiyasi va saytlararo skripting (XSS) kabi xavfsizlik zaifliklarining oldini olishga yordam beradi.
• Kengaytirilgan Ma'lumotlar Yaxlitligi: Ma'lumotlarning izchil va ishonchli bo'lishini ta'minlaydi.
• Yaxshiroq Foydalanuvchi Tajribasi: Foydalanuvchiga darhol fikr-mulohaza bildiradi, bu ularga ma'lumotlarni yuborishdan oldin xatolarni tuzatish imkonini beradi.

Xatoliklarni Tiklash Uchun Ilg'or Usullar

Xatolik chegaralari, zaxira komponentlar va ma'lumotlarni tekshirishning asosiy strategiyalaridan tashqari, bir nechta ilg'or usullar sizning React ilovalaringizda xatoliklarni tiklashni yanada kuchaytirishi mumkin.

Qayta Urinish Mexanizmlari

Vaqtinchalik xatolar, masalan, tarmoq ulanishi muammolari uchun qayta urinish mexanizmlarini joriy etish foydalanuvchi tajribasini yaxshilashi mumkin. Siz `axios-retry` kabi kutubxonalardan foydalanishingiz yoki `setTimeout` yoki `Promise.retry` (agar mavjud bo'lsa) yordamida o'zingizning qayta urinish mantig'ingizni amalga oshirishingiz mumkin.

            import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3, // qayta urinishlar soni
  retryDelay: (retryCount) => {
    console.log(`qayta urinish: ${retryCount}`);
    return retryCount * 1000; // qayta urinishlar orasidagi vaqt intervali
  },
  retryCondition: (error) => {
    // agar qayta urinish sharti ko'rsatilmagan bo'lsa, sukut bo'yicha idempotent so'rovlar qayta uriniladi
    return error.response.status === 503; // server xatolarida qayta urinish
  },
});

axios
  .get('https://api.example.com/data')
  .then((response) => {
    // muvaffaqiyatli holatni qayta ishlash
  })
  .catch((error) => {
    // qayta urinishlardan keyin xatoni qayta ishlash
  });

            

              
                Copy
              
            
          

"O'chirgich" Patterni (Circuit Breaker Pattern)

"O'chirgich" patterni ilovaning muvaffaqiyatsizlikka uchrashi ehtimoli yuqori bo'lgan operatsiyani qayta-qayta bajarishga urinishining oldini oladi. U ma'lum miqdordagi muvaffaqiyatsizliklar yuzaga kelganda "zanjirni uzish" orqali ishlaydi va ma'lum bir vaqt o'tguncha keyingi urinishlarning oldini oladi. Bu kaskadli nosozliklarning oldini olishga va ilovaning umumiy barqarorligini yaxshilashga yordam beradi.

`opossum` kabi kutubxonalar JavaScript'da "o'chirgich" patternini amalga oshirish uchun ishlatilishi mumkin.

Tezlikni Cheklash (Rate Limiting)

Tezlikni cheklash sizning ilovangizni foydalanuvchi yoki mijoz ma'lum bir vaqt oralig'ida qila oladigan so'rovlar sonini cheklash orqali ortiqcha yuklanishdan himoya qiladi. Bu xizmat ko'rsatishni rad etish (DoS) hujumlarining oldini olishga va ilovangizning sezgirligini saqlab qolishga yordam beradi.

Tezlikni cheklash server darajasida oraliq dasturiy ta'minot yoki kutubxonalar yordamida amalga oshirilishi mumkin. Siz shuningdek, tezlikni cheklash va boshqa xavfsizlik xususiyatlarini ta'minlash uchun Cloudflare yoki Akamai kabi uchinchi tomon xizmatlaridan foydalanishingiz mumkin.

Funksiya Bayroqlarida (Feature Flags) Silliq Degradatsiya

Funksiya bayroqlaridan foydalanish sizga yangi kodni joylashtirmasdan funksiyalarni yoqish va o'chirish imkonini beradi. Bu muammolarga duch kelayotgan funksiyalarni silliq tarzda degradatsiya qilish uchun foydali bo'lishi mumkin. Masalan, agar ma'lum bir funksiya ishlash bilan bog'liq muammolarni keltirib chiqarayotgan bo'lsa, siz muammo hal qilinmaguncha uni funksiya bayrog'i yordamida vaqtincha o'chirib qo'yishingiz mumkin.

LaunchDarkly yoki Split kabi bir nechta xizmatlar funksiya bayroqlarini boshqarishni ta'minlaydi.

Haqiqiy Dunyo Misollari va Eng Yaxshi Amaliyotlar

Keling, React ilovalarida silliq degradatsiyani amalga oshirish bo'yicha ba'zi real dunyo misollari va eng yaxshi amaliyotlarni ko'rib chiqaylik.

Elektron Tijorat Platformasi

• Mahsulot Rasmlari: Agar mahsulot rasmi yuklanmasa, mahsulot nomi bilan o'rinbosar rasm ko'rsating.
• Tavsiya Dvigateli: Agar tavsiya dvigateli ishdan chiqsa, ommabop mahsulotlarning statik ro'yxatini ko'rsating.
• To'lov Shlyuzi: Agar asosiy to'lov shlyuzi ishdan chiqsa, muqobil to'lov usullarini taklif qiling.
• Qidiruv Funktsiyasi: Agar asosiy qidiruv API so'nggi nuqtasi ishlamayotgan bo'lsa, faqat mahalliy ma'lumotlarni qidiradigan oddiy qidiruv shakliga yo'naltiring.

Ijtimoiy Tarmoq Ilovasi

• Yangiliklar Lentasi: Agar foydalanuvchining yangiliklar lentasi yuklanmasa, keshdagi versiyani yoki lenta vaqtincha mavjud emasligini bildiruvchi xabarni ko'rsating.
• Rasm Yuklashlar: Agar rasm yuklash muvaffaqiyatsiz bo'lsa, foydalanuvchilarga yuklashni qayta urinishga yoki boshqa rasmni yuklash uchun zaxira variantini taqdim eting.
• Haqiqiy Vaqtdagi Yangilanishlar: Agar haqiqiy vaqtdagi yangilanishlar mavjud bo'lmasa, yangilanishlar kechikayotganini bildiruvchi xabar ko'rsating.

Global Yangiliklar Veb-sayti

• Mahalliylashtirilgan Kontent: Agar kontentni mahalliylashtirish muvaffaqiyatsiz bo'lsa, standart tilni (masalan, ingliz tili) mahalliylashtirilgan versiya mavjud emasligini bildiruvchi xabar bilan ko'rsating.
• Tashqi API'lar (masalan, Ob-havo, Aksiya Narxlari): Agar tashqi API'lar ishdan chiqsa, keshda saqlash yoki standart qiymatlar kabi zaxira strategiyalaridan foydalaning. Tashqi API chaqiruvlarini boshqarish uchun alohida mikroxizmatdan foydalanishni ko'rib chiqing, bu asosiy ilovani tashqi xizmatlardagi nosozliklardan ajratib turadi.
• Sharhlar Bo'limi: Agar sharhlar bo'limi ishdan chiqsa, "Sharhlar vaqtincha mavjud emas" kabi oddiy xabar bering.

Xatoliklarni Tiklash Strategiyalarini Sinovdan O'tkazish

Xatoliklarni tiklash strategiyalaringiz kutilganidek ishlashini ta'minlash uchun ularni sinovdan o'tkazish juda muhim. Mana bir nechta sinov usullari:

• Birlik Sinovlari (Unit Tests): Xatolik chegaralari va zaxira komponentlarning xatolar yuzaga kelganda to'g'ri render qilinayotganini tekshirish uchun birlik sinovlarini yozing.
• Integratsiya Sinovlari: Turli komponentlarning xatolar mavjudligida to'g'ri o'zaro ta'sir qilishini tekshirish uchun integratsiya sinovlarini yozing.
• Boshidan Oxirigacha Sinovlar (End-to-End Tests): Haqiqiy dunyo stsenariylarini simulyatsiya qilish va xatolar yuzaga kelganda ilovaning silliq ishlashini tekshirish uchun boshidan oxirigacha sinovlarni yozing.
• Nosozliklarni Kiritish Orqali Sinov (Fault Injection Testing): Ilovaning barqarorligini sinash uchun unga ataylab xatolar kiriting. Masalan, siz tarmoq nosozliklari, API xatolari yoki ma'lumotlar bazasi ulanishi muammolarini simulyatsiya qilishingiz mumkin.
• Foydalanuvchi Tomonidan Qabul Qilish Sinovi (UAT): Foydalanuvchilarga ilovani real muhitda sinab ko'rishga imkon bering, bu esa xatolar mavjudligida yuzaga kelishi mumkin bo'lgan har qanday foydalanish qulayligi muammolari yoki kutilmagan xatti-harakatlarni aniqlashga yordam beradi.

Xulosa

React'da silliq degradatsiya strategiyalarini joriy etish mustahkam va barqaror ilovalarni yaratish uchun zarurdir. Xatolik chegaralari, zaxira komponentlar, ma'lumotlarni tekshirish va qayta urinish mexanizmlari hamda "o'chirgich"lar kabi ilg'or usullardan foydalanib, siz hatto muammolar yuzaga kelganda ham silliq va informativ foydalanuvchi tajribasini ta'minlashingiz mumkin. Xatoliklarni tiklash strategiyalaringiz kutilganidek ishlashini ta'minlash uchun ularni sinchkovlik bilan sinovdan o'tkazishni unutmang. Xatoliklarni boshqarishga ustuvorlik berish orqali siz yanada ishonchli, foydalanuvchilar uchun qulay va natijada yanada muvaffaqiyatli React ilovalarini yarata olasiz.