Reactin virherajauspuu: Hierarkkinen virheidenkäsittely vankkoihin sovelluksiin

Reactin komponenttipohjainen arkkitehtuuri edistää uudelleenkäytettävyyttä ja ylläpidettävyyttä, mutta se luo myös mahdollisuuden virheiden leviämiselle ja koko sovelluksen häiriintymiselle. Käsittelemättömät virheet voivat johtaa käyttäjälle töksähtävään kokemukseen, näyttämällä kryptisiä viestejä tai jopa kaatamalla sovelluksen. Virherajaukset (Error Boundaries) tarjoavat mekanismin JavaScript-virheiden sieppaamiseen missä tahansa niiden lapsikomponenttipuussa, virheiden kirjaamiseen ja varakäyttöliittymän näyttämiseen kaatuneen komponenttipuun sijaan. Hyvin suunniteltu virherajauspuu mahdollistaa vikojen eristämisen ja paremman käyttökokemuksen tarjoamisen heikentämällä hallitusti tiettyjä sovelluksen osia vaikuttamatta toisiin.

Reactin virherajausten ymmärtäminen

React 16:ssa esitellyt virherajaukset ovat React-komponentteja, jotka sieppaavat JavaScript-virheet missä tahansa niiden lapsikomponenttipuussa, kirjaavat ne ja näyttävät varakäyttöliittymän kaatuneen komponenttipuun sijaan. Virherajaukset sieppaavat virheet renderöinnin aikana, elinkaarimetodeissa ja koko niiden alapuolella olevan puun konstruktoreissa. Kriittisesti ne *eivät* sieppaa virheitä:

• Tapahtumankäsittelijöissä (lue lisää alta)
• Asynkronisessa koodissa (esim. setTimeout tai requestAnimationFrame -takaisinkutsuissa)
• Palvelinpuolen renderöinnissä
• Virherajauksessa itsessään heitetyissä virheissä (sen lasten sijaan)

Luokkakomponentista tulee virherajaus, jos se määrittelee jommankumman (tai molemmat) näistä elinkaarimetodeista:

• static getDerivedStateFromError(): Tämä metodi kutsutaan, kun jälkeläiskomponentti on heittänyt virheen. Se vastaanottaa heitetyn virheen argumenttina ja sen tulisi palauttaa arvo tilan päivittämiseksi.
• componentDidCatch(): Tämä metodi kutsutaan, kun jälkeläiskomponentti on heittänyt virheen. Se vastaanottaa kaksi argumenttia:
  • error: Heitetty virhe.
  • info: Objekti, joka sisältää tietoa siitä, mikä komponentti heitti virheen.

Yksinkertainen virherajaus-esimerkki

Tässä on perusmuotoinen virherajaus-komponentti:

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

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

  componentDidCatch(error, info) {
    // Voit myös kirjata virheen virheraportointipalveluun
    console.error("Caught an error: ", error, info.componentStack);
    //logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Voit renderöidä minkä tahansa mukautetun varakäyttöliittymän
      return <h1>Jotain meni pieleen.</h1>;
    }

    return this.props.children; 
  }
}

            

              
                Copy
              
            
          

Käyttö:

            
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

            

              
                Copy
              
            
          

Virherajauspuun voima

Vaikka yksi virherajaus voi suojata koko sovelluksesi, kehittyneempi lähestymistapa on luoda virherajaus*puu*. Tämä tarkoittaa useiden virherajausten strategista sijoittamista komponenttihierarkian eri tasoille. Tämä mahdollistaa seuraavat asiat:

• Vikojen eristäminen: Vika yhdessä sovelluksen osassa ei välttämättä kaada koko käyttöliittymää. Vain tietyn virherajauksen kääärimä osa näyttää varakäyttöliittymän.
• Kontekstisidonnaisten varakäyttöliittymien tarjoaminen: Sovelluksesi eri osat saattavat vaatia erilaisia varakäyttöliittymiä. Esimerkiksi epäonnistunut kuvakomponentti voi näyttää paikkamerkkikuvan, kun taas epäonnistunut datanhakukomponentti voi näyttää "Yritä uudelleen" -painikkeen.
• Käyttökokemuksen parantaminen: Sijoittamalla virherajaukset huolellisesti voit varmistaa, että sovelluksesi heikkenee hallitusti, minimoiden käyttäjälle aiheutuvan häiriön.

Virherajauspuun rakentaminen: Käytännön esimerkki

