M

MLOG

Lietuvių

Išmokite įdiegti React klaidų ribas (Error Boundaries), kad galėtumėte sklandžiai apdoroti klaidas, išvengti programos gedimų ir pagerinti vartotojo patirtį. Susipažinkite su geriausiomis praktikomis, pažangiomis technikomis ir realiais pavyzdžiais.

React klaidų ribos (Error Boundaries): išsamus patikimo klaidų apdorojimo vadovas

Šiuolaikinio žiniatinklio programavimo pasaulyje sklandi ir patikima vartotojo patirtis yra svarbiausia. Viena neapdorota klaida gali sugadinti visą React programą, palikdama vartotojus nusivylusius ir potencialiai prarandančius vertingus duomenis. React klaidų ribos (Error Boundaries) suteikia galingą mechanizmą, leidžiantį sklandžiai apdoroti šias klaidas, išvengti katastrofiškų gedimų ir pasiūlyti atsparesnę bei vartotojui draugiškesnę patirtį. Šiame vadove pateikiama išsami React klaidų ribų apžvalga, apimanti jų paskirtį, įgyvendinimą, geriausias praktikas ir pažangias technikas.

Kas yra React klaidų ribos (Error Boundaries)?

Klaidų ribos yra React komponentai, kurie pagauna JavaScript klaidas bet kurioje savo vaikinių komponentų medžio vietoje, registruoja šias klaidas ir vietoj sugedusio komponentų medžio rodo atsarginę vartotojo sąsają. Jie veikia kaip apsauginis tinklas, neleidžiantis klaidoms vienoje programos dalyje sugadinti visos vartotojo sąsajos. Pristatytos React 16 versijoje, klaidų ribos pakeitė ankstesnius, mažiau patikimus klaidų apdorojimo mechanizmus.

Galvokite apie klaidų ribas kaip apie `try...catch` blokus React komponentams. Tačiau, skirtingai nei `try...catch`, jie veikia komponentams, suteikdami deklaratyvų ir daugkartinio naudojimo būdą apdoroti klaidas visoje programoje.

Kodėl verta naudoti klaidų ribas?

Klaidų ribos siūlo keletą esminių privalumų:

Klaidų ribos komponento kūrimas

Norėdami sukurti klaidų ribos komponentą, turite apibrėžti klasės komponentą, kuris įgyvendina vieną arba abu iš šių gyvavimo ciklo metodų:

Štai pagrindinis klaidų ribos komponento pavyzdys:


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atnaujiname būseną, kad kitas atvaizdavimas parodytų atsarginę vartotojo sąsają.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Pavyzdys "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Pagauta klaida: ", error, info.componentStack);
    // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę vartotojo sąsają
      return 
Kažkas nutiko negerai.
;
    }

    return this.props.children; 
  }
}

Paaiškinimas:

Klaidų ribų naudojimas

Norėdami naudoti klaidų ribą, tiesiog apgaubkite komponentą ar komponentus, kuriuos norite apsaugoti, ErrorBoundary komponentu:

Jei ComponentThatMightThrow išmes klaidą, ErrorBoundary pagaus klaidą, atnaujins savo būseną ir atvaizduos savo atsarginę vartotojo sąsają. Likusi programos dalis veiks normaliai.

Klaidų ribų išdėstymas

Klaidų ribų išdėstymas yra labai svarbus efektyviam klaidų apdorojimui. Apsvarstykite šias strategijas:

Pavyzdys:


function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        

      
    

  );
}

Šiame pavyzdyje kiekviena pagrindinė programos dalis (antraštė, šoninė juosta, turinio sritis, poraštė) yra apgaubta klaidų riba. Tai leidžia kiekvienai sekcijai savarankiškai apdoroti klaidas, neleidžiant vienai klaidai paveikti visos programos.

Atsarginės vartotojo sąsajos pritaikymas

Klaidų ribos rodoma atsarginė vartotojo sąsaja turėtų būti informatyvi ir draugiška vartotojui. Apsvarstykite šias gaires:

Pavyzdys:


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atnaujiname būseną, kad kitas atvaizdavimas parodytų atsarginę vartotojo sąsają.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje
    console.error("Pagauta klaida: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę vartotojo sąsają
      return (
        

          
Oi! Kažkas nutiko negerai.

          
Atsiprašome, bet bandant parodyti šį turinį įvyko klaida.

          
Bandykite atnaujinti puslapį arba susisiekite su palaikymo komanda, jei problema išlieka.

          
          Susisiekti su palaikymo komanda
        

      );
    }

    return this.props.children; 
  }
}

Šis pavyzdys rodo informatyvesnę atsarginę vartotojo sąsają, kurioje yra aiškus klaidos pranešimas, siūlomi sprendimai ir nuorodos puslapiui atnaujinti bei susisiekti su palaikymo komanda.

Skirtingų tipų klaidų apdorojimas

Klaidų ribos pagauna klaidas, kurios atsiranda atvaizdavimo metu, gyvavimo ciklo metoduose ir viso po jomis esančio medžio konstruktoriuose. Jos *negaudo* klaidų, kylančių:

Norėdami apdoroti šių tipų klaidas, turite naudoti skirtingas technikas.

Įvykių apdorojimo funkcijos

Klaidoms, kurios atsiranda įvykių apdorojimo funkcijose, naudokite standartinį try...catch bloką:


