React Kļūdu robežu kļūdu kategorizācija: visaptverošs ceļvedis

Kļūdu apstrāde ir kritisks aspekts, veidojot robustas un viegli uzturamas React lietojumprogrammas. Lai gan React kļūdu robežas nodrošina mehānismu, lai eleganti apstrādātu kļūdas, kas rodas renderēšanas laikā, izpratne par to, kā kategorizēt un reaģēt uz dažādiem kļūdu tipiem, ir ļoti svarīga, lai izveidotu patiesi noturīgu lietojumprogrammu. Šajā rokasgrāmatā ir aplūkotas dažādas pieejas kļūdu kategorizācijai kļūdu robežās, piedāvājot praktiskus piemērus un rīcības ieteikumus, lai uzlabotu jūsu kļūdu pārvaldības stratēģiju.

Kas ir React kļūdu robežas?

Ieviestas React 16 versijā, kļūdu robežas ir React komponenti, kas uztver JavaScript kļūdas jebkur savā bērnu komponentu kokā, reģistrē šīs kļūdas un parāda rezerves UI, nevis avarē visu komponentu koku. Tās darbojas līdzīgi try...catch blokam, bet komponentiem.

Kļūdu robežu galvenās īpašības:

• Komponentu līmeņa kļūdu apstrāde: izolējiet kļūdas noteiktos komponentu apakškokos.
• Eleganta degradācija: neļaujiet visai lietojumprogrammai avarēt vienas komponenta kļūdas dēļ.
• Kontrolēts rezerves UI: parādiet lietotājam draudzīgu ziņojumu vai alternatīvu saturu, kad rodas kļūda.
• Kļūdu reģistrēšana: atvieglojiet kļūdu izsekošanu un atkļūdošanu, reģistrējot kļūdu informāciju.

Kāpēc kategorizēt kļūdas kļūdu robežās?

Vienkārši uztvert kļūdas nepietiek. Efektīvai kļūdu apstrādei ir nepieciešams saprast, kas nogāja greizi, un atbilstoši reaģēt. Kļūdu kategorizēšana kļūdu robežās piedāvā vairākas priekšrocības:

• Mērķtiecīga kļūdu apstrāde: dažādiem kļūdu tipiem var būt nepieciešamas dažādas atbildes. Piemēram, tīkla kļūda varētu garantēt atkārtotas mēģināšanas mehānismu, savukārt datu validācijas kļūda varētu prasīt lietotāja ievades labojumu.
• Uzlabota lietotāja pieredze: parādiet informatīvākus kļūdu ziņojumus, pamatojoties uz kļūdas tipu. Vispārīgs ziņojums "Kaut kas nogāja greizi" ir mazāk noderīgs nekā konkrēts ziņojums, kas norāda uz tīkla problēmu vai nederīgu ievadi.
• Uzlabota atkļūdošana: kļūdu kategorizēšana nodrošina vērtīgu kontekstu atkļūdošanai un problēmu cēloņu identificēšanai.
• Proaktīva uzraudzība: izsekojiet dažādu kļūdu tipu biežumu, lai identificētu atkārtotas problēmas un noteiktu prioritātes labojumiem.
• Stratēģisks rezerves UI: parādiet dažādus rezerves UI atkarībā no kļūdas, sniedzot lietotājam atbilstošāku informāciju vai darbības.

Pieejas kļūdu kategorizācijai

Lai kategorizētu kļūdas React kļūdu robežās, var izmantot vairākas metodes:

1. Izmantojot instanceof

Operators instanceof pārbauda, vai objekts ir noteiktas klases instances. Tas ir noderīgi, lai kategorizētu kļūdas, pamatojoties uz to iebūvētajiem vai pielāgotajiem kļūdu tipiem.

Piemērs:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      let errorMessage = "Kaut kas nogāja greizi.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "Radās tīkla kļūda. Lūdzu, pārbaudiet savienojumu un mēģiniet vēlreiz.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "Radās validācijas kļūda. Lūdzu, pārskatiet savu ievadi.";
      }

      return (
        <div>
          <h2>Kļūda!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Paskaidrojums:

• Tiek definētas pielāgotas klases NetworkError un ValidationError, paplašinot iebūvēto klasi Error.
• Komponenta MyErrorBoundary metodes render ietvaros operators instanceof tiek izmantots, lai pārbaudītu uztvertās kļūdas tipu.
• Pamatojoties uz kļūdas tipu, rezerves UI tiek parādīts konkrēts kļūdas ziņojums.

2. Izmantojot kļūdu kodus vai rekvizītus

Cita pieeja ir iekļaut kļūdu kodus vai rekvizītus pašā kļūdas objektā. Tas ļauj veikt detalizētāku kategorizāciju, pamatojoties uz konkrētiem kļūdu scenārijiem.

Piemērs:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Tīkla pieprasījums neizdevās");
          error.code = response.status; // Pievienojiet pielāgotu kļūdas kodu
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Kaut kas nogāja greizi.";
      if (this.state.error.code === 404) {
        errorMessage = "Resurss nav atrasts.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Servera kļūda. Lūdzu, mēģiniet vēlreiz vēlāk.";
      }

      return (
        <div>
          <h2>Kļūda!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Paskaidrojums:

• Funkcija fetchData pievieno rekvizītu code kļūdas objektam, kas attēlo HTTP statusa kodu.
• Komponents MyErrorBoundary pārbauda rekvizītu code, lai noteiktu konkrēto kļūdas scenāriju.
• Dažādi kļūdu ziņojumi tiek parādīti, pamatojoties uz kļūdas kodu.

3. Izmantojot centralizētu kļūdu kartēšanu

Sarežģītām lietojumprogrammām centralizētas kļūdu kartēšanas uzturēšana var uzlabot koda organizāciju un uzturamību. Tas ietver vārdnīcas vai objekta izveidi, kas kartē kļūdu tipus vai kodus ar konkrētiem kļūdu ziņojumiem un apstrādes loģiku.

Piemērs:

const errorMap = {
  "NETWORK_ERROR": {
    message: "Radās tīkla kļūda. Lūdzu, pārbaudiet savienojumu.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Nederīga ievade. Lūdzu, pārskatiet savus datus.",
    retry: false,
  },
  404: {
    message: "Resurss nav atrasts.",
    retry: false,
  },
  500: {
    message: "Servera kļūda. Lūdzu, mēģiniet vēlreiz vēlāk.",
    retry: true,
  },
  "DEFAULT": {
    message: "Kaut kas nogāja greizi.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Kļūda!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Paskaidrojums:

• Objekts errorMap saglabā kļūdu informāciju, ieskaitot ziņojumus un atkārtotas mēģināšanas karodziņus, pamatojoties uz kļūdu tipiem vai kodiem.
• Funkcija handleCustomError izgūst kļūdu informāciju no errorMap, pamatojoties uz kļūdas ziņojumu, un atgriež noklusējuma vērtības, ja netiek atrasts konkrēts kods.
• Komponents MyErrorBoundary izmanto handleCustomError, lai iegūtu atbilstošu kļūdas ziņojumu no errorMap.

Labākā prakse kļūdu kategorizācijai

• Definējiet skaidrus kļūdu tipus: izveidojiet konsekventu kļūdu tipu vai kodu kopumu savai lietojumprogrammai.
• Sniedziet kontekstuālu informāciju: iekļaujiet atbilstošu informāciju kļūdu objektos, lai atvieglotu atkļūdošanu.
• Centralizējiet kļūdu apstrādes loģiku: izmantojiet centralizētu kļūdu kartēšanu vai utilītu funkcijas, lai konsekventi pārvaldītu kļūdu apstrādi.
• Efektīvi reģistrējiet kļūdas: integrējieties ar kļūdu ziņošanas pakalpojumiem, lai izsekotu un analizētu kļūdas ražošanā. Populāri pakalpojumi ir Sentry, Rollbar un Bugsnag.
• Pārbaudiet kļūdu apstrādi: rakstiet vienību testus, lai pārbaudītu, vai jūsu kļūdu robežas pareizi apstrādā dažādus kļūdu tipus.
• Apsveriet lietotāja pieredzi: parādiet informatīvus un lietotājam draudzīgus kļūdu ziņojumus, kas virza lietotājus uz risinājumu. Izvairieties no tehniskā žargona.
• Uzraugiet kļūdu rādītājus: izsekojiet dažādu kļūdu tipu biežumu, lai identificētu atkārtotas problēmas un noteiktu prioritātes labojumiem.
• Internacionalizācija (i18n): Kad parādāt kļūdu ziņojumus lietotājam, pārliecinieties, vai jūsu ziņojumi ir pareizi internacionalizēti, lai atbalstītu dažādas valodas un kultūras. Izmantojiet tādas bibliotēkas kā i18next vai React Context API, lai pārvaldītu tulkojumus.
• Pieejamība (a11y): Pārliecinieties, vai jūsu kļūdu ziņojumi ir pieejami lietotājiem ar invaliditāti. Izmantojiet ARIA atribūtus, lai nodrošinātu papildu kontekstu ekrāna lasītājiem.
• Drošība: Esiet piesardzīgs attiecībā uz to, kādu informāciju parādāt kļūdu ziņojumos, īpaši ražošanas vidēs. Izvairieties no sensitīvu datu atklāšanas, ko uzbrucēji varētu izmantot. Piemēram, neparādiet galalietotājiem neapstrādātus steka izsekojumus.

Piemērs: API kļūdu apstrāde e-komercijas lietojumprogrammā

Apsveriet e-komercijas lietojumprogrammu, kas izgūst informāciju par produktu no API. Iespējamie kļūdu scenāriji ietver:

• Tīkla kļūdas: API serveris nav pieejams vai lietotāja interneta savienojums ir pārtraukts.
• Autentifikācijas kļūdas: lietotāja autentifikācijas pilnvara ir nederīga vai beigusies.
• Resursa neatrastas kļūdas: pieprasītais produkts nepastāv.
• Servera kļūdas: API serveris saskaras ar iekšēju kļūdu.

Izmantojot kļūdu robežas un kļūdu kategorizāciju, lietojumprogramma var eleganti apstrādāt šos scenārijus:

// Piemērs (Vienkāršots)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

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

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Izmantojiet errorMap, kā parādīts iepriekš
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Kļūda!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Mēģināt vēlreiz</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Paskaidrojums:

• Funkcija fetchProduct pārbauda API atbildes statusa kodu un izmet konkrētus kļūdu tipus, pamatojoties uz statusu.
• Komponents ProductErrorBoundary uztver šīs kļūdas un parāda atbilstošus kļūdu ziņojumus.
• Tīkla kļūdu un servera kļūdu gadījumā tiek parādīta poga "Mēģināt vēlreiz", ļaujot lietotājam mēģināt pieprasījumu vēlreiz.
• Autentifikācijas kļūdu gadījumā lietotājs var tikt novirzīts uz pieteikšanās lapu.
• Resursa neatrastas kļūdas gadījumā tiek parādīts ziņojums, kas norāda, ka produkts nepastāv.

Secinājums

Kļūdu kategorizēšana React kļūdu robežās ir būtiska, lai izveidotu noturīgas, lietotājam draudzīgas lietojumprogrammas. Izmantojot tādas metodes kā instanceof pārbaudes, kļūdu kodus un centralizētu kļūdu kartēšanu, jūs varat efektīvi apstrādāt dažādus kļūdu scenārijus un nodrošināt labāku lietotāja pieredzi. Atcerieties ievērot labāko praksi kļūdu apstrādei, reģistrēšanai un pārbaudei, lai nodrošinātu, ka jūsu lietojumprogramma eleganti apstrādā neparedzētas situācijas.

Īstenojot šīs stratēģijas, jūs varat ievērojami uzlabot savu React lietojumprogrammu stabilitāti un uzturamību, nodrošinot vienmērīgāku un uzticamāku pieredzi saviem lietotājiem neatkarīgi no viņu atrašanās vietas vai izcelsmes.

Papildu resursi:

• React kļūdu robežu dokumentācija
• Sentry ceļvedis par React 16 kļūdu robežām
• Robin Wieruch React kļūdu robežu apmācība