Tarkastellaan verkkosovellusta, joka näyttää käyttäjäprofiilin. Profiili koostuu useista osioista:

• Käyttäjätiedot (nimi, sijainti, bio)
• Profiilikuva
• Viimeaikainen aktiivisuussyöte
• Seuraajien lista

Voimme kääriä jokaisen näistä osioista omalla virherajauksellaan.

            
// ErrorBoundary.js (Yleinen ErrorBoundary-komponentti ylhäältä)

import ErrorBoundary from './ErrorBoundary';

function UserProfile() {
  return (
    <div>
      <ErrorBoundary>
        <UserInfo />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<img src="/placeholder.png" alt="Paikkamerkki"/>}>
        <ProfilePicture />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<p>Aktiivisuuden lataaminen epäonnistui. Yritä myöhemmin uudelleen.</p>}>
        <ActivityFeed />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<p>Seuraajien lataaminen ei onnistunut.</p>}>
        <FollowersList />
      </ErrorBoundary>
    </div>
  );
}

            

              
                Copy
              
            
          

Tässä esimerkissä, jos ProfilePicture-komponentin lataaminen epäonnistuu (esim. rikkinäisen kuvan URL-osoitteen vuoksi), vain profiilikuva-alue näyttää varakäyttöliittymän (paikkamerkkikuvan). Muu osa profiilista pysyy toiminnassa. Vastaavasti ActivityFeed-komponentin vika vaikuttaa vain kyseiseen osioon, näyttäen "Yritä myöhemmin uudelleen" -viestin.

Huomaa fallbackUI-propin käyttö joissakin ErrorBoundary-komponenteissa. Tämä mahdollistaa varakäyttöliittymän mukauttamisen kullekin osiolle, tarjoten kontekstitietoisemman ja käyttäjäystävällisemmän kokemuksen.

Edistyneet virherajaustekniikat

1. Varakäyttöliittymän mukauttaminen

Oletusarvoinen varakäyttöliittymä (esim. yksinkertainen "Jotain meni pieleen" -viesti) ei välttämättä riitä kaikkiin tilanteisiin. Voit mukauttaa varakäyttöliittymää tarjotaksesi informatiivisempia viestejä, vaihtoehtoisia toimintoja tai jopa yrittääksesi palautua virheestä.

Kuten edellisessä esimerkissä näytettiin, voit käyttää propeja välittääksesi mukautetun varakäyttöliittymän ErrorBoundary-komponentille:

            
<ErrorBoundary fallbackUI={<CustomFallbackComponent />}>
  <MyComponent />
</ErrorBoundary>

            

              
                Copy
              
            
          

CustomFallbackComponent voi näyttää tarkemman virheilmoituksen, ehdottaa vianmääritysvaiheita tai tarjota "Yritä uudelleen" -painikkeen.

2. Virheiden kirjaaminen ulkoisiin palveluihin

Vaikka virherajaukset estävät sovelluksen kaatumisen, on tärkeää kirjata virheet, jotta voit tunnistaa ja korjata taustalla olevat ongelmat. componentDidCatch-metodi on ihanteellinen paikka virheiden kirjaamiseen ulkoisiin virheseurantapalveluihin, kuten Sentry, Bugsnag tai Rollbar.

            
class ErrorBoundary extends React.Component {
  // ...

  componentDidCatch(error, info) {
    // Kirjaa virhe virheraportointipalveluun
    logErrorToMyService(error, info.componentStack);
  }

  // ...
}

            

              
                Copy
              
            
          

Varmista, että määrität virheseurantapalvelusi käsittelemään JavaScript-virheitä ja antamaan sinulle yksityiskohtaista tietoa virheestä, mukaan lukien komponenttipinon jäljitys (component stack trace).

Esimerkki Sentryn avulla:

            
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [new BrowserTracing()],

  // Aseta tracesSampleRate arvoon 1.0 tallentaaksesi 100%
  // transaktioista suorituskyvyn seurantaa varten.
  // Suosittelemme säätämään tätä arvoa tuotannossa
  tracesSampleRate: 1.0,
});

class ErrorBoundary extends React.Component {
  // ...

  componentDidCatch(error, info) {
    Sentry.captureException(error, { extra: info });
  }

  // ...
}

            

              
                Copy
              
            
          

3. Virherajaukset ja tapahtumankäsittelijät