function MyComponent() {
  const handleClick = () => {
    try {
      // Kodas, kuris gali išmesti klaidą
      throw new Error("Kažkas nutiko negerai įvykio apdorojimo funkcijoje");
    } catch (error) {
      console.error("Klaida įvykio apdorojimo funkcijoje: ", error);
      // Apdorokite klaidą (pvz., parodykite klaidos pranešimą)
      alert("Įvyko klaida. Bandykite dar kartą.");
    }
  };

  return ;
}

Asinchroninis kodas

Klaidoms, kurios atsiranda asinchroniniame kode, naudokite try...catch blokus asinchroninės funkcijos viduje:


function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // Apdorokite duomenis
        console.log(data);
      } catch (error) {
        console.error("Klaida gaunant duomenis: ", error);
        // Apdorokite klaidą (pvz., parodykite klaidos pranešimą)
        alert("Nepavyko gauti duomenų. Bandykite vėliau.");
      }
    }

    fetchData();
  }, []);

  return 
Kraunami duomenys...
;
}

Arba galite naudoti visuotinį klaidų apdorojimo mechanizmą neapdorotiems pažadų (promise) atmetimams:


window.addEventListener('unhandledrejection', function(event) {
  console.error('Neapdorotas atmetimas (pažadas: ', event.promise, ', priežastis: ', event.reason, ');');
  // Pasirinktinai parodykite visuotinį klaidos pranešimą arba registruokite klaidą tarnyboje
  alert("Įvyko netikėta klaida. Bandykite vėliau.");
});

Pažangios klaidų ribų technikos

Klaidų ribos atstatymas

Kai kuriais atvejais galbūt norėsite suteikti vartotojams galimybę atstatyti klaidų ribą ir pakartoti operaciją, kuri sukėlė klaidą. Tai gali būti naudinga, jei klaidą sukėlė laikina problema, pavyzdžiui, tinklo sutrikimas.

Norėdami atstatyti klaidų ribą, galite naudoti būsenos valdymo biblioteką, pvz., Redux ar Context, kad valdytumėte klaidos būseną ir pateiktumėte atstatymo funkciją. Arba galite naudoti paprastesnį metodą, priverstinai perkraudami klaidų ribą.

Pavyzdys (priverstinis perkrovimas):


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorCount: 0, key: 0 };
  }

  static getDerivedStateFromError(error) {
    // Atnaujiname būseną, kad kitas atvaizdavimas parodytų atsarginę vartotojo sąsają.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje
    console.error("Pagauta klaida: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę vartotojo sąsają
      return (
        

          
Oi! Kažkas nutiko negerai.

          
Atsiprašome, bet bandant parodyti šį turinį įvyko klaida.

          
        

      );
    }

    return 
{this.props.children}
;
  }
}

Šiame pavyzdyje prie apgaubiančio div elemento pridedamas 'raktas' (key). Rakto pakeitimas priverčia komponentą persikrauti, efektyviai išvalant klaidos būseną. `resetError` metodas atnaujina komponento `key` būseną, priversdamas komponentą persikrauti ir iš naujo atvaizduoti savo vaikus.

Klaidų ribų naudojimas su Suspense

React Suspense leidžia jums „sustabdyti“ komponento atvaizdavimą, kol nebus įvykdyta tam tikra sąlyga (pvz., gauti duomenys). Galite derinti klaidų ribas su Suspense, kad užtikrintumėte patikimesnį klaidų apdorojimą asinchroninėms operacijoms.


import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      Kraunama...
}> ); } function DataFetchingComponent() { const data = useData(); // Pasirinktinis hook'as, kuris asinchroniškai gauna duomenis return
{data.value}
; }

Šiame pavyzdyje DataFetchingComponent asinchroniškai gauna duomenis naudodamas pasirinktinį hook'ą. Suspense komponentas rodo krovimo indikatorių, kol duomenys gaunami. Jei duomenų gavimo proceso metu įvyks klaida, ErrorBoundary pagaus klaidą ir parodys atsarginę vartotojo sąsają.

Geriausios React klaidų ribų praktikos

Realaus pasaulio pavyzdžiai

Štai keletas realaus pasaulio pavyzdžių, kaip galima naudoti klaidų ribas:

Alternatyvos klaidų riboms

Nors klaidų ribos yra rekomenduojamas būdas apdoroti klaidas React aplinkoje, yra keletas alternatyvių metodų, kuriuos galite apsvarstyti. Tačiau atminkite, kad šios alternatyvos gali būti ne tokios veiksmingos kaip klaidų ribos užkertant kelią programos gedimams ir užtikrinant sklandžią vartotojo patirtį.

Galiausiai, klaidų ribos suteikia patikimą ir standartizuotą požiūrį į klaidų apdorojimą React aplinkoje, todėl daugeliu atvejų jos yra pageidautinas pasirinkimas.

Išvada

React klaidų ribos yra esminis įrankis kuriant patikimas ir vartotojui draugiškas React programas. Gaudydamos klaidas ir rodydamos atsargines vartotojo sąsajas, jos užkerta kelią programų gedimams, gerina vartotojo patirtį ir supaprastina klaidų derinimą. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite efektyviai įdiegti klaidų ribas savo programose ir sukurti atsparesnę bei patikimesnę vartotojo patirtį vartotojams visame pasaulyje.