O eroare JavaScript neprinsă aruncată în faza de randare a unei componente determină demontarea completă a întregului arbore React, lăsând utilizatorului un ecran alb gol (white screen of death). Error Boundaries sunt componente speciale care prind erorile aruncate în faza de randare, în ciclurile de viață și în constructorii copiilor lor, afișând o interfață vizuală de rezervă (fallback UI) fără a compromite restul paginii.
Implementarea unui Error Boundary de clasă cu buton de reîncercare
import React from 'react';
export class GranitaDeEroare extends React.Component {
constructor(props) {
super(props);
this.state = { areEroare: false, mesajEroare: '' };
}
// 1. Actualizează starea pentru ca următoarea randare să afișeze interfața de fallback:
static getDerivedStateFromError(error) {
return { areEroare: true, mesajEroare: error.message };
}
// 2. Înregistrează eroarea într-un serviciu extern (ex. Sentry, Datadog):
componentDidCatch(error, info) {
console.error('Eroare captată de GranitaDeEroare:', error, info.componentStack);
}
reseteazaEroare = () => {
this.setState({ areEroare: false, mesajEroare: '' });
};
render() {
if (this.state.areEroare) {
return (
<div className="caseta-eroare">
<h3>A apărut o problemă la afișarea acestui modul.</h3>
<p>{this.state.mesajEroare}</p>
<button onClick={this.reseteazaEroare}>Reîncearcă</button>
</div>
);
}
return this.props.children;
}
}
Ce NU prinde un Error Boundary: Erorile din handlerele de evenimente (
onClick – unde se folosește try...catch clasic), codul asincron (setTimeout, promisiuni neașteptate) și erorile aruncate chiar în interiorul componentei Error Boundary în sine.
Întrebări & Exemple de Cod:
Gestiunea Erorilor Vizuale în React: Error Boundaries și componentDidCatchAi o nelămurire despre utilizarea comenzii
Gestiunea Erorilor Vizuale în React: Error Boundaries și componentDidCatchsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.