Kuten aiemmin mainittiin, virherajaukset *eivät* sieppaa virheitä tapahtumankäsittelijöiden sisällä. Tämä johtuu siitä, että tapahtumankäsittelijät suoritetaan asynkronisesti, Reactin renderöintielinkaaren ulkopuolella. Käsitelläksesi virheitä tapahtumankäsittelijöissä, sinun on käytettävä try...catch-lohkoa.

            
function MyComponent() {
  const handleClick = () => {
    try {
      // Koodi, joka saattaa heittää virheen
      throw new Error("Something went wrong in the event handler!");
    } catch (error) {
      console.error("Error in event handler:", error);
      // Näytä virheilmoitus käyttäjälle
      alert("Tapahtui virhe. Yritä uudelleen.");
    }
  };

  return <button onClick={handleClick}>Napsauta minua</button>;
}

            

              
                Copy
              
            
          

4. Virherajaukset ja asynkroniset operaatiot

Vastaavasti virherajaukset eivät sieppaa virheitä asynkronisissa operaatioissa, kuten setTimeout, setInterval tai Promise-lupauksissa. Sinun on käytettävä try...catch-lohkoja näiden asynkronisten operaatioiden sisällä virheiden käsittelemiseksi.

Esimerkki Promise-lupausten kanssa:

            
function MyComponent() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        // Käsittele data
        console.log(data);
      } catch (error) {
        console.error("Error fetching data:", error);
        // Näytä virheilmoitus käyttäjälle
        alert("Datan haku epäonnistui. Tarkista yhteytesi.");
      }
    };

    fetchData();
  }, []);

  return <div>Ladataan dataa...</div>;
}

            

              
                Copy
              
            
          

5. Epäonnistuneiden operaatioiden yrittäminen uudelleen

Joissakin tapauksissa saattaa olla mahdollista yrittää epäonnistunutta operaatiota automaattisesti uudelleen. Esimerkiksi, jos verkkopyyntö epäonnistuu väliaikaisen yhteysongelman vuoksi, voit toteuttaa uudelleenyritysmekanismin eksponentiaalisella viiveellä (exponential backoff).

Voit toteuttaa uudelleenyritysmekanismin varakäyttöliittymän sisällä tai virheen kokeneen komponentin sisällä. Harkitse kirjastojen, kuten axios-retry, käyttöä tai oman uudelleenyrityslogiikan toteuttamista setTimeout-funktion avulla.

Esimerkki (perus uudelleenyritys):

            
function RetryComponent({ onRetry }) {
  return <button onClick={onRetry}>Yritä uudelleen</button>;
}

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

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

  componentDidCatch(error, info) {
    console.error("Caught an error: ", error, info.componentStack);
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null }, () => {
      // Pakotetaan komponentin uudelleenrenderöinti päivittämällä tilaa
      this.forceUpdate();
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Jotain meni pieleen.</h1>
          <p>{this.state.error?.message}</p>
          <RetryComponent onRetry={this.handleRetry} />
        </div>
      );
    }

    return this.props.children;
  }
}

            

              
                Copy
              
            
          

Parhaat käytännöt virherajausten käyttöön

• Kääri kokonaiset reitit: Ylätason reiteille harkitse koko reitin käärimistä virherajauksella, jotta mahdolliset odottamattomat virheet voidaan siepata. Tämä tarjoaa turvaverkon ja estää koko sovelluksen kaatumisen.
• Kääri kriittiset osiot: Tunnista sovelluksesi kriittisimmät osiot (esim. kassaprosessi verkkokaupassa) ja kääri ne virherajauksilla varmistaaksesi niiden virheensietokyvyn.
• Älä käytä virherajauksia liikaa: Vältä jokaisen yksittäisen komponentin käärimistä virherajauksella. Tämä voi lisätä tarpeetonta kuormaa ja tehdä koodistasi vaikealukuisempaa. Keskity sellaisten komponenttien käärimiseen, jotka todennäköisesti epäonnistuvat tai ovat kriittisiä käyttökokemuksen kannalta.
• Tarjoa informatiivisia varakäyttöliittymiä: Varakäyttöliittymän tulisi antaa käyttäjälle selkeää ja hyödyllistä tietoa siitä, mikä meni pieleen ja mitä he voivat tehdä ongelman ratkaisemiseksi. Vältä yleisten virheilmoitusten näyttämistä, jotka eivät tarjoa kontekstia.
• Kirjaa virheet perusteellisesti: Varmista, että kirjaat kaikki virherajausten sieppaamat virheet ulkoiseen virheseurantapalveluun. Tämä auttaa sinua tunnistamaan ja korjaamaan taustalla olevat ongelmat nopeasti.
• Testaa virherajauksesi: Kirjoita yksikkötestejä ja integraatiotestejä varmistaaksesi, että virherajauksesi toimivat oikein ja sieppaavat odotetut virheet. Simuloi virhetilanteita ja varmista, että varakäyttöliittymä näytetään oikein.
• Harkitse globaalia virheidenkäsittelyä: Vaikka virherajaukset ovat erinomaisia virheiden käsittelyyn React-komponenttien sisällä, sinun tulisi myös harkita globaalin virheidenkäsittelyn toteuttamista siepataksesi virheet, jotka tapahtuvat React-puun ulkopuolella (esim. käsittelemättömät promise-hylkäykset).

Globaalit näkökohdat ja kulttuurinen herkkyys

Kun suunnittelet virherajauspuita globaalille yleisölle, on tärkeää ottaa huomioon kulttuurinen herkkyys ja lokalisointi:

• Lokalisointi: Varmista, että varakäyttöliittymäsi on lokalisoitu oikein eri kielille ja alueille. Käytä lokalisointikirjastoa, kuten i18next tai react-intl, kääntääksesi virheilmoitukset ja muun tekstin.
• Kulttuurinen konteksti: Ole tietoinen kulttuurieroista suunnitellessasi varakäyttöliittymiäsi. Vältä kuvien tai symbolien käyttöä, jotka saattavat olla loukkaavia tai sopimattomia tietyissä kulttuureissa. Esimerkiksi käsimerkki, jota pidetään positiivisena yhdessä kulttuurissa, voi olla loukkaava toisessa.
• Aikavyöhykkeet: Jos virheilmoituksesi sisältävät aikaleimoja tai muuta aikaan liittyvää tietoa, varmista, että ne näytetään käyttäjän paikallisessa aikavyöhykkeessä.
• Valuutat: Jos virheilmoituksesi liittyvät rahallisiin arvoihin, näytä ne käyttäjän paikallisessa valuutassa.
• Saavutettavuus: Varmista, että varakäyttöliittymäsi ovat saavutettavia vammaisille käyttäjille. Käytä asianmukaisia ARIA-attribuutteja ja noudata saavutettavuusohjeita tehdäksesi sovelluksestasi kaikkien käytettävän.
• Virheraportoinnin suostumus: Ole läpinäkyvä virheraportoinnin suhteen. Anna käyttäjille mahdollisuus hyväksyä tai kieltäytyä virheraporttien lähettämisestä palvelimillesi. Varmista, että noudatat tietosuojasäännöksiä, kuten GDPR ja CCPA.

Esimerkki (Lokalisointi i18next-kirjastolla):

            
// i18n.js (i18next-konfiguraatio)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en/translation.json';
import fr from './locales/fr/translation.json';

i18n
  .use(initReactI18next) // välittää i18n-instanssin react-i18nextille
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: 'en', // oletuskieli
    fallbackLng: 'en',

    interpolation: {
      escapeValue: false, // react suojaa jo valmiiksi xss-hyökkäyksiltä
    },
  });

export default i18n;

// ErrorBoundary.js

import { useTranslation } from 'react-i18next';

function ErrorBoundary(props) {
  const { t } = useTranslation();

  // ...

  render() {
    if (this.state.hasError) {
      return <h1>{t('error.somethingWentWrong')}</h1>;
    }

    return this.props.children;
  }
}

            

              
                Copy
              
            
          

Yhteenveto

Reactin virherajauspuut ovat tehokas työkalu vankkojen ja joustavien sovellusten rakentamiseen. Sijoittamalla virherajauksia strategisesti komponenttihierarkian eri tasoille voit eristää vikoja, tarjota kontekstisidonnaisia varakäyttöliittymiä ja parantaa yleistä käyttökokemusta. Muista käsitellä virheet tapahtumankäsittelijöissä ja asynkronisissa operaatioissa käyttämällä try...catch-lohkoja. Noudattamalla parhaita käytäntöjä ja ottamalla huomioon globaalit ja kulttuuriset tekijät voit luoda sovelluksia, jotka ovat sekä luotettavia että käyttäjäystävällisiä monipuoliselle yleisölle.

Toteuttamalla hyvin suunnitellun virherajauspuun ja kiinnittämällä huomiota yksityiskohtiin voit parantaa merkittävästi React-sovellustesi luotettavuutta ja käyttökokemusta riippumatta siitä, missä käyttäjäsi sijaitsevat.