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ų:

• Užkerta kelią programos gedimams: Svarbiausias privalumas yra užkirsti kelią vieno komponento klaidai sugadinti visą programą. Vietoj tuščio ekrano ar nepadedančio klaidos pranešimo, vartotojai mato sklandžią atsarginę vartotojo sąsają.
• Pagerina vartotojo patirtį: Rodydamos atsarginę vartotojo sąsają, klaidų ribos leidžia vartotojams toliau naudotis tomis programos dalimis, kurios vis dar veikia teisingai. Tai leidžia išvengti staigios ir varginančios patirties.
• Izoliuoja klaidas: Klaidų ribos padeda izoliuoti klaidas konkrečiose programos dalyse, todėl lengviau nustatyti ir pašalinti problemos priežastį.
• Pagerintas registravimas ir stebėjimas: Klaidų ribos suteikia centralizuotą vietą klaidoms, atsirandančioms jūsų programoje, registruoti. Ši informacija gali būti neįkainojama norint proaktyviai nustatyti ir ištaisyti problemas. Tai gali būti susieta su stebėjimo paslaugomis, tokiomis kaip Sentry, Rollbar ar Bugsnag, kurios visos turi pasaulinę aprėptį.
• Išlaiko programos būseną: Vietoj to, kad prarastumėte visą programos būseną dėl gedimo, klaidų ribos leidžia likusiai programos daliai toliau veikti, išsaugant vartotojo progresą ir duomenis.

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ų:

• static getDerivedStateFromError(error): Šis statinis metodas iškviečiamas po to, kai palikuonio komponentas išmetė klaidą. Jis gauna išmestą klaidą kaip argumentą ir turėtų grąžinti reikšmę, kad atnaujintų būseną ir atvaizduotų atsarginę vartotojo sąsają.
• componentDidCatch(error, info): Šis metodas iškviečiamas po to, kai palikuonio komponentas išmetė klaidą. Jis gauna išmestą klaidą, taip pat info objektą, kuriame yra informacija apie tai, kuris komponentas išmetė klaidą. Šį metodą galite naudoti klaidai registruoti ar atlikti kitus šalutinius poveikius.

Š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:

• ErrorBoundary komponentas yra klasės komponentas, kuris praplečia React.Component.
• Konstruktorius inicializuoja būseną su hasError: false. Ši vėliavėlė bus naudojama nustatyti, ar atvaizduoti atsarginę vartotojo sąsają.
• static getDerivedStateFromError(error) yra statinis metodas, kuris gauna išmestą klaidą. Jis atnaujina būseną į hasError: true, kas sukels atsarginės vartotojo sąsajos atvaizdavimą.
• componentDidCatch(error, info) yra gyvavimo ciklo metodas, kuris gauna klaidą ir info objektą, kuriame yra informacija apie komponentų dėklą (component stack). Jis naudojamas klaidai registruoti konsolėje. Gamybinėje programoje paprastai registruotumėte klaidą klaidų pranešimo tarnyboje.
• render() metodas tikrina hasError būseną. Jei ji yra teisinga, jis atvaizduoja atsarginę vartotojo sąsają (šiuo atveju, paprastą

  žymą). Priešingu atveju, jis atvaizduoja komponento vaikus.

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:

• Aukščiausio lygio klaidų ribos: Apgaubkite visą programą klaidų riba, kad pagautumėte visas neapdorotas klaidas ir išvengtumėte visiško programos gedimo. Tai suteikia pagrindinį apsaugos lygį.
• Granuliuotos klaidų ribos: Apgaubkite konkrečius komponentus ar programos dalis klaidų ribomis, kad izoliuotumėte klaidas ir pateiktumėte labiau pritaikytas atsargines vartotojo sąsajas. Pavyzdžiui, galite apgaubti komponentą, kuris gauna duomenis iš išorinės API, klaidų riba.
• Puslapio lygio klaidų ribos: Apsvarstykite galimybę dėti klaidų ribas aplink visus puslapius ar maršrutus jūsų programoje. Tai neleis klaidai viename puslapyje paveikti kitų puslapių.

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:

• Pateikite aiškų klaidos pranešimą: Rodykite glaustą ir informatyvų klaidos pranešimą, kuris paaiškina, kas nutiko negerai. Venkite techninio žargono ir naudokite kalbą, kurią vartotojams lengva suprasti.
• Pasiūlykite sprendimus: Pasiūlykite vartotojui galimus sprendimus, pavyzdžiui, atnaujinti puslapį, pabandyti vėliau arba susisiekti su palaikymo komanda.
• Išlaikykite prekės ženklo nuoseklumą: Užtikrinkite, kad atsarginė vartotojo sąsaja atitiktų bendrą jūsų programos dizainą ir prekės ženklą. Tai padeda išlaikyti nuoseklią vartotojo patirtį.
• Suteikite galimybę pranešti apie klaidą: Įtraukite mygtuką ar nuorodą, leidžiančią vartotojams pranešti apie klaidą jūsų komandai. Tai gali suteikti vertingos informacijos derinant ir taisant problemas.

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.
           window.location.reload()}>Atnaujinti puslapį
          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ų:

• Įvykių apdorojimo funkcijose (event handlers)
• Asinchroniniame kode (pvz., setTimeout, requestAnimationFrame)
• Serverio pusės atvaizdavime
• Klaidų, išmestų pačioje klaidų riboje (o ne jos vaikuose)

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 Spausk mane;
}

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.
          Bandykite dar kartą
        
      );
    }

    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...