React ErrorBoundary: klaidų izoliavimas ir atkūrimo strategijos

Dinamiškame front-end programavimo pasaulyje, ypač dirbant su sudėtingomis komponentinėmis sistemomis, tokiomis kaip „React“, netikėtos klaidos yra neišvengiamos. Jei šios klaidos nėra tinkamai tvarkomos, jos gali sukelti programos gedimus ir prastą vartotojo patirtį. „React“ ErrorBoundary komponentas siūlo patikimą sprendimą, kaip sklandžiai valdyti šias klaidas, jas izoliuoti ir pateikti atkūrimo strategijas. Šis išsamus vadovas nagrinėja ErrorBoundary galią ir parodo, kaip efektyviai jį įdiegti, siekiant sukurti atsparesnes ir patogesnes „React“ programas, skirtas pasaulinei auditorijai.

Klaidų ribų (Error Boundaries) poreikio supratimas

Prieš pradedant diegimą, supraskime, kodėl klaidų ribos yra būtinos. „React“ aplinkoje klaidos, atsirandančios atvaizdavimo metu, gyvavimo ciklo metoduose ar antrinių komponentų konstruktoriuose, gali potencialiai sugadinti visą programą. Taip yra todėl, kad neapdorotos klaidos sklinda aukštyn komponentų medžiu, dažnai sukeldamos tuščią ekraną ar neaiškų klaidos pranešimą. Įsivaizduokite vartotoją Japonijoje, bandantį atlikti svarbią finansinę operaciją, ir staiga susiduriantį su tuščiu ekranu dėl nedidelės klaidos, atrodytų, nesusijusiame komponente. Tai iliustruoja kritinį proaktyvaus klaidų valdymo poreikį.

Klaidų ribos suteikia būdą pagauti JavaScript klaidas bet kurioje jų antrinių komponentų medžio vietoje, registruoti tas klaidas ir rodyti atsarginę vartotojo sąsają (fallback UI), užuot sugadinus komponentų medį. Jos leidžia izoliuoti sugedusius komponentus ir neleisti, kad klaidos vienoje programos dalyje paveiktų kitas, užtikrinant stabilesnę ir patikimesnę vartotojo patirtį visame pasaulyje.

Kas yra React ErrorBoundary?

ErrorBoundary yra „React“ komponentas, kuris pagauna JavaScript klaidas bet kurioje savo antrinių komponentų medžio vietoje, registruoja tas klaidas ir rodo atsarginę vartotojo sąsają. Tai yra klasės komponentas, kuris įgyvendina vieną arba abu iš šių gyvavimo ciklo metodų:

• static getDerivedStateFromError(error): Šis gyvavimo ciklo metodas iškviečiamas po to, kai palikuonio komponente įvyksta klaida. Jis gauna įvykusią klaidą kaip argumentą ir turėtų grąžinti reikšmę, kad atnaujintų komponento būseną.
• componentDidCatch(error, info): Šis gyvavimo ciklo metodas iškviečiamas po to, kai palikuonio komponente įvyksta klaida. Jis gauna du argumentus: įvykusią klaidą ir informacijos objektą, kuriame yra informacija apie tai, kuris komponentas sukėlė klaidą. Šį metodą galite naudoti klaidų informacijai registruoti arba kitiems šalutiniams efektams atlikti.

Pagrindinio ErrorBoundary komponento kūrimas

Sukurkime pagrindinį ErrorBoundary komponentą, kad iliustruotume esminius principus.

Kodo pavyzdys

