import React, { Suspense } from 'react';

// Προσομοίωση ανάκτησης δεδομένων (π.χ., από ένα API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Δημιουργία ενός πόρου που μπορεί να χρησιμοποιήσει το Suspense
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);

// Component που διαβάζει από τον πόρο
const UserProfile = () => {
  const data = userData.read();
  return (
    

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

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

Σε αυτό το παράδειγμα:

• Το `fetchData` προσομοιώνει μια ασύγχρονη λειτουργία ανάκτησης δεδομένων.
• Το `createResource` δημιουργεί έναν πόρο που μπορεί να χρησιμοποιήσει το Suspense για να παρακολουθεί την κατάσταση φόρτωσης των δεδομένων.
• Το `UserProfile` διαβάζει δεδομένα από τον πόρο χρησιμοποιώντας τη μέθοδο `read`. Εάν τα δεδομένα δεν είναι ακόμη διαθέσιμα, εκτοξεύει μια promise, η οποία αναστέλλει το component.
• Το component `Suspense` περιβάλλει το `UserProfile` και παρέχει ένα `fallback` prop, το οποίο καθορίζει το UI που θα εμφανίζεται ενώ το component βρίσκεται σε αναστολή.

Suspense με Διαχωρισμό Κώδικα (Code Splitting)

Το Suspense μπορεί επίσης να χρησιμοποιηθεί με το React.lazy για την υλοποίηση του διαχωρισμού κώδικα. Αυτό σας επιτρέπει να φορτώνετε components μόνο όταν χρειάζονται, βελτιώνοντας την απόδοση της αρχικής φόρτωσης της σελίδας.

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

// Φόρτωση του component MyComponent με καθυστέρηση (lazy load)
const MyComponent = lazy(() => import('./MyComponent'));

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

export default App;

Σε αυτό το παράδειγμα:

• Το `React.lazy` χρησιμοποιείται για την καθυστερημένη φόρτωση του component `MyComponent`.
• Το component `Suspense` περιβάλλει το `MyComponent` και παρέχει ένα `fallback` prop, το οποίο καθορίζει το UI που θα εμφανίζεται κατά τη φόρτωση του component.

Κατανόηση των Error Boundaries

Τα Error Boundaries είναι components της React που «πιάνουν» σφάλματα JavaScript οπουδήποτε στο δέντρο των θυγατρικών τους components, καταγράφουν αυτά τα σφάλματα και εμφανίζουν ένα εφεδρικό UI αντί να καταρρεύσει ολόκληρη η εφαρμογή. Παρέχουν έναν τρόπο για την κομψή διαχείριση απρόσμενων σφαλμάτων, βελτιώνοντας την εμπειρία του χρήστη και κάνοντας την εφαρμογή σας πιο στιβαρή.

Βασικές Έννοιες των Error Boundaries

• Παγίδευση Σφαλμάτων: Τα Error Boundaries παγιδεύουν σφάλματα κατά την απόδοση, σε μεθόδους του κύκλου ζωής (lifecycle methods) και σε constructors ολόκληρου του δέντρου κάτω από αυτά.
• Εφεδρικό UI: Το UI που εμφανίζεται όταν συμβεί ένα σφάλμα. Αυτό είναι συνήθως ένα μήνυμα σφάλματος ή ένα placeholder.
• Καταγραφή Σφαλμάτων: Τα Error Boundaries σας επιτρέπουν να καταγράφετε σφάλματα σε μια υπηρεσία ή στην κονσόλα για σκοπούς εντοπισμού σφαλμάτων.
• Απομόνωση του Δέντρου των Components: Τα Error Boundaries απομονώνουν τα σφάλματα σε συγκεκριμένα τμήματα του δέντρου των components, εμποδίζοντάς τα από το να προκαλέσουν την κατάρρευση ολόκληρης της εφαρμογής.

Βασική Υλοποίηση των Error Boundaries

Ακολουθεί ένα απλό παράδειγμα για το πώς να δημιουργήσετε ένα Error Boundary:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Ενημέρωση της κατάστασης ώστε η επόμενη απόδοση να δείξει το εφεδρικό UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Μπορείτε επίσης να καταγράψετε το σφάλμα σε μια υπηρεσία αναφοράς σφαλμάτων
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Μπορείτε να αποδώσετε οποιοδήποτε προσαρμοσμένο εφεδρικό UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Σε αυτό το παράδειγμα:

• Το component `ErrorBoundary` ορίζει τις μεθόδους `getDerivedStateFromError` και `componentDidCatch`.
• Το `getDerivedStateFromError` καλείται όταν συμβεί ένα σφάλμα σε ένα θυγατρικό component. Ενημερώνει την κατάσταση για να υποδείξει ότι έχει συμβεί σφάλμα.
• Το `componentDidCatch` καλείται αφού έχει παγιδευτεί ένα σφάλμα. Σας επιτρέπει να καταγράψετε το σφάλμα σε μια υπηρεσία ή στην κονσόλα.
• Η μέθοδος `render` ελέγχει την κατάσταση `hasError` και εμφανίζει ένα εφεδρικό UI εάν έχει συμβεί σφάλμα.

Χρήση των Error Boundaries

Για να χρησιμοποιήσετε το component `ErrorBoundary`, απλώς περιβάλλετε με αυτό τα components που θέλετε να προστατεύσετε:

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

const MyComponent = () => {
  // Προσομοίωση ενός σφάλματος
  throw new Error('An error occurred!');
};

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

export default App;

Σε αυτό το παράδειγμα, εάν συμβεί σφάλμα στο `MyComponent`, το component `ErrorBoundary` θα παγιδεύσει το σφάλμα και θα εμφανίσει το εφεδρικό UI.

Συνδυασμός Suspense και Error Boundaries

Τα Suspense και Error Boundaries μπορούν να συνδυαστούν για να παρέχουν μια στιβαρή και ολοκληρωμένη στρατηγική διαχείρισης σφαλμάτων για ασύγχρονες λειτουργίες. Περιβάλλοντας τα components που ενδέχεται να ανασταλούν τόσο με Suspense όσο και με Error Boundaries, μπορείτε να διαχειριστείτε κομψά τόσο τις καταστάσεις φόρτωσης όσο και τα απρόσμενα σφάλματα.

Παράδειγμα Συνδυασμού Suspense και Error Boundaries

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

// Προσομοίωση ανάκτησης δεδομένων (π.χ., από ένα API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Προσομοίωση επιτυχούς ανάκτησης δεδομένων
      // resolve({ name: 'John Doe', age: 30 });

      // Προσομοίωση σφάλματος κατά την ανάκτηση δεδομένων
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// Δημιουργία ενός πόρου που μπορεί να χρησιμοποιήσει το Suspense
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);

// Component που διαβάζει από τον πόρο
const UserProfile = () => {
  const data = userData.read();
  return (
    

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

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

export default App;

Σε αυτό το παράδειγμα:

• Το component `ErrorBoundary` περιβάλλει το component `Suspense`.
• Το component `Suspense` περιβάλλει το component `UserProfile`.
• Εάν η συνάρτηση `fetchData` απορριφθεί με σφάλμα, το component `Suspense` θα παγιδεύσει την απόρριψη της promise, και το `ErrorBoundary` θα παγιδεύσει το σφάλμα που εκτοξεύεται από το Suspense.
• Το `ErrorBoundary` θα εμφανίσει τότε το εφεδρικό UI.
• Εάν τα δεδομένα ανακτηθούν με επιτυχία, το component `Suspense` θα εμφανίσει το component `UserProfile`.

Προηγμένες Τεχνικές και Βέλτιστες Πρακτικές

Βελτιστοποίηση της Απόδοσης του Suspense

• Χρήση Memoization: Χρησιμοποιήστε memoization σε components που αποδίδονται εντός των ορίων του Suspense για να αποτρέψετε περιττές επαναποδόσεις.
• Αποφύγετε τα Βαθιά Δέντρα Suspense: Διατηρήστε το δέντρο του Suspense ρηχό για να ελαχιστοποιήσετε τον αντίκτυπο στην απόδοση της απόδοσης.
• Προφόρτωση Δεδομένων: Προφορτώστε δεδομένα πριν χρειαστούν για να μειώσετε την πιθανότητα αναστολής.

Προσαρμοσμένα Error Boundaries

Μπορείτε να δημιουργήσετε προσαρμοσμένα Error Boundaries για να χειριστείτε συγκεκριμένους τύπους σφαλμάτων ή για να παρέχετε πιο πληροφοριακά μηνύματα σφάλματος. Για παράδειγμα, μπορείτε να δημιουργήσετε ένα Error Boundary που εμφανίζει ένα διαφορετικό εφεδρικό UI ανάλογα με τον τύπο του σφάλματος που συνέβη.

Απόδοση από την πλευρά του Διακομιστή (SSR) με Suspense

Το Suspense μπορεί να χρησιμοποιηθεί με την Απόδοση από την πλευρά του Διακομιστή (SSR) για να βελτιώσει την απόδοση της αρχικής φόρτωσης της σελίδας. Όταν χρησιμοποιείτε SSR, μπορείτε να προ-αποδώσετε την αρχική κατάσταση της εφαρμογής σας στον διακομιστή και στη συνέχεια να μεταδώσετε το υπόλοιπο περιεχόμενο στον πελάτη (client). Το Suspense σας επιτρέπει να διαχειριστείτε την ασύγχρονη ανάκτηση δεδομένων κατά τη διάρκεια του SSR και να εμφανίσετε δείκτες φόρτωσης ενώ τα δεδομένα μεταδίδονται.

Χειρισμός Διαφορετικών Σεναρίων Σφαλμάτων

Εξετάστε αυτά τα διαφορετικά σενάρια σφαλμάτων και πώς να τα χειριστείτε:

• Σφάλματα Δικτύου: Χειριστείτε τα σφάλματα δικτύου κομψά, εμφανίζοντας ένα πληροφοριακό μήνυμα σφάλματος στον χρήστη.
• Σφάλματα API: Χειριστείτε τα σφάλματα API εμφανίζοντας ένα μήνυμα σφάλματος που είναι συγκεκριμένο για το σφάλμα που συνέβη.
• Απρόσμενα Σφάλματα: Χειριστείτε τα απρόσμενα σφάλματα καταγράφοντας το σφάλμα και εμφανίζοντας ένα γενικό μήνυμα σφάλματος στον χρήστη.

Καθολική Διαχείριση Σφαλμάτων

Υλοποιήστε έναν μηχανισμό καθολικής διαχείρισης σφαλμάτων για να παγιδεύετε σφάλματα που δεν παγιδεύονται από τα Error Boundaries. Αυτό μπορεί να γίνει χρησιμοποιώντας έναν καθολικό χειριστή σφαλμάτων ή περιβάλλοντας ολόκληρη την εφαρμογή σε ένα Error Boundary.

Παραδείγματα και Περιπτώσεις Χρήσης από τον Πραγματικό Κόσμο

Εφαρμογή Ηλεκτρονικού Εμπορίου

Σε μια εφαρμογή ηλεκτρονικού εμπορίου, το Suspense μπορεί να χρησιμοποιηθεί για την εμφάνιση δεικτών φόρτωσης κατά την ανάκτηση δεδομένων προϊόντων, και τα Error Boundaries μπορούν να χρησιμοποιηθούν για τη διαχείριση σφαλμάτων που συμβαίνουν κατά τη διαδικασία ολοκλήρωσης της αγοράς. Για παράδειγμα, φανταστείτε έναν χρήστη από την Ιαπωνία να περιηγείται σε ένα ηλεκτρονικό κατάστημα που βρίσκεται στις Ηνωμένες Πολιτείες. Οι εικόνες και οι περιγραφές των προϊόντων μπορεί να χρειαστούν λίγο χρόνο για να φορτώσουν. Το Suspense μπορεί να εμφανίσει μια απλή κινούμενη εικόνα φόρτωσης ενώ αυτά τα δεδομένα ανακτώνται από έναν διακομιστή που πιθανόν βρίσκεται στην άλλη άκρη του κόσμου. Εάν η πύλη πληρωμών αποτύχει λόγω ενός προσωρινού προβλήματος δικτύου (συνηθισμένο σε διαφορετικές υποδομές διαδικτύου παγκοσμίως), ένα Error Boundary θα μπορούσε να εμφανίσει ένα φιλικό προς τον χρήστη μήνυμα που τον προτρέπει να δοκιμάσει ξανά αργότερα.

Πλατφόρμα Κοινωνικής Δικτύωσης

Σε μια πλατφόρμα κοινωνικής δικτύωσης, το Suspense μπορεί να χρησιμοποιηθεί για την εμφάνιση δεικτών φόρτωσης κατά την ανάκτηση προφίλ χρηστών και αναρτήσεων, και τα Error Boundaries μπορούν να χρησιμοποιηθούν για τη διαχείριση σφαλμάτων που συμβαίνουν κατά τη φόρτωση εικόνων ή βίντεο. Ένας χρήστης που περιηγείται από την Ινδία μπορεί να αντιμετωπίσει πιο αργούς χρόνους φόρτωσης για μέσα που φιλοξενούνται σε διακομιστές στην Ευρώπη. Το Suspense μπορεί να δείξει ένα placeholder μέχρι το περιεχόμενο να φορτωθεί πλήρως. Εάν τα δεδομένα του προφίλ ενός συγκεκριμένου χρήστη είναι κατεστραμμένα (σπάνιο αλλά πιθανό), ένα Error Boundary μπορεί να αποτρέψει την κατάρρευση ολόκληρης της ροής ειδήσεων, εμφανίζοντας αντί αυτού ένα απλό μήνυμα σφάλματος όπως «Δεν είναι δυνατή η φόρτωση του προφίλ χρήστη».

Εφαρμογή Πίνακα Ελέγχου (Dashboard)

Σε μια εφαρμογή πίνακα ελέγχου, το Suspense μπορεί να χρησιμοποιηθεί για την εμφάνιση δεικτών φόρτωσης κατά την ανάκτηση δεδομένων από πολλαπλές πηγές, και τα Error Boundaries μπορούν να χρησιμοποιηθούν για τη διαχείριση σφαλμάτων που συμβαίνουν κατά τη φόρτωση γραφημάτων ή διαγραμμάτων. Ένας οικονομικός αναλυτής στο Λονδίνο που έχει πρόσβαση σε έναν παγκόσμιο επενδυτικό πίνακα ελέγχου μπορεί να φορτώνει δεδομένα από πολλαπλά χρηματιστήρια σε όλο τον κόσμο. Το Suspense μπορεί να παρέχει δείκτες φόρτωσης για κάθε πηγή δεδομένων. Εάν το API ενός χρηματιστηρίου είναι εκτός λειτουργίας, ένα Error Boundary μπορεί να εμφανίσει ένα μήνυμα σφάλματος ειδικά για τα δεδομένα αυτού του χρηματιστηρίου, αποτρέποντας το να καταστεί ολόκληρος ο πίνακας ελέγχου μη χρησιμοποιήσιμος.

Συμπέρασμα

Τα React Suspense και Error Boundaries είναι απαραίτητα εργαλεία για τη δημιουργία ανθεκτικών και φιλικών προς τον χρήστη εφαρμογών React. Χρησιμοποιώντας το Suspense για τη διαχείριση των καταστάσεων φόρτωσης και τα Error Boundaries για τη διαχείριση απρόσμενων σφαλμάτων, μπορείτε να βελτιώσετε τη συνολική εμπειρία του χρήστη και να απλοποιήσετε τη διαδικασία ανάπτυξης. Αυτός ο οδηγός παρείχε μια ολοκληρωμένη επισκόπηση των Suspense και Error Boundaries, καλύπτοντας τα πάντα, από τις βασικές έννοιες έως τις προηγμένες τεχνικές. Ακολουθώντας τις βέλτιστες πρακτικές που περιγράφονται σε αυτό το άρθρο, μπορείτε να δημιουργήσετε στιβαρές και αξιόπιστες εφαρμογές React που μπορούν να χειριστούν ακόμη και τα πιο απαιτητικά σενάρια.

Καθώς το React συνεχίζει να εξελίσσεται, τα Suspense και Error Boundaries είναι πιθανό να διαδραματίσουν έναν ολοένα και πιο σημαντικό ρόλο στη δημιουργία σύγχρονων διαδικτυακών εφαρμογών. Κατακτώντας αυτά τα χαρακτηριστικά, μπορείτε να παραμείνετε μπροστά από τις εξελίξεις και να προσφέρετε εξαιρετικές εμπειρίες χρήστη.