Dacă ați lucrat cu React o perioadă, este posibil să fi întâlnit un mesaj care spune „Luați în considerare adăugarea unei limite de eroare la arborele dvs. pentru a personaliza comportamentul de tratare a erorilor.” Este posibil să fi văzut acest lucru în consola browser-ului dvs. oricând componentele dvs prăbușire.
React recomandă utilizarea unei limite de eroare pentru a oferi o experiență mai bună pentru utilizator atunci când apare o eroare.
Care este clasa de limită de eroare în React?
Limitele de eroare funcționează ca try/catch block în vanilla JavaScript. Diferența este că prind erorile care apar în componentele React. Dacă apare o eroare într-o componentă a interfeței de utilizare, React demontează arborele din acea componentă și îl înlocuiește cu interfața de utilizare alternativă pe care ați definit-o. Aceasta înseamnă că o eroare afectează doar componenta în care apare și restul aplicației funcționează conform așteptărilor.
In conformitate cu Reacționează documentația, clasele de limite de eroare nu surprind erori în:
- Managerii de evenimente.
- Cod asincron.
- Cod pe partea serverului.
- Erori aruncate în limita erorii în sine (mai degrabă decât copiii săi).
Pentru erorile de mai sus, puteți folosi blocul try/catch.
De exemplu, pentru a detecta o eroare care apare în organizatorul evenimentului, utilizați următorul cod:
funcţieEventComponent() {
const [eroare, setError] = useState(nul)const handleClick = () => {
încerca {
// Fă ceva
} captură (eroare) {
setError (eroare)
}
}
întoarcere (
<>
<div>{eroare? eroare: ""}div>
<butononClick={handleClick}>Butonbuton>
)
}
Utilizați limitele de eroare pentru a detecta erori numai în componentele React.
Crearea unei clase de limite de eroare
Puteți crea o limită de eroare definind o clasă care conține una sau ambele dintre următoarele metode:
- static getDerivedStateFromError()
- componentDidCatch()
Funcția getDerivedStateFromError() actualizează starea componentei odată ce eroarea este detectată, în timp ce puteți utiliza componentDidCatch() pentru a înregistra informațiile despre eroare în consolă. De asemenea, puteți trimite erorile unui serviciu de raportare a erorilor.
Mai jos este un exemplu care arată cum să creați o clasă de limită de eroare simplă.
clasăErrorBoundaryse extindeReacţiona.Componentă{
constructor(recuzită) {
super(recuzită);
acest.state = { eroare: fals };
}staticgetDerivedStateFromError(eroare){
// Actualizați starea astfel încât următoarea redare să arate interfața de utilizare de rezervă.
întoarcere { eroare: eroare };
}componentDidCatch (eroare, errorInfo) {
// Înregistrați eroarea la un serviciu de raportare a erorilor
}randa() {
dacă (acest.stat.eroare) {
// Creați o interfață de utilizare de rezervă personalizată aici
întoarcere<h1>Se pare că există o problemă.h1>;
}
întoarcereacest.recuzită.copii;
}
}
exportMod implicit ErrorBoundary;
Când apare o eroare, getDerivedStateFromError() va actualiza starea și, în consecință, va declanșa o re-rendare care va afișa interfața de utilizare de rezervă.
Dacă nu doriți să creați clasa de limite de eroare de la zero, utilizați pachetul NPM react-error-boundary. Acest pachet oferă componenta ErrorBoundary care include componentele despre care credeți că ar putea genera erori.
Utilizarea clasei de limite de eroare
Pentru a gestiona erorile, împachetați componentele cu componenta clasa de limită a erorilor. Puteți împacheta componenta de nivel superior sau componente individuale.
Dacă împachetați componenta de nivel superior, clasa limită de erori va gestiona erorile aruncate de toate componentele din aplicația React.
<ErrorBoundary>
<App/>
ErrorBoundary>
Dacă includeți o componentă individuală cu un ErrorBoundary, o eroare în acea componentă nu va afecta modul în care se redă o altă componentă.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
De exemplu, o eroare în componenta de profil nu va afecta modul în care este redată o altă componentă precum componenta Hero. În timp ce componenta de profil se poate bloca, restul aplicației va funcționa bine. Acest lucru este mult mai bun decât redarea ecranului de rezervă alb generic oferit de React.
Gestionarea erorilor în JavaScript
Erorile de programare pot fi frustrante pentru dezvoltatori și utilizatori. Nerespectarea erorilor poate expune utilizatorii la o interfață de utilizare urâtă, cu mesaje de eroare greu de înțeles.
Când construiți componenta React, creați o clasă de limită de eroare fie de la zero, fie folosind pachetul react-error-boundary pentru a afișa mesaje de eroare ușor de utilizat.
