React use Hook -Virheiden eteneminen: resurssien latausketjun hallinta

Nykyaikaiset React-sovellukset luottavat usein tiedon hakemiseen eri lähteistä – API-rajapinnoista, tietokannoista tai jopa paikallisesta tallennustilasta. Kun nämä resurssien lataustoiminnot epäonnistuvat, on ratkaisevan tärkeää käsitellä virheet tyylikkäästi ja tarjota käyttäjälle mielekäs kokemus. Tässä artikkelissa tarkastellaan, miten virheitä hallitaan ja levitetään tehokkaasti React-sovelluksissa mukautetuilla koukuilla, virherajoilla ja vankalla virheenkäsittelystrategialla.

Virheiden etenemisen haasteen ymmärtäminen

Tyypillisessä React-komponenttipuussa virheitä voi esiintyä eri tasoilla. Tietoja hakeva komponentti voi kohdata verkkovirheen, jäsentämisvirheen tai validointivirheen. Ihannetilanteessa nämä virheet tulisi havaita ja käsitellä asianmukaisesti, mutta virheen kirjaaminen vain komponenttiin, jossa se syntyy, ei useinkaan riitä. Tarvitsemme mekanismin:

• Ilmoittaa virhe keskitettyyn sijaintiin: Tämä mahdollistaa lokituksen, analytiikan ja mahdolliset uudelleenyritykset.
• Näyttää käyttäjäystävällinen virheviesti: Rikkinäisen käyttöliittymän sijaan tiedota käyttäjälle ongelmasta ja ehdota mahdollisia ratkaisuja.
• Estää kaskadivirheet: Virhe yhdessä komponentissa ei saa kaataa koko sovellusta.

Tässä virheiden eteneminen tulee kuvaan mukaan. Virheiden eteneminen sisältää virheen siirtämisen komponenttipuussa ylöspäin, kunnes se saavuttaa sopivan virheenkäsittelyrajan. Reactin virherajat on suunniteltu havaitsemaan virheet, jotka tapahtuvat niiden lapsikomponenttien renderöinnin, elinkaarimetodien ja konstruktorien aikana, mutta ne eivät luonnostaan käsittele asynkronisissa toiminnoissa, kuten useEffect-toiminnossa, syntyviä virheitä. Tässä mukautetut koukut voivat kuroa kuilun umpeen.

Mukautettujen koukkujen hyödyntäminen virheiden käsittelyyn

Mukautetut koukut mahdollistavat uudelleenkäytettävän logiikan, mukaan lukien virheiden käsittelyn, kapseloinnin yhdeksi, sommittavaksi yksiköksi. Luodaan mukautettu koukku, useFetch, joka käsittelee tiedon hakemisen ja virheiden hallinnan.

Esimerkki: Perus useFetch-koukku

Tässä on yksinkertaistettu versio useFetch-koukusta:

            
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Tyhjennä mahdolliset aiemmat virheet
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

            

              
                Copy
              
            
          

Tämä koukku hakee tietoja annetusta URL-osoitteesta ja hallitsee lataustilaa ja mahdollisia virheitä. error-tilamuuttuja sisältää kaikki virheet, jotka ilmenevät hakemisprosessin aikana.

Virheen siirtäminen ylöspäin

Parannetaan nyt tätä koukkua levittämään virhe ylöspäin kontekstin avulla. Tämän ansiosta pääkomponentit voivat saada ilmoituksen useFetch-koukussa tapahtuvista virheistä.

1. Luo virhekonteksti

Ensinnäkin luomme React-kontekstin, joka sisältää virheenkäsittelijäfunktion:

            
import { createContext, useContext } from 'react';

const ErrorContext = createContext(null);

export const ErrorProvider = ErrorContext.Provider;

export const useError = () => useContext(ErrorContext);

            

              
                Copy
              
            
          

2. Muokkaa useFetch-koukkua

Muokkaamme nyt useFetch-koukkua käyttämään virhekontekstia:

            
import { useState, useEffect } from 'react';
import { useError } from './ErrorContext';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [localError, setLocalError] = useState(null); // Paikallinen virhetila
  const handleError = useError(); // Hae virheenkäsittelijä kontekstista

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLocalError(null);
      } catch (e) {
        setLocalError(e);
        if (handleError) {
          handleError(e); // Levitä virhe kontekstiin
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, handleError]);

  // Palauta sekä data että paikallinen virhe. Komponentti voi päättää, kumpi näytetään.
  return { data, loading, localError };
}