Štai paprasto ErrorBoundary komponento kodas:

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

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

 componentDidCatch(error, info) {
 // Pavyzdinis „componentStack“:
 // in ComponentThatThrows (created by App)
 // in App
 console.error("Caught an error:", error);
 console.error("Error info:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // Taip pat galite registruoti klaidą klaidų pranešimų tarnyboje
 // logErrorToMyService(error, info.componentStack);
 }

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

 
Kažkas nutiko negerai.
 
Klaida: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Paaiškinimas

• Konstruktorius: Konstruktorius inicializuoja komponento būseną, nustatydamas hasError į false. Taip pat saugome klaidą ir informaciją apie ją derinimo tikslais.
• getDerivedStateFromError(error): Šis statinis metodas iškviečiamas, kai antrinis komponentas sukelia klaidą. Jis atnaujina būseną, nurodydamas, kad įvyko klaida.
• componentDidCatch(error, info): Šis metodas iškviečiamas po to, kai įvyksta klaida. Jis gauna klaidą ir info objektą, kuriame yra informacija apie komponento dėklą (stack). Čia mes registruojame klaidą konsolėje (pakeiskite pageidaujamu registravimo mechanizmu, pvz., „Sentry“, „Bugsnag“ ar savo sukurtu sprendimu). Mes taip pat nustatome klaidą ir informaciją apie ją būsenoje.
• render(): Atvaizdavimo metodas tikrina hasError būseną. Jei ji yra true, jis atvaizduoja atsarginę vartotojo sąsają; kitu atveju – atvaizduoja komponento vaikus. Atsarginė vartotojo sąsaja turėtų būti informatyvi ir patogi vartotojui. Klaidų detalės ir komponentų dėklas, nors ir naudingi programuotojams, turėtų būti atvaizduojami sąlyginai arba pašalinti gamybinėje aplinkoje dėl saugumo priežasčių.

ErrorBoundary komponento naudojimas

Norėdami naudoti ErrorBoundary komponentą, tiesiog apgaubkite juo bet kurį komponentą, kuris gali sukelti klaidą.

Kodo pavyzdys

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* Komponentai, kurie gali sukelti klaidą */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

Paaiškinimas

Šiame pavyzdyje MyComponent yra apgaubtas ErrorBoundary. Jei MyComponent ar jo antriniuose komponentuose įvyks klaida, ErrorBoundary ją pagaus ir atvaizduos atsarginę vartotojo sąsają.

Pažangios ErrorBoundary strategijos

Nors pagrindinis ErrorBoundary suteikia fundamentalų klaidų valdymo lygį, yra keletas pažangių strategijų, kurias galite įgyvendinti, norėdami pagerinti klaidų valdymą.

1. Detalizuotos klaidų ribos

Užuot apgaubus visą programą vienu ErrorBoundary, apsvarstykite galimybę naudoti detalizuotas klaidų ribas. Tai reiškia, kad ErrorBoundary komponentai dedami aplink konkrečias jūsų programos dalis, kurios yra labiau linkusios į klaidas arba kurių gedimas turėtų ribotą poveikį. Pavyzdžiui, galite apgaubti atskirus valdiklius (widgets) ar komponentus, kurie priklauso nuo išorinių duomenų šaltinių.

Pavyzdys

function ProductList() {
 return (
 

 {/* Produktų sąrašas */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* Rekomendacijų variklis */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

Šiame pavyzdyje RecommendationWidget turi savo ErrorBoundary. Jei rekomendacijų variklis sugenda, tai nepaveiks ProductList, ir vartotojas vis tiek galės naršyti produktus. Šis detalizuotas požiūris pagerina bendrą vartotojo patirtį, izoliuodamas klaidas ir neleisdamas joms plisti po visą programą.

2. Klaidų registravimas ir pranešimai

Klaidų registravimas yra labai svarbus derinant ir identifikuojant pasikartojančias problemas. componentDidCatch gyvavimo ciklo metodas yra ideali vieta integruoti su klaidų registravimo paslaugomis, tokiomis kaip „Sentry“, „Bugsnag“ ar „Rollbar“. Šios paslaugos teikia išsamias klaidų ataskaitas, įskaitant dėklo atsekamumą (stack traces), vartotojo kontekstą ir aplinkos informaciją, leidžiančią greitai diagnozuoti ir išspręsti problemas. Apsvarstykite galimybę anonimizuoti ar redaguoti jautrius vartotojo duomenis prieš siunčiant klaidų žurnalus, kad užtikrintumėte atitiktį privatumo reglamentams, tokiems kaip BDAR (GDPR).

Pavyzdys

import * as Sentry from "@sentry/react";

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) {
 // Registruojame klaidą „Sentry“
 Sentry.captureException(error, { extra: info });
 // Taip pat galite registruoti klaidą klaidų pranešimų tarnyboje
 console.error("Caught an error:", error);
 }

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

 
Kažkas nutiko negerai.
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Šiame pavyzdyje componentDidCatch metodas naudoja Sentry.captureException, kad praneštų apie klaidą „Sentry“. Galite sukonfigūruoti „Sentry“, kad siųstų pranešimus jūsų komandai, leidžiant greitai reaguoti į kritines klaidas.

3. Individualizuota atsarginė vartotojo sąsaja

Atsarginė vartotojo sąsaja, rodoma ErrorBoundary, yra galimybė suteikti patogią vartotojo patirtį net ir įvykus klaidoms. Užuot rodę bendrą klaidos pranešimą, apsvarstykite galimybę rodyti informatyvesnį pranešimą, kuris nukreiptų vartotoją link sprendimo. Tai gali būti instrukcijos, kaip atnaujinti puslapį, susisiekti su palaikymo komanda ar bandyti vėliau. Taip pat galite pritaikyti atsarginę vartotojo sąsają pagal įvykusios klaidos tipą.

Pavyzdys

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

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

 componentDidCatch(error, info) {
 console.error("Caught an error:", error);
 // Taip pat galite registruoti klaidą klaidų pranešimų tarnyboje
 // logErrorToMyService(error, info.componentStack);
 }

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

 
Tinklo klaida
 
Patikrinkite savo interneto ryšį ir bandykite dar kartą.
 
 );
 } else {
 return (
 

 
Kažkas nutiko negerai.
 
Bandykite atnaujinti puslapį arba susisiekite su palaikymo komanda.
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Šiame pavyzdyje atsarginė vartotojo sąsaja tikrina, ar klaida yra NetworkError. Jei taip, ji rodo konkretų pranešimą, nurodantį vartotojui patikrinti interneto ryšį. Kitu atveju rodomas bendras klaidos pranešimas. Pateikdami konkrečius, veiksmingus nurodymus, galite žymiai pagerinti vartotojo patirtį.

4. Pakartotinio bandymo mechanizmai

Kai kuriais atvejais klaidos yra laikinos ir gali būti išspręstos pakartojus operaciją. Galite įdiegti pakartotinio bandymo mechanizmą ErrorBoundary viduje, kad automatiškai pakartotumėte nepavykusią operaciją po tam tikro laiko tarpo. Tai gali būti ypač naudinga tvarkant tinklo klaidas ar laikinus serverio sutrikimus. Būkite atsargūs diegdami pakartotinio bandymo mechanizmus operacijoms, kurios gali turėti šalutinį poveikį, nes jų kartojimas gali sukelti nenumatytų pasekmių.

Pavyzdys

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

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP klaida! būsena: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // Eksponentinis atsitraukimas
 console.log(`Bandoma iš naujo po ${retryDelay / 1000} sekundžių...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // Išvalome laikmatį atjungiant arba perpiešiant komponentą
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
Kraunami duomenys...
;
 }

 if (error) {
 return 
Klaida: {error.message} - Bandyta pakartoti {retryCount} kartus.
;
 }

 return 
Duomenys: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

Šiame pavyzdyje DataFetchingComponent bando gauti duomenis iš API. Jei įvyksta klaida, jis padidina retryCount ir pakartoja operaciją po eksponentiškai didėjančio laiko tarpo. ErrorBoundary pagauna visas neapdorotas išimtis ir rodo klaidos pranešimą, įskaitant pakartotinių bandymų skaičių.

5. Klaidų ribos ir serverio pusės atvaizdavimas (SSR)

Naudojant serverio pusės atvaizdavimą (SSR), klaidų valdymas tampa dar svarbesnis. Klaidos, atsirandančios serverio pusės atvaizdavimo proceso metu, gali sugadinti visą serverį, sukeldamos prastovas ir prastą vartotojo patirtį. Turite užtikrinti, kad jūsų klaidų ribos būtų tinkamai sukonfigūruotos klaidoms gaudyti tiek serveryje, tiek kliento pusėje. Dažnai SSR sistemos, tokios kaip „Next.js“ ir „Remix“, turi savo integruotus klaidų valdymo mechanizmus, kurie papildo „React Error Boundaries“.

6. Klaidų ribų testavimas

Klaidų ribų testavimas yra būtinas siekiant užtikrinti, kad jos veiktų teisingai ir pateiktų numatytą atsarginę vartotojo sąsają. Naudokite testavimo bibliotekas, tokias kaip „Jest“ ir „React Testing Library“, kad imituotumėte klaidų sąlygas ir patikrintumėte, ar jūsų klaidų ribos pagauna klaidas ir atvaizduoja tinkamą atsarginę vartotojo sąsają. Apsvarstykite galimybę testuoti skirtingų tipų klaidas ir kraštutinius atvejus, kad užtikrintumėte, jog jūsų klaidų ribos yra patikimos ir tvarko platų scenarijų spektrą.

Pavyzdys

import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
 throw new Error('Šis komponentas sukelia klaidą');
 return 
Tai neturėtų būti atvaizduota
;
}

test('atvaizduoja atsarginę vartotojo sąsają, kai įvyksta klaida', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/Kažkas nutiko negerai/i);
 expect(errorMessage).toBeInTheDocument();
});

Šis testas atvaizduoja komponentą, kuris sukelia klaidą ErrorBoundary viduje. Tada jis patikrina, ar atsarginė vartotojo sąsaja yra atvaizduota teisingai, tikrindamas, ar klaidos pranešimas yra dokumente.

7. Laipsniškas funkcionalumo mažinimas (Graceful Degradation)

Klaidų ribos yra pagrindinis komponentas įgyvendinant laipsnišką funkcionalumo mažinimą jūsų „React“ programose. Laipsniškas funkcionalumo mažinimas yra praktika projektuoti programą taip, kad ji toliau veiktų, nors ir su sumažintu funkcionalumu, net kai jos dalys sugenda. Klaidų ribos leidžia izoliuoti sugedusius komponentus ir neleisti jiems paveikti likusios programos dalies. Pateikdami atsarginę vartotojo sąsają ir alternatyvų funkcionalumą, galite užtikrinti, kad vartotojai vis dar galės pasiekti esmines funkcijas net ir įvykus klaidoms.

Dažniausios klaidos, kurių reikia vengti

Nors ErrorBoundary yra galingas įrankis, yra keletas dažniausių klaidų, kurių reikėtų vengti:

• Neapgaubti asinchroninio kodo: ErrorBoundary gaudo klaidas tik atvaizdavimo metu, gyvavimo ciklo metoduose ir konstruktoriuose. Klaidos asinchroniniame kode (pvz., setTimeout, Promises) turi būti gaudomos naudojant try...catch blokus ir atitinkamai tvarkomos asinchroninėje funkcijoje.
• Pernelyg dažnas klaidų ribų naudojimas: Venkite apgaubti dideles programos dalis vienu ErrorBoundary. Tai gali apsunkinti klaidų šaltinio nustatymą ir lemti, kad bendra atsarginė vartotojo sąsaja bus rodoma per dažnai. Naudokite detalizuotas klaidų ribas, kad izoliuotumėte konkrečius komponentus ar funkcijas.
• Klaidų informacijos ignoravimas: Ne tik gaudykite klaidas ir rodykite atsarginę vartotojo sąsają. Būtinai registruokite klaidų informaciją (įskaitant komponento dėklą) klaidų pranešimų tarnyboje arba savo konsolėje. Tai padės jums diagnozuoti ir ištaisyti pagrindines problemas.
• Jautrios informacijos rodymas gamybinėje aplinkoje: Venkite rodyti išsamią klaidų informaciją (pvz., dėklo atsekamumą) gamybinėje aplinkoje. Tai gali atskleisti jautrią informaciją vartotojams ir kelti saugumo riziką. Vietoj to, rodykite patogų vartotojui klaidos pranešimą ir registruokite išsamią informaciją klaidų pranešimų tarnyboje.

Klaidų ribos su funkciniais komponentais ir „Hooks“

Nors klaidų ribos yra įgyvendinamos kaip klasės komponentai, vis tiek galite jas efektyviai naudoti klaidoms tvarkyti funkciniuose komponentuose, kurie naudoja „Hooks“. Įprastas požiūris yra apgaubti funkcinį komponentą ErrorBoundary komponentu, kaip parodyta anksčiau. Klaidų valdymo logika yra ErrorBoundary viduje, efektyviai izoliuodama klaidas, kurios gali atsirasti funkcinio komponento atvaizdavimo ar „Hooks“ vykdymo metu.

Konkrečiai, bet kokios klaidos, įvykusios funkcinio komponento atvaizdavimo metu ar useEffect „Hook“ viduje, bus pagautos ErrorBoundary. Tačiau svarbu pažymėti, kad ErrorBoundaries negaudo klaidų, kurios atsiranda įvykių tvarkyklėse (pvz., onClick, onChange), priskirtose DOM elementams funkciniame komponente. Įvykių tvarkyklėms turėtumėte ir toliau naudoti tradicinius try...catch blokus klaidų valdymui.

Klaidų pranešimų internacionalizavimas ir lokalizavimas

Kuriant programas pasaulinei auditorijai, labai svarbu internacionalizuoti ir lokalizuoti klaidų pranešimus. Klaidų pranešimai, rodomi ErrorBoundary atsarginėje vartotojo sąsajoje, turėtų būti išversti į vartotojo pageidaujamą kalbą, kad būtų užtikrinta geresnė vartotojo patirtis. Galite naudoti bibliotekas, tokias kaip i18next ar „React Intl“, kad valdytumėte vertimus ir dinamiškai rodytumėte atitinkamą klaidos pranešimą, atsižvelgiant į vartotojo lokalę.

Pavyzdys naudojant i18next

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': 'Something went wrong. Please try again later.',
        'error.network': 'Network error. Please check your internet connection.',
      },
    },
    lt: {
      translation: {
        'error.generic': 'Kažkas nutiko negerai. Bandykite vėliau dar kartą.',
        'error.network': 'Tinklo klaida. Patikrinkite savo interneto ryšį.',
      },
    },
  },
  lng: 'lt', // Nustatome lietuvių kalbą
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // nereikalinga react, nes jis pats tai daro
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // Atnaujiname būseną, kad kitas atvaizdavimas parodytų atsarginę vartotojo sąsają
    // return { hasError: true }; // tai neveikia su „Hooks“ taip, kaip yra
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // Galite atvaizduoti bet kokią pasirinktinę atsarginę vartotojo sąsają
    return ;
  }

  return children;
}

export default ErrorBoundary;

Šiame pavyzdyje mes naudojame i18next vertimams valdyti anglų ir lietuvių kalbomis. ErrorFallback komponentas naudoja useTranslation „Hook“, kad gautų atitinkamą klaidos pranešimą pagal dabartinę kalbą. Tai užtikrina, kad vartotojai matytų klaidų pranešimus savo pageidaujama kalba, gerinant bendrą vartotojo patirtį.

Išvada

„React“ ErrorBoundary komponentai yra esminis įrankis kuriant patikimas ir patogias „React“ programas. Įdiegę klaidų ribas, galite sklandžiai valdyti klaidas, išvengti programos gedimų ir suteikti geresnę vartotojo patirtį vartotojams visame pasaulyje. Suprasdami klaidų ribų principus, įgyvendindami pažangias strategijas, tokias kaip detalizuotos klaidų ribos, klaidų registravimas ir individualizuotos atsarginės vartotojo sąsajos, bei vengdami dažniausių klaidų, galite sukurti atsparesnes ir patikimesnes „React“ programas, atitinkančias pasaulinės auditorijos poreikius. Nepamirškite atsižvelgti į internacionalizavimą ir lokalizavimą rodydami klaidų pranešimus, kad suteiktumėte tikrai įtraukią vartotojo patirtį. Didėjant interneto programų sudėtingumui, klaidų valdymo technikų įvaldymas taps vis svarbesnis programuotojams, kuriantiems aukštos kokybės programinę įrangą.