M

MLOG

Eesti

Õppige, kuidas Reactis rakendada sujuva alandamise strateegiaid, et tõhusalt käsitleda vigu ja pakkuda sujuvat kasutajakogemust ka siis, kui asjad valesti lähevad.

Reacti vigade taastamine: sujuva alandamise strateegiad robustsete rakenduste jaoks

Robustsete ja vastupidavate Reacti rakenduste ehitamine nõuab terviklikku lähenemist veakäsitlusele. Kuigi vigade ennetamine on ülioluline, on sama tähtis omada strateegiaid vältimatute käitusaegsete erandite sujuvaks käsitlemiseks. See blogipostitus uurib erinevaid tehnikaid sujuva alandamise rakendamiseks Reactis, tagades sujuva ja informatiivse kasutajakogemuse isegi ootamatute vigade ilmnemisel.

Miks on vigade taastamine oluline?

Kujutage ette, et kasutaja suhtleb teie rakendusega, kui äkki jookseb komponent kokku, kuvades krüptilise veateate või tühja ekraani. See võib põhjustada frustratsiooni, halba kasutajakogemust ja potentsiaalselt kasutajate kaotust. Tõhus vigade taastamine on oluline mitmel põhjusel:

Veapiirid: fundamentaalne lähenemine

Veapiirid on Reacti komponendid, mis püüavad kinni JavaScripti vead oma alamkomponentide puus, logivad need vead ja kuvavad krahhi läinud komponendipuu asemel varu-kasutajaliidese. Mõelge neist kui JavaScripti `catch {}` plokist, kuid Reacti komponentide jaoks.

Veapiiri komponendi loomine

Veapiirid on klassikomponendid, mis rakendavad elutsükli meetodeid `static getDerivedStateFromError()` ja `componentDidCatch()`. Loome põhilise veapiiri komponendi:

import React from 'react';

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

  static getDerivedStateFromError(error) {
    // Uuendab olekut, et järgmine renderdus näitaks varu-UI-d.
    return {
      hasError: true,
      error: error
    };
  }

  componentDidCatch(error, errorInfo) {
    // Võite vea logida ka vearaportiteenusesse
    console.error("Püütud viga:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
    // Näide: logiVigaMinuTeenusesse(error, errorInfo);
  }

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

    return this.props.children; 
  }
}

export default ErrorBoundary;

Selgitus:

Veapiiri kasutamine

Veapiiri kasutamiseks mähkige lihtsalt komponendipuu, mida soovite kaitsta:

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

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Kui `MyComponent` või mõni selle järeltulijatest viskab vea, püüab `ErrorBoundary` selle kinni ja renderdab oma varu-UI.

Olulised kaalutlused veapiiride puhul

Varukomponendid: alternatiivide pakkumine

Varukomponendid on kasutajaliidese elemendid, mis renderdatakse, kui esmane komponent ei lae või ei toimi õigesti. Need pakuvad viisi funktsionaalsuse säilitamiseks ja positiivse kasutajakogemuse pakkumiseks isegi vigade korral.

Varukomponentide tüübid

Varukomponentide rakendamine

Varukomponentide rakendamiseks võite kasutada tingimuslikku renderdamist või `try...catch` lauset.

Tingimuslik renderdamine

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP viga! staatus: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      }
    }

    fetchData();
  }, []);

  if (error) {
    return <p>Viga: {error.message}. Palun proovige hiljem uuesti.</p>; // Varu-UI
  }

  if (!data) {
    return <p>Laadimine...</p>;
  }

  return <div>{/* Renderda andmed siin */}</div>;
}

export default MyComponent;

Try...Catch lause

import React, { useState } from 'react';

function MyComponent() {
  const [content, setContent] = useState(null);

  try {
      //Võimaliku veaga kood
      if (content === null){
          throw new Error("Sisu on null");
      }
    return <div>{content}</div>
  } catch (error) {
    return <div>Tekkis viga: {error.message}</div> // Varu-UI
  }
}

export default MyComponent;

Varukomponentide eelised

Andmete valideerimine: vigade ennetamine allikas

Andmete valideerimine on protsess, millega tagatakse, et teie rakenduse kasutatavad andmed on kehtivad ja järjepidevad. Andmeid valideerides saate ennetada paljude vigade tekkimist, mis viib stabiilsema ja usaldusväärsema rakenduseni.

Andmete valideerimise tüübid

Valideerimistehnikad

Näide: kasutaja sisendi valideerimine

import React, { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');

  const handleEmailChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);

    // E-posti valideerimine lihtsa regulaaravaldise abil
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) {
      setEmailError('Vigane e-posti aadress');
    } else {
      setEmailError('');
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (emailError) {
      alert('Palun parandage vormis olevad vead.');
      return;
    }
    // Saada vorm
    alert('Vorm edukalt esitatud!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        E-post:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      {emailError && <div style={{ color: 'red' }}>{emailError}</div>}
      <button type="submit">Saada</button>
    </form>
  );
}

export default MyForm;

Andmete valideerimise eelised

Täiustatud tehnikad vigade taastamiseks

Lisaks veapiiride, varukomponentide ja andmete valideerimise põhistrateegiatele on mitmeid täiustatud tehnikaid, mis võivad teie Reacti rakenduste vigade taastamist veelgi parandada.

Uuesti proovimise mehhanismid

Mööduvate vigade, näiteks võrguühenduse probleemide korral, võib uuesti proovimise mehhanismide rakendamine parandada kasutajakogemust. Võite kasutada teeke nagu `axios-retry` või rakendada oma uuesti proovimise loogikat, kasutades `setTimeout` või `Promise.retry` (kui see on saadaval).

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3, // korduskatsete arv
  retryDelay: (retryCount) => {
    console.log(`korduskatse: ${retryCount}`);
    return retryCount * 1000; // ajaintervall korduskatsete vahel
  },
  retryCondition: (error) => {
    // kui kordustingimust ei ole määratud, proovitakse vaikimisi idempotentseid päringuid uuesti
    return error.response.status === 503; // proovi uuesti serveri vigade korral
  },
});

axios
  .get('https://api.example.com/data')
  .then((response) => {
    // käsitle edukat vastust
  })
  .catch((error) => {
    // käsitle viga pärast korduskatseid
  });

Kaitselüliti muster

Kaitselüliti muster takistab rakendusel korduvalt proovimast sooritada toimingut, mis tõenäoliselt ebaõnnestub. See toimib, "avades" vooluringi teatud arvu ebaõnnestumiste korral, vältides edasisi katseid kuni teatud aja möödumiseni. See aitab vältida kaskaadseid rikkeid ja parandada rakenduse üldist stabiilsust.

JavaScriptis saab kaitselüliti mustri rakendamiseks kasutada teeke nagu `opossum`.

Päringute piiramine

Päringute piiramine kaitseb teie rakendust ülekoormuse eest, piirates päringute arvu, mida kasutaja või klient saab teatud aja jooksul teha. See aitab vältida teenusetõkestamise (DoS) rünnakuid ja tagada, et teie rakendus jääb reageerimisvõimeliseks.

Päringute piiramist saab rakendada serveri tasemel, kasutades vahevara või teeke. Võite kasutada ka kolmandate osapoolte teenuseid nagu Cloudflare või Akamai, et pakkuda päringute piiramist ja muid turvafunktsioone.

Sujuv alandamine funktsioonilippudes

Funktsioonilippude kasutamine võimaldab teil funktsioone sisse ja välja lülitada ilma uut koodi juurutamata. See võib olla kasulik probleemidega funktsioonide sujuvaks alandamiseks. Näiteks kui mõni konkreetne funktsioon põhjustab jõudlusprobleeme, saate selle ajutiselt funktsioonilipu abil keelata, kuni probleem on lahendatud.

Mitmed teenused pakuvad funktsioonilippude haldamist, näiteks LaunchDarkly või Split.

Reaalse maailma näited ja parimad praktikad

Uurime mõningaid reaalse maailma näiteid ja parimaid praktikaid sujuva alandamise rakendamiseks Reacti rakendustes.

E-kaubanduse platvorm

Sotsiaalmeedia rakendus

Globaalne uudiste veebisait

Vigade taastamise strateegiate testimine

On ülioluline testida oma vigade taastamise strateegiaid, et tagada nende ootuspärane toimimine. Siin on mõned testimistehnikad:

Kokkuvõte

Sujuva alandamise strateegiate rakendamine Reactis on oluline robustsete ja vastupidavate rakenduste ehitamiseks. Kasutades veapiire, varukomponente, andmete valideerimist ja täiustatud tehnikaid nagu uuesti proovimise mehhanismid ja kaitselülitid, saate tagada sujuva ja informatiivse kasutajakogemuse isegi siis, kui asjad valesti lähevad. Ärge unustage oma vigade taastamise strateegiaid põhjalikult testida, et tagada nende ootuspärane toimimine. Veakäsitlust prioritiseerides saate ehitada Reacti rakendusi, mis on usaldusväärsemad, kasutajasõbralikumad ja lõppkokkuvõttes edukamad.