Τι είναι τα όρια σφαλμάτων (error boundaries) και τι αποτρέπουν;

Question

Accepted Answer

Ένα **error boundary** είναι ένα στοιχείο που αποτρέπει σφάλματα JavaScript που εμφανίζονται **κατά την απόδοση** στο δέντρο των θυγατρικών του, εμφανίζει ένα UI εναλλακτικής λύσης αντί να καταρρεύσει ολόκληρη η εφαρμογή, και μπορεί να καταγράψει το σφάλμα. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Τι αποτρέπει — και τι όχι ✅ Αποτρέπει: σφάλματα σε **render**, σε **lifecycle methods** και σε κατασκευαστές των στοιχείων κάτω από αυτό. ❌ Δεν αποτρέπει: - Σφάλματα σε **event handlers** (χρησιμοποιήστε `try/catch` εκεί). - **Ασύγχρονο** κώδικα (promises, `setTimeout`) — είναι εκτός της ροής απόδοσης. - Σφάλματα στο ίδιο το όριο ή κατά τη διάρκεια **SSR**. ## Πρακτικές σημειώσεις - Τα όρια σφαλμάτων πρέπει αυτή τη στιγμή να είναι **στοιχεία κλάσης** (ή χρησιμοποιήστε τη βιβλιοθήκη `react-error-boundary` για ένα API φιλικό προς τα hooks). - Τοποθετήστε αρκετά όρια γύρω από ανεξάρτητες ενότητες (widgets, routes) ώστε ένα αποτυχημένο widget να μην κατεstrαβαίνει τα πάντα — ένα ενιαίο όριο σε κορυφαίο επίπεδο μετατρέπει οποιοδήποτε σφάλμα σε εντελώς κενή σελίδα.