export default useFetch;

            

              
                Copy
              
            
          

Huomaa, että meillä on nyt kaksi virhetilaa: localError, jota hallitaan koukun sisällä, ja kontekstin kautta välitetty virhe. Käytämme localError sisäisesti, mutta siihen pääsee käsiksi myös komponenttikohtaisesti.

3. Kääri sovellus ErrorProviderin ympärille

Sovelluksesi juurella, kääri useFetch-koukkua käyttävät komponentit ErrorProvider-komponentin ympärille. Tämä tarjoaa virheenkäsittelykontekstin kaikille lapsikomponenteille:

            
import React, { useState } from 'react';
import { ErrorProvider } from './ErrorContext';
import MyComponent from './MyComponent';

function App() {
  const [globalError, setGlobalError] = useState(null);

  const handleError = (error) => {
    console.error("Virhe havaittu ylimmällä tasolla:", error);
    setGlobalError(error);
  };

  return (
    
      {globalError ? (
        
Virhe: {globalError.message}
      ) : (
        
      )}
    
  );
}

export default App;

            

              
                Copy
              
            
          

4. useFetch-koukun käyttäminen komponentissa

            
import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading, localError } = useFetch('https://api.example.com/data');

  if (loading) {
    return 
Ladataan...
;
  }

  if (localError) {
    return 
Virhe ladattaessa tietoja: {localError.message}
;
  }

  return (
    

      
Tiedot:
      
{JSON.stringify(data, null, 2)}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Selitys

• Virhekonteksti: ErrorContext tarjoaa tavan jakaa virheenkäsittelyfunktio (handleError) komponenttien välillä.
• Virheiden eteneminen: Kun virhe ilmenee useFetch-toiminnossa, handleError-funktiota kutsutaan, jolloin virhe leviää ylöspäin App-komponenttiin.
• Keskitetty virheiden käsittely: App-komponentti voi nyt käsitellä virheen keskitetysti, lokittaa sen, näyttää virheviestin tai ryhtyä muihin asianmukaisiin toimiin.

Virherajat: Turvaverkko odottamattomille virheille

Vaikka mukautetut koukut ja konteksti tarjoavat tavan käsitellä virheitä asynkronisista toiminnoista, virherajat ovat välttämättömiä odottamattomien virheiden havaitsemiseksi, jotka voivat tapahtua renderöinnin aikana. Virherajat ovat React-komponentteja, jotka havaitsevat JavaScript-virheet lapsikomponenttipuussaan, kirjaavat nämä virheet ja näyttävät varakäyttöliittymän kaatuneen komponenttipuun sijaan. Ne havaitsevat virheitä renderöinnin aikana, elinkaarimenetelmissä ja konstruktoreissa koko niiden alla olevassa puussa.

Virherajakomponentin luominen

            
import React from 'react';

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

  static getDerivedStateFromError(error) {
    // Päivitä tila, jotta seuraava renderöinti näyttää varakäyttöliittymän.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Voit myös kirjata virheen virheraportointipalveluun
    console.error("Virhe havaittu ErrorBoundaryssa:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Voit renderöidä mitä tahansa mukautettua varakäyttöliittymää
      return (
        

          
Jokin meni pieleen.
          

            {this.state.error && this.state.error.toString()}\n			

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

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Virherajan käyttäminen

Kääri mikä tahansa komponentti, joka voi mahdollisesti aiheuttaa virheen, ErrorBoundary-komponentin ympärille:

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

function App() {
  return (
    

      
        
      
    
  );
}

export default App;

            

              
                Copy
              
            
          

Virherajojen ja mukautettujen koukkujen yhdistäminen

Kestävimmän virheenkäsittelyn varmistamiseksi yhdistä virherajat ja mukautetut koukut, kuten useFetch. Virherajat havaitsevat odottamattomat renderöintivirheet, kun taas mukautetut koukut hallitsevat virheitä asynkronisista toiminnoista ja levittävät niitä ylöspäin. ErrorProvider ja ErrorBoundary voivat olla olemassa samanaikaisesti; ErrorProvider mahdollistaa yksityiskohtaisen virheiden käsittelyn ja raportoinnin, kun taas ErrorBoundary estää katastrofaaliset sovellusten kaatumiset.

Parhaat käytännöt virheiden käsittelyyn Reactissa

• Keskitetty virheiden lokitus: Lähetä virheet keskitettyyn lokipalveluun seurantaa ja analysointia varten. Palvelut, kuten Sentry, Rollbar ja Bugsnag, ovat loistavia vaihtoehtoja. Harkitse lokitustason (esim. console.error, console.warn, console.info) käyttöä tapahtumien vakavuuden erottamiseksi.
• Käyttäjäystävälliset virheviestit: Näytä käyttäjälle selkeitä ja hyödyllisiä virheviestejä. Vältä teknistä jargonnia ja anna ehdotuksia ongelman ratkaisemiseksi. Ajattele lokalisointia: varmista, että virheviestit ovat ymmärrettäviä eri kielillä ja kulttuurikonteksteissa oleville käyttäjille.
• Armollinen heikentyminen: Suunnittele sovelluksesi heikentymään armollisesti virhetilanteessa. Esimerkiksi jos tietty API-kutsu epäonnistuu, piilota vastaava komponentti tai näytä paikkamerkki koko sovelluksen kaatumisen sijaan.
• Uudelleenyritysmenetelmät: Ota käyttöön uudelleenyritysmenetelmät ohimeneville virheille, kuten verkkovirheille. Ole kuitenkin varovainen välttääksesi loputtomia uudelleenyritysilmukoita, jotka voivat pahentaa ongelmaa. Eksponentiaalinen takaisinperintä on hyvä strategia.
• Testaus: Testaa perusteellisesti virheiden käsittelylogiikkasi varmistaaksesi, että se toimii odotetusti. Simulo virheiden eri skenaarioita, kuten verkkovirheitä, virheellisiä tietoja ja palvelinvirheitä. Harkitse sellaisten työkalujen käyttöä kuin Jest ja React Testing Library kirjoittaaksesi yksikkö- ja integraatiotestejä.
• Seuranta: Seuraa jatkuvasti sovellustasi virheiden ja suorituskykyongelmien varalta. Määritä hälytykset, jotka ilmoittavat virheiden ilmaantumisesta, jolloin voit nopeasti reagoida ongelmiin.
• Harkitse turvallisuutta: Estä arkaluonteisten tietojen näyttäminen virheviesteissä. Vältä pinon jäljitysten tai sisäisten palvelintietojen sisällyttämistä käyttäjille näkyviin viesteihin, sillä haitalliset toimijat voivat hyödyntää näitä tietoja.

Edistykselliset virheiden käsittelytekniikat

Globaalin virhetilan hallintaratkaisun käyttäminen

Monimutkaisemmissa sovelluksissa harkitse globaalin tilanhallintaratkaisun, kuten Reduxin, Zustandin tai Recoilin, käyttöä virhetilan hallintaan. Tämän avulla voit käyttää ja päivittää virhetilaa mistä tahansa sovelluksessasi, mikä tarjoaa keskitetyn tavan käsitellä virheitä. Voit esimerkiksi lähettää toiminnon päivittääksesi virhetilaa virheen sattuessa ja sitten käyttää valitsinta noutaaksesi virhetilan missä tahansa komponentissa.

Mukautettujen virheluokkien toteuttaminen

Luo mukautettuja virheluokkia edustamaan erilaisia virheitä, joita voi esiintyä sovelluksessasi. Tämän avulla voit helposti erottaa eri tyyppisiä virheitä ja käsitellä niitä asianmukaisesti. Voit esimerkiksi luoda NetworkError-luokan, ValidationError-luokan ja ServerError-luokan. Tämä tekee virheiden käsittelylogiikastasi organisoidumpaa ja ylläpidettävämpää.

Kytkinpiirrosmallin käyttäminen

Kytkinpiirrosmalli on suunnittelumalli, joka voi auttaa estämään kaskadivirheet hajautetuissa järjestelmissä. Perusidea on ympäröidä ulkoisiin palveluihin tehtävät kutsut kytkinpiirros-objektilla. Jos kytkinpiirros havaitsee tietyn määrän epäonnistumisia, se "avaa" piirin ja estää kaikki jatkokutsut ulkoiseen palveluun. Tietyn ajan kuluttua kytkinpiirros "puoliavoin" piirin ja sallii yhden kutsun ulkoiseen palveluun. Jos kutsu onnistuu, kytkinpiirros "sulkee" piirin ja sallii kaikkien kutsujen ulkoiseen palveluun jatkumisen. Tämä voi auttaa estämään sovellustasi joutumasta ulkoisten palveluiden virheiden ylikuormittamaksi.

Kansainvälistymiseen (i18n) liittyvät näkökohdat

Kun käsitellään globaalia yleisöä, kansainvälistyminen on ensiarvoisen tärkeää. Virheviestit tulisi kääntää käyttäjän ensisijaiseksi kieleksi. Harkitse kirjaston, kuten i18next, käyttöä käännösten tehokkaaseen hallintaan. Lisäksi ole tietoinen kulttuurieroista siinä, miten virheet koetaan. Esimerkiksi yksinkertainen varoitusviesti voidaan tulkita eri tavalla eri kulttuureissa, joten varmista, että sävy ja sanamuoto ovat asianmukaisia kohdeyleisöllesi.

Yleiset virheskenaariot ja ratkaisut

Verkkovirheet

Skenaario: API-palvelin ei ole käytettävissä tai käyttäjän internetyhteys on poikki.

Ratkaisu: Näytä viesti, joka osoittaa, että on verkko-ongelma, ja ehdota internetyhteyden tarkistamista. Ota käyttöön uudelleenyritysmenetelmä eksponentiaalisella takaisinperinnällä.

Virheelliset tiedot

Skenaario: API palauttaa tietoja, jotka eivät vastaa odotettua skeemaa.

Ratkaisu: Ota käyttöön tietojen validointi asiakaspuolella virheellisten tietojen havaitsemiseksi. Näytä virheviesti, joka osoittaa, että tiedot ovat vioittuneet tai virheellisiä. Harkitse TypeScriptin käyttöä tietotyyppien pakottamiseksi käännösaikana.

Todennusvirheet

Skenaario: Käyttäjän todennusmerkki on virheellinen tai vanhentunut.

Ratkaisu: Ohjaa käyttäjä kirjautumissivulle. Näytä viesti, joka osoittaa, että hänen istuntonsa on vanhentunut ja hänen on kirjauduttava uudelleen sisään.

Valtuutusvirheet

Skenaario: Käyttäjällä ei ole lupaa käyttää tiettyä resurssia.

Ratkaisu: Näytä viesti, joka osoittaa, että heillä ei ole tarvittavia käyttöoikeuksia. Anna linkki tukeen, jos he uskovat, että heillä pitäisi olla pääsy.

Palvelinvirheet

Skenaario: API-palvelin kohtaa odottamattoman virheen.

Ratkaisu: Näytä yleinen virheviesti, joka osoittaa, että palvelimessa on ongelma. Kirjaa virhe palvelinpuolelle virheenkorjaustarkoituksiin. Harkitse sellaisen palvelun käyttöä kuin Sentry tai Rollbar palvelinvirheiden seuraamiseen.

Johtopäätös

Tehokas virheiden käsittely on välttämätöntä kestävien ja käyttäjäystävällisten React-sovellusten luomisessa. Yhdistämällä mukautetut koukut, virherajat ja kattava virheiden käsittelystrategia voit varmistaa, että sovelluksesi käsittelee virheet tyylikkäästi ja tarjoaa käyttäjälle mielekkään kokemuksen jopa resurssien latausvirheiden aikana. Muista asettaa etusijalle keskitetty virheiden lokitus, käyttäjäystävälliset virheviestit ja armollinen heikentyminen. Näitä parhaita käytäntöjä noudattamalla voit rakentaa React-sovelluksia, jotka ovat joustavia, luotettavia ja helposti ylläpidettäviä riippumatta käyttäjiesi sijainnista tai taustasta.