React'i vigade piirid: graatsilised vigade käsitlemise tehnikad tugevate rakenduste jaoks

Veebi arenduse dünaamilises maailmas on oluline luua vastupidavaid ja kasutajasõbralikke rakendusi. React, populaarne JavaScripti teek kasutajaliideste loomiseks, pakub võimsat mehhanismi vigade graatsiliseks käsitlemiseks: vigade piirid. See põhjalik juhend sukeldub vigade piiride kontseptsiooni, uurides nende eesmärki, rakendamist ja parimaid tavasid vastupidavate React'i rakenduste loomiseks.

Vigade piiride vajaduse mõistmine

React'i komponendid on nagu iga kood, vastuvõtlikud vigadele. Need vead võivad tuleneda erinevatest allikatest, sealhulgas:

• Ootamatud andmed: komponendid võivad saada andmeid ootamatus formaadis, mis põhjustab renderdamisprobleeme.
• Loogikavead: veaotsad komponendi loogikas võivad põhjustada ootamatut käitumist ja vigu.
• Välised sõltuvused: probleemid väliste teekidega või API-dega võivad levitada vigu teie komponentidesse.

Ilma õige vigade käsitlemiseta võib React'i komponendi viga põhjustada kogu rakenduse kokkuvarisemise, mille tulemuseks on halb kasutajakogemus. Vigade piirid pakuvad võimalust neid vigu kinni püüda ja takistada nende levikut komponentide puus, tagades, et rakendus jääb funktsionaalseks isegi siis, kui üksikud komponendid ebaõnnestuvad.

Mis on React'i vigade piirid?

Vigade piirid on React'i komponendid, mis püüavad JavaScripti vigu kinni kõikjal oma lapse komponentide puus, logivad need vead ja kuvavad kokkuvarisenud komponentide puu asemel tagasivõtte UI. Need toimivad turvavõrguna, takistades vigadel kogu rakendust kokku kukkumast.

Vigade piiride peamised omadused:

• Ainult klassikomponendid: Vigade piirid tuleb rakendada klassikomponentidena. Funktsionaalseid komponente ja konksusid ei saa kasutada vigade piiride loomiseks.
• Elutsükli meetodid: Nad kasutavad vigade käsitlemiseks spetsiifilisi elutsükli meetodeid, static getDerivedStateFromError() ja componentDidCatch().
• Kohalik vigade käsitlemine: Vigade piirid püüavad kinni ainult vigu oma lapse komponentides, mitte iseendas.

Vigade piiride rakendamine

Kõndigem läbi põhilise vigade piiri komponendi loomise protsess:

1. Vigade piiri komponendi loomine

Esiteks looge uus klassikomponent, näiteks nimega ErrorBoundary:

import React from 'react';

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

  static getDerivedStateFromError(error) {
    // Uuenda olekut, et järgmine renderdus kuvaks tagasivõtte UI.
    return {
      hasError: true
    };
  }

  componentDidCatch(error, errorInfo) {
    // Samuti saate vea logida veaaruandlusteenusesse
    console.error("Püütud viga: ", error, errorInfo);
    // Näide: logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Saate renderdada suvalist kohandatud tagasivõtte UI-d
      return (
        <div>
          <h2>Midagi läks valesti.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Selgitus:

• Konstruktor: Initsialiseerib komponendi oleku väärtusega hasError: false.
• static getDerivedStateFromError(error): See elutsükli meetod kutsutakse pärast seda, kui alamkomponent on vea visanud. See saab argumendina vea ja võimaldab teil komponendi olekut uuendada. Siin seame hasError väärtuseks true, et käivitada tagasivõtte UI. See on static meetod, seega ei saa te funktsiooni sees this kasutada.
• componentDidCatch(error, errorInfo): See elutsükli meetod kutsutakse pärast seda, kui alamkomponent on vea visanud. See saab kaks argumenti:
  • error: viga, mis visati.
  • errorInfo: objekt, mis sisaldab teavet komponendi kuhja kohta, kus viga tekkis. See on hindamatu väärtusega silumisel.

  Selles meetodis saate vea logida teenusesse, nagu Sentry, Rollbar või kohandatud logimislahendusse. Vältige selle funktsiooni sees uuesti renderdamist või vea otse parandamist; selle peamine eesmärk on probleemi logimine.

• render(): renderdamise meetod kontrollib hasError olekut. Kui see on true, renderdab see tagasivõtte UI (sel juhul lihtne veateade). Muul juhul renderdab see komponendi lapsi.

2. Vigade piiri kasutamine

Vigade piiri kasutamiseks mähkige lihtsalt kõik komponendid, mis võivad vea visata, ErrorBoundary komponendiga:

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  // See komponent võib vea visata
  return (
    <ErrorBoundary>
      <PotentiallyBreakingComponent />
    </ErrorBoundary>
  );
}

export default MyComponent;

Kui PotentiallyBreakingComponent viskab vea, püüab ErrorBoundary selle kinni, logib vea ja renderdab tagasivõtte UI.

3. Illustreerivad näited globaalse kontekstiga

Võtke arvesse e-kaubanduse rakendust, mis kuvab tooteinfot, mis on hangitud kaugserverist. Komponent ProductDisplay vastutab toote üksikasjade renderdamise eest. Kuid server võib aeg-ajalt tagastada ootamatuid andmeid, mis põhjustavad renderdamisvigu.

// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product }) {
  // Simuleerige potentsiaalset viga, kui product.price ei ole number
  if (typeof product.price !== 'number') {
    throw new Error('Vigane toote hind');
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Hind: {product.price}</p>
      <img src={product.imageUrl} alt={product.name} />
    </div>
  );
}

export default ProductDisplay;

Selliste vigade eest kaitsmiseks mähkige ProductDisplay komponent ErrorBoundary komponendiga:

// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ProductDisplay from './ProductDisplay';

function App() {
  const product = {
    name: 'Näidistoode',
    price: 'Mitte number', // Tahtlikult vale andmed
    imageUrl: 'https://example.com/image.jpg'
  };

  return (
    <div>
      <ErrorBoundary>
        <ProductDisplay product={product} />
      </ErrorBoundary>
    </div>
  );
}

export default App;

Selle stsenaariumi puhul, kuna product.price on tahtlikult seatud stringiks numbri asemel, viskab ProductDisplay komponent vea. ErrorBoundary püüab selle vea kinni, takistades kogu rakenduse kokkuvarisemist ja kuvab tagasivõtte UI rikutud ProductDisplay komponendi asemel.

4. Vigade piirid rahvusvahelistatud rakendustes

Globaalse publiku jaoks rakenduste loomisel tuleks veateated lokaliseerida, et pakkuda paremat kasutajakogemust. Vigade piire saab kasutada koos rahvusvahelistamise (i18n) teekidega tõlgitud veateadete kuvamiseks.

// ErrorBoundary.js (koos i18n toega)
import React from 'react';
import { useTranslation } from 'react-i18next'; // Eeldades, et kasutate react-i18next

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

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Püütud viga: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      return (
        <FallbackUI error={this.state.error} errorInfo={this.state.errorInfo}/>
      );
    }

    return this.props.children;
  }
}

const FallbackUI = ({error, errorInfo}) => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('error.title')}</h2>
      <p>{t('error.message')}</p>
      <details style={{ whiteSpace: 'pre-wrap' }}>
        {error && error.toString()}<br />
        {errorInfo?.componentStack}
      </details>
    </div>
  );
}


export default ErrorBoundary;

Selles näites kasutame react-i18next, et tõlkida veapealkirja ja -sõnumi tagasivõtte UI-s. t('error.title') ja t('error.message') funktsioonid toovad õiged tõlked tagasi, lähtudes kasutaja valitud keelest.

5. Kaalutlused serveripoolse renderdamise (SSR) jaoks

Vigade piiride kasutamisel serveripoolselt renderdatud rakendustes on väga oluline vigu õigesti käsitleda, et vältida serveri kokkuvarisemist. React'i dokumentatsioon soovitab teil vältida vigade piiride kasutamist renderdamisvigadest taastumiseks serveris. Selle asemel käsitlege vigu enne komponendi renderdamist või renderdage serveris staatiline vealeht.

Parimad tavad vigade piiride kasutamisel

• Mähkige granular komponendid: Mähkige üksikud komponendid või teie rakenduse väikesed sektsioonid vigade piiridega. See takistab ühel vigal kogu UI kokku kukkumist. Kaaluge konkreetsete funktsioonide või moodulite mähkimist, mitte kogu rakendust.
• Logivigad: Kasutage meetodit componentDidCatch() vigade logimiseks jälgimisteenusesse. See aitab teil rakenduses probleeme jälgida ja lahendada. Sentry, Rollbar ja Bugsnag on populaarsed valikud vigade jälgimiseks ja aruandluseks.
• Esitage informatiivne tagasivõtte UI: Kuvage tagasivõtte UI-s kasutajasõbralik veateade. Vältige tehnilist žargooni ja esitage juhiseid, kuidas jätkata (nt lehe värskendamine, tugiteenusega ühenduse võtmine). Võimaluse korral soovitav alternatiivseid tegevusi, mida kasutaja saab teha.
• Ärge kasutage liiga palju: Vältige iga üksiku komponendi mähkimist vigade piiriga. Keskenduge valdkondadele, kus vead on tõenäolisemad, näiteks komponendid, mis toovad andmeid välistest API-dest või käsitlevad keerukaid kasutajaliidese interaktsioone.
• Testige vigade piire: Veenduge, et teie vigade piirid töötavad õigesti, visates tahtlikult vigu komponentidesse, mida nad mähivad. Kirjutage ühik- või integratsioonitestid, et kontrollida, kas tagasivõtte UI kuvatakse ootuspäraselt ja kas vead on õigesti logitud.
• Vigade piirid EI OLE mõeldud:
  • Sündmuste käsitlejad
  • Asünkroonne kood (nt setTimeout või requestAnimationFrame tagasihelistamised)
  • Serveripoolne renderdamine
  • Vead, mis on visatud vigade piiris endas (mitte selle lastes)

Täpsemad vigade käsitlemise strateegiad

1. Kordusmehhanismid

Mõnel juhul on võimalik vea korral taastuda, korrates seda põhjustanud toimingut. Näiteks kui võrgu päring nurjub, võiksite seda pärast lühikest viivitust uuesti proovida. Vigade piire saab kombineerida kordusmehhanismidega, et pakkuda vastupidavamat kasutajakogemust.

// ErrorBoundaryWithRetry.js
import React from 'react';

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

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Püütud viga: ", error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      retryCount: prevState.retryCount + 1,
    }), () => {
      // See sunnib komponenti uuesti renderdama. Mõelge parematele mustritele kontrollitud rekvisiitidega.
      this.forceUpdate(); // HOIATUS: kasutage ettevaatusega
      if (this.props.onRetry) {
          this.props.onRetry();
      }
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Midagi läks valesti.</h2>
          <button onClick={this.handleRetry}>Proovi uuesti</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundaryWithRetry;

Komponent ErrorBoundaryWithRetry sisaldab nuppu Uuesti proovimine, mis vajutamisel lähtestab oleku hasError ja renderdab lastetekomponendid uuesti. Samuti saate lisada retryCount korduskatsete arvu piiramiseks. See lähenemisviis võib olla eriti kasulik mööduvate vigade, näiteks ajutiste võrguühenduse katkestuste korral. Veenduge, et rekvisiit `onRetry` on vastavalt käsitletud ja hangib/teostab uuesti loogika, mis oleks võinud viga põhjustada.

2. Funktsiooni lipud

Funktsioonilipud võimaldavad teil rakenduses funktsioone dünaamiliselt lubada või keelata, ilma uut koodi juurutamata. Vigade piire saab kasutada koos funktsiooni lippudega funktsionaalsuse graatsiliseks degradeerimiseks vea korral. Näiteks kui konkreetne funktsioon põhjustab vigu, saate selle funktsiooni lipu abil keelata ja kuvada kasutajale teate, mis näitab, et funktsioon on ajutiselt kättesaamatu.

3. Voolukatkesti muster

Voolukatkesti muster on tarkvaradisaini muster, mida kasutatakse selleks, et takistada rakendusel korduvalt proovida sooritada toimingut, mis tõenäoliselt ebaõnnestub. See toimib, jälgides toimingu edu ja ebaõnnestumise määra ja "voolu katkestamist" ületades teatava piirmäära, takistades edasisi katseid toimingut teostada teatud aja jooksul. See võib aidata vältida kaskaadseid ebaõnnestumisi ja parandada rakenduse üldist stabiilsust.

Vigade piire saab kasutada voolukatkesti mustri rakendamiseks React'i rakendustes. Kui vigade piir püüab vea kinni, saab see suurendada ebaõnnestumiste loendurit. Kui ebaõnnestumiste loendur ületab piirväärtuse, saab vigade piir kuvada kasutajale teate, mis näitab, et funktsioon on ajutiselt kättesaamatu, ja takistada edasisi katseid toimingut teostada. Pärast teatud aja möödumist saab vigade piir "voolu katkestada" ja lubada katseid toimingut uuesti teostada.

Järeldus

React'i vigade piirid on oluline tööriist vastupidavate ja kasutajasõbralike rakenduste loomiseks. Vigade piiride rakendamisega saate takistada vigadel kogu rakenduse kokkuvarisemist, pakkuda oma kasutajatele graatsilist tagasivõtte UI-d ja logida vigu jälgimisteenustesse silumiseks ja analüüsiks. Järgides selles juhendis kirjeldatud parimaid tavasid ja arenenud strateegiaid, saate luua React'i rakendusi, mis on vastupidavad, usaldusväärsed ja pakuvad positiivset kasutajakogemust isegi ootamatute vigade korral. Pidage meeles, et keskenduge kasulike veateadete esitamisele, mis on lokaliseeritud ülemaailmsele vaatajaskonnale.