Εάν έχετε εργαστεί με το React για λίγο, μπορεί να έχετε συναντήσει ένα μήνυμα που λέει "Σκεφτείτε να προσθέσετε ένα όριο σφάλματος στο το δέντρο σας για να προσαρμόσετε τη συμπεριφορά χειρισμού σφαλμάτων." Μπορεί να το έχετε δει αυτό στην κονσόλα του προγράμματος περιήγησής σας κάθε φορά που τα στοιχεία σας σύγκρουση.
Το React συνιστά τη χρήση ορίου σφάλματος για την παροχή καλύτερης εμπειρίας χρήστη όταν παρουσιάζεται σφάλμα.
Τι είναι η κλάση ορίου σφάλματος στο React;
Τα όρια σφαλμάτων λειτουργούν όπως το try/catch block σε vanilla JavaScript. Η διαφορά είναι ότι εντοπίζουν τα σφάλματα που εμφανίζονται στα στοιχεία του React. Εάν παρουσιαστεί σφάλμα σε ένα στοιχείο διεπαφής χρήστη, το React αποπροσαρτά το δέντρο σε αυτό το στοιχείο και το αντικαθιστά με την εναλλακτική διεπαφή χρήστη που έχετε ορίσει. Αυτό σημαίνει ότι ένα σφάλμα επηρεάζει μόνο το στοιχείο στο οποίο εμφανίζεται και η υπόλοιπη εφαρμογή λειτουργεί όπως αναμένεται.
Σύμφωνα με την Τεκμηρίωση React, οι κλάσεις ορίου σφάλματος δεν εντοπίζουν σφάλματα σε:
- Χειριστές συμβάντων.
- Ασύγχρονος κώδικας.
- Κωδικός από την πλευρά του διακομιστή.
- Σφάλματα που εντάσσονται στο ίδιο το όριο σφάλματος (και όχι στα παιδιά του).
Για τα παραπάνω σφάλματα, μπορείτε να χρησιμοποιήσετε το μπλοκ try/catch.
Για παράδειγμα, για να εντοπίσετε ένα σφάλμα που παρουσιάζεται στο χειριστής συμβάντων, χρησιμοποιήστε τον ακόλουθο κώδικα:
λειτουργίαEventComponent() {
συνθ [σφάλμα, setError] = useState(μηδενικό)συνθ handleClick = () => {
δοκιμάστε {
// Κάνε κάτι
} σύλληψη (λάθος) {
setError (σφάλμα)
}
}
ΕΠΙΣΤΡΟΦΗ (
<>
<div>{λάθος? λάθος: ""}div>
<κουμπίστο κλικ={handleClick}>Κουμπίκουμπί>
)
}
Χρησιμοποιήστε όρια σφαλμάτων για να εντοπίσετε σφάλματα μόνο στα στοιχεία του React.
Δημιουργία κλάσης ορίου σφάλματος
Μπορείτε να δημιουργήσετε ένα όριο σφάλματος ορίζοντας μια κλάση που περιέχει μία ή και τις δύο από τις ακόλουθες μεθόδους:
- στατικό getDerivedStateFromError()
- componentDidCatch()
Η συνάρτηση getDerivedStateFromError() ενημερώνει την κατάσταση του στοιχείου μόλις εντοπιστεί το σφάλμα, ενώ μπορείτε να χρησιμοποιήσετε το componentDidCatch() για να καταγράψετε πληροφορίες σφάλματος στην κονσόλα. Μπορείτε επίσης να στείλετε τα σφάλματα σε μια υπηρεσία αναφοράς σφαλμάτων.
Παρακάτω είναι ένα παράδειγμα που δείχνει πώς να δημιουργήσετε μια απλή κλάση ορίου σφάλματος.
τάξηΌριο σφάλματοςεκτείνεταιΑντιδρώ.Συστατικό{
κατασκευαστής(σκηνικά) {
σούπερ(σκηνικά)
Αυτό.state = { λάθος: ψευδής };
}στατικόςgetDerivedStateFromError(λάθος){
// Ενημέρωση κατάστασης, ώστε η επόμενη απόδοση να εμφανίζει την εναλλακτική διεπαφή χρήστη.
ΕΠΙΣΤΡΟΦΗ { λάθος: λάθος };
}componentDidCatch (σφάλμα, errorInfo) {
// Καταγραφή του σφάλματος σε μια υπηρεσία αναφοράς σφαλμάτων
}render() {
αν (Αυτό.κατάσταση.λάθος) {
// Δημιουργήστε μια προσαρμοσμένη εναλλακτική διεπαφή χρήστη εδώ
ΕΠΙΣΤΡΟΦΗ<h1>Φαίνεται ότι υπάρχει πρόβλημα.h1>;
}
ΕΠΙΣΤΡΟΦΗΑυτό.προπ.παιδια?
}
}
εξαγωγήΠροκαθορισμένο ErrorBoundary;
Όταν παρουσιαστεί ένα σφάλμα, η getDerivedStateFromError() θα ενημερώσει την κατάσταση και, κατά συνέπεια, θα ενεργοποιήσει μια εκ νέου απόδοση που θα εμφανίζει το εναλλακτικό περιβάλλον εργασίας χρήστη.
Εάν δεν θέλετε να δημιουργήσετε την κλάση ορίου σφάλματος από την αρχή, χρησιμοποιήστε το React-error-boundary NPM πακέτο. Αυτό το πακέτο παρέχει το στοιχείο ErrorBoundary που περιτυλίγει στοιχεία που πιστεύετε ότι ενδέχεται να προκαλέσουν σφάλματα.
Χρήση της κλάσης ορίου σφάλματος
Για να χειριστείτε σφάλματα, αναδιπλώστε τα στοιχεία με το στοιχείο κλάσης ορίου σφάλματος. Μπορείτε να τυλίξετε το στοιχείο ανώτατου επιπέδου ή μεμονωμένα εξαρτήματα.
Εάν αναδιπλώσετε το στοιχείο ανώτατου επιπέδου, η κλάση ορίου σφάλματος θα χειριστεί τα σφάλματα που παρουσιάζονται από όλα τα στοιχεία στην εφαρμογή React.
<Όριο σφάλματος>
<App/>
Όριο σφάλματος>
Εάν αναδιπλώσετε ένα μεμονωμένο στοιχείο με ένα ErrorBoundary, ένα σφάλμα σε αυτό το στοιχείο δεν θα επηρεάσει τον τρόπο απόδοσης ενός άλλου στοιχείου.
<Όριο σφάλματος>
<Προφίλ/>
Όριο σφάλματος>
Για παράδειγμα, ένα σφάλμα στο στοιχείο προφίλ δεν θα επηρεάσει τον τρόπο απόδοσης ενός άλλου στοιχείου όπως το στοιχείο Hero. Ενώ το στοιχείο προφίλ μπορεί να διακοπεί, η υπόλοιπη εφαρμογή θα λειτουργεί καλά. Αυτό είναι πολύ καλύτερο από την απόδοση της γενικής λευκής εναλλακτικής οθόνης που παρέχεται από το React.
Χειρισμός σφαλμάτων σε JavaScript
Τα σφάλματα προγραμματισμού μπορεί να είναι απογοητευτικά για προγραμματιστές και χρήστες. Η αποτυχία χειρισμού σφαλμάτων μπορεί να εκθέσει τους χρήστες σας σε άσχημη διεπαφή χρήστη με δυσνόητα μηνύματα σφάλματος.
Κατά τη δημιουργία του στοιχείου React, δημιουργήστε μια κλάση ορίου σφάλματος είτε από την αρχή είτε χρησιμοποιώντας το πακέτο react-error-boundary για να εμφανίσετε φιλικά προς το χρήστη μηνύματα σφάλματος.