import React, { Suspense } from 'react';

// Simulează preluarea datelor (de exemplu, dintr-un API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Creați o resursă pe care Suspense o poate utiliza
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Componenta care citește din resursă
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Loading user data...

În acest exemplu:

• `fetchData` simulează o operație asincronă de preluare a datelor.
• `createResource` creează o resursă pe care Suspense o poate utiliza pentru a urmări starea de încărcare a datelor.
• `UserProfile` citește datele din resursă utilizând metoda `read`. Dacă datele nu sunt încă disponibile, acesta aruncă o promisiune, care suspendă componenta.
• Componenta `Suspense` încadrează `UserProfile` și oferă o prop `fallback`, care specifică interfața utilizatorului care va fi afișată în timp ce componenta este suspendată.

Suspense cu Code Splitting

Suspense poate fi, de asemenea, utilizat cu React.lazy pentru a implementa code splitting. Acest lucru vă permite să încărcați componentele numai atunci când sunt necesare, îmbunătățind performanța inițială de încărcare a paginii.

import React, { Suspense, lazy } from 'react';

// Încărcați leneș componenta MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Loading component...}>
      
    
  );
};

export default App;

În acest exemplu:

• `React.lazy` este utilizat pentru a încărca leneș componenta `MyComponent`.
• Componenta `Suspense` încadrează `MyComponent` și oferă o prop `fallback`, care specifică interfața utilizatorului care va fi afișată în timp ce componenta este încărcată.

Înțelegerea Error Boundaries

Error Boundaries sunt componente React care captează erorile JavaScript oriunde în arborele componentelor lor copil, înregistrează aceste erori și afișează o interfață de utilizator de rezervă în loc să blocheze întreaga aplicație. Acestea oferă o modalitate de a gestiona grațios erorile neașteptate, îmbunătățind experiența utilizatorului și făcând aplicația mai robustă.

Concepte cheie ale Error Boundaries

• Capturarea erorilor: Error Boundaries captează erorile în timpul redării, în metodele ciclului de viață și în constructori ai întregului arbore de sub acestea.
• Interfața utilizatorului de rezervă: Interfața utilizatorului care este afișată atunci când apare o eroare. Acesta este, de obicei, un mesaj de eroare sau un substituent.
• Înregistrarea erorilor: Error Boundaries vă permit să înregistrați erorile la un serviciu sau consolă în scopuri de depanare.
• Izolarea arborelui de componente: Error Boundaries izolează erorile în părți specifice ale arborelui de componente, împiedicându-le să blocheze întreaga aplicație.

Implementarea de bază a Error Boundaries

Iată un exemplu simplu despre cum să creați un Error Boundary:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Actualizați starea, astfel încât următoarea redare să afișeze interfața utilizatorului de rezervă.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Puteți înregistra, de asemenea, eroarea la un serviciu de raportare a erorilor
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Puteți reda orice interfață de utilizator de rezervă personalizată
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

În acest exemplu:

• Componenta `ErrorBoundary` definește metodele `getDerivedStateFromError` și `componentDidCatch`.
• `getDerivedStateFromError` este apelată atunci când apare o eroare într-o componentă copil. Actualizează starea pentru a indica faptul că a apărut o eroare.
• `componentDidCatch` este apelată după ce o eroare a fost capturată. Vă permite să înregistrați eroarea la un serviciu sau consolă.
• Metoda `render` verifică starea `hasError` și afișează o interfață utilizatorului de rezervă dacă a apărut o eroare.

Utilizarea Error Boundaries

Pentru a utiliza componenta `ErrorBoundary`, pur și simplu încadrați componentele pe care doriți să le protejați cu aceasta:

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

const MyComponent = () => {
  // Simulați o eroare
  throw new Error('An error occurred!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

În acest exemplu, dacă apare o eroare în `MyComponent`, componenta `ErrorBoundary` va capta eroarea și va afișa interfața utilizatorului de rezervă.

Combinarea Suspense și Error Boundaries

Suspense și Error Boundaries pot fi combinate pentru a oferi o strategie robustă și cuprinzătoare de gestionare a erorilor pentru operații asincrone. Prin încadrarea componentelor care ar putea suspenda cu Suspense și Error Boundaries, puteți gestiona atât stările de încărcare, cât și erorile neașteptate într-un mod grațios.

Exemplu de combinare a Suspense și Error Boundaries

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Simulează preluarea datelor (de exemplu, dintr-un API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulați o preluare de date reușită
      // resolve({ name: 'John Doe', age: 30 });

      // Simulați o eroare în timpul preluării datelor
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// Creați o resursă pe care Suspense o poate utiliza
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Componenta care citește din resursă
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Loading user data...}>
        
      
    
  );
};

export default App;

În acest exemplu:

• Componenta `ErrorBoundary` încadrează componenta `Suspense`.
• Componenta `Suspense` încadrează componenta `UserProfile`.
• Dacă funcția `fetchData` respinge cu o eroare, componenta `Suspense` va capta respingerea promisiunii, iar `ErrorBoundary` va capta eroarea aruncată de Suspense.
• `ErrorBoundary` va afișa apoi interfața utilizatorului de rezervă.
• Dacă datele sunt preluate cu succes, componenta `Suspense` va afișa componenta `UserProfile`.

Tehnici avansate și cele mai bune practici

Optimizarea performanței Suspense

• Utilizați Memoizarea: Memoizați componentele care sunt redate în limitele Suspense pentru a preveni re-redările inutile.
• Evitați arborele Suspense adânci: Păstrați arborele Suspense superficial pentru a minimiza impactul asupra performanței de redare.
• Prefetch Data: Prefetch datele înainte de a fi necesare pentru a reduce probabilitatea de suspensie.

Error Boundaries personalizate

Puteți crea Error Boundaries personalizate pentru a gestiona tipuri specifice de erori sau pentru a oferi mesaje de eroare mai informative. De exemplu, puteți crea un Error Boundary care afișează o interfață utilizatorului de rezervă diferită în funcție de tipul de eroare care a apărut.

Server-Side Rendering (SSR) cu Suspense

Suspense poate fi utilizat cu Server-Side Rendering (SSR) pentru a îmbunătăți performanța inițială de încărcare a paginii. Când utilizați SSR, puteți pre-reda starea inițială a aplicației pe server și apoi puteți transmite în flux restul de conținut către client. Suspense vă permite să gestionați preluarea asincronă a datelor în timpul SSR și să afișați indicatori de încărcare în timp ce datele sunt transmise în flux.

Gestionarea diferitelor scenarii de eroare

Luați în considerare aceste diferite scenarii de eroare și modul de gestionare a acestora:

• Erori de rețea: Gestionați erorile de rețea în mod grațios, afișând un mesaj de eroare informativ utilizatorului.
• Erori API: Gestionați erorile API afișând un mesaj de eroare specific erorii care a apărut.
• Erori neașteptate: Gestionați erorile neașteptate prin înregistrarea erorii și afișarea unui mesaj de eroare generic utilizatorului.

Gestionarea globală a erorilor

Implementați un mecanism global de gestionare a erorilor pentru a capta erorile care nu sunt capturate de Error Boundaries. Acest lucru se poate face utilizând un handler global de erori sau încadrați întreaga aplicație într-un Error Boundary.

Exemple și cazuri de utilizare din lumea reală

Aplicație de comerț electronic

Într-o aplicație de comerț electronic, Suspense poate fi utilizat pentru a afișa indicatori de încărcare în timp ce preluați datele despre produs, iar Error Boundaries pot fi utilizate pentru a gestiona erorile care apar în timpul procesului de finalizare a comenzii. De exemplu, imaginați-vă un utilizator din Japonia care navighează într-un magazin online situat în Statele Unite. Imaginile și descrierile produselor ar putea dura ceva timp pentru a se încărca. Suspense poate afișa o animație simplă de încărcare în timp ce aceste date sunt preluate de la un server, eventual la jumătatea drumului în jurul lumii. Dacă gateway-ul de plată eșuează din cauza unei probleme temporare de rețea (obișnuită în diferite infrastructuri de internet la nivel global), un Error Boundary ar putea afișa un mesaj ușor de utilizat, solicitându-i să încerce din nou mai târziu.

Platforma de social media

Într-o platformă de social media, Suspense poate fi utilizat pentru a afișa indicatori de încărcare în timp ce preluați profilurile de utilizatori și postările, iar Error Boundaries pot fi utilizate pentru a gestiona erorile care apar la încărcarea imaginilor sau videoclipurilor. Un utilizator care navighează din India ar putea experimenta timpi de încărcare mai mari pentru media găzduite pe servere din Europa. Suspense poate afișa un substituent până când conținutul este complet încărcat. Dacă datele profilului unui anumit utilizator sunt corupte (rar, dar posibil), un Error Boundary poate împiedica blocarea întregului feed de socializare, afișând în schimb un mesaj simplu de eroare, cum ar fi „Imposibil de încărcat profilul utilizatorului”.

Aplicație de tabloul de bord

Într-o aplicație de tabloul de bord, Suspense poate fi utilizat pentru a afișa indicatori de încărcare în timp ce preluați date din mai multe surse, iar Error Boundaries pot fi utilizate pentru a gestiona erorile care apar la încărcarea graficelor sau graficelor. Un analist financiar din Londra care accesează un tabloul de bord de investiții global ar putea încărca date de la mai multe burse din întreaga lume. Suspense poate oferi indicatori de încărcare pentru fiecare sursă de date. Dacă API-ul unei burse este inactiv, un Error Boundary poate afișa un mesaj de eroare specific pentru datele acelei burse, împiedicând inutilizarea întregului tablou de bord.

Concluzie

React Suspense și Error Boundaries sunt instrumente esențiale pentru construirea de aplicații React rezistente și ușor de utilizat. Utilizând Suspense pentru a gestiona stările de încărcare și Error Boundaries pentru a gestiona erorile neașteptate, puteți îmbunătăți experiența generală a utilizatorului și puteți simplifica procesul de dezvoltare. Acest ghid a oferit o prezentare generală cuprinzătoare a Suspense și Error Boundaries, acoperind totul, de la concepte de bază la tehnici avansate. Urmând cele mai bune practici prezentate în acest articol, puteți construi aplicații React robuste și fiabile, care pot gestiona chiar și cele mai dificile scenarii.

Pe măsură ce React continuă să evolueze, Suspense și Error Boundaries sunt susceptibile să joace un rol din ce în ce mai important în construirea de aplicații web moderne. Stăpânind aceste funcții, puteți rămâne în fruntea curbei și puteți oferi experiențe excepționale utilizatorilor.