Ako ste neko vrijeme radili s Reactom, možda ste naišli na poruku koja glasi "Razmislite o dodavanju granice pogreške u svoje stablo za prilagodbu ponašanja rukovanja pogreškama." Možda ste to vidjeli u konzoli preglednika kad god su vaše komponente sudar.
React preporučuje korištenje granice pogreške kako bi se pružilo bolje korisničko iskustvo kada se dogodi pogreška.
Što je klasa granice pogreške u Reactu?
Granice pogreške funkcioniraju kao blok try/catch u vanilla JavaScriptu. Razlika je u tome što oni hvataju pogreške koje se javljaju u React komponentama. Ako se pojavi pogreška u komponenti korisničkog sučelja, React demontira stablo unutar te komponente i zamjenjuje ga rezervnim korisničkim sučeljem koje ste definirali. To znači da pogreška utječe samo na komponentu u kojoj se pojavljuje, a ostatak aplikacije radi prema očekivanjima.
Prema Reagirajte dokumentaciju, klase granica pogreške ne hvataju pogreške u:
- Rukovatelji događajima.
- Asinkroni kod.
- Kod na strani poslužitelja.
- Pogreške ubačene u samu granicu pogreške (umjesto njezine djece).
Za gore navedene pogreške možete koristiti blok try/catch.
Na primjer, da biste uhvatili pogrešku koja se pojavljuje u rukovatelj događajimaupotrijebite sljedeći kod:
funkcijaEventComponent() {
konst [greška, setError] = useState(ništavan)konst rukovanjeKlik = () => {
probati {
// Učini nešto
} ulov (pogreška) {
setError (greška)
}
}
povratak (
<>
<div>{greška? pogreška: ""}div>
<dugmena klik={handleClick}>Dugmedugme>
)
}
Koristite granice pogrešaka da uhvatite pogreške samo u React komponentama.
Stvaranje granične klase pogreške
Možete stvoriti granicu pogreške definiranjem klase koja sadrži jednu ili obje sljedeće metode:
- statički getDerivedStateFromError()
- komponentaDidCatch()
Funkcija getDerivedStateFromError() ažurira stanje komponente nakon što je pogreška uhvaćena, dok možete koristiti componentDidCatch() za zapisivanje informacija o pogrešci u konzolu. Također možete poslati pogreške službi za prijavu pogrešaka.
Dolje je primjer koji pokazuje kako stvoriti jednostavnu klasu granice pogreške.
razredaErrorBoundaryproteže seReagirati.komponenta{
konstruktor(rekviziti) {
super(rekviziti);
ovaj.stanje = { greška: lažno };
}statičkigetDerivedStateFromError(greška){
// Ažuriraj stanje tako da će sljedeći render prikazati rezervno korisničko sučelje.
povratak { greška: pogreška };
}componentDidCatch (greška, errorInfo) {
// Zabilježite pogrešku u servis za prijavu pogrešaka
}render() {
ako (ovaj.država.pogreška) {
// Ovdje stvorite prilagođeno rezervno korisničko sučelje
povratak<h1>Čini se da postoji problem.h1>;
}
povratakovaj.rekviziti.djeca;
}
}
izvozzadano ErrorBoundary;
Kada dođe do pogreške, getDerivedStateFromError() će ažurirati stanje i posljedično pokrenuti ponovno iscrtavanje koje će prikazati rezervno korisničko sučelje.
Ako ne želite kreirati klasu granice pogreške od nule, koristite reakcija-pogreška-granični NPM paket. Ovaj paket pruža komponentu ErrorBoundary koja obavija komponente za koje mislite da bi mogle izazvati pogreške.
Korištenje klase granice pogreške
Za rukovanje pogreškama, omotajte komponente komponentom klase granice pogreške. Možete omotati komponentu najviše razine ili pojedinačne komponente.
Ako zamotate komponentu najviše razine, klasa granice pogreške obradit će pogreške koje izbacuju sve komponente u aplikaciji React.
<ErrorBoundary>
<aplikacija/>
ErrorBoundary>
Ako omotate pojedinačnu komponentu s ErrorBoundary, pogreška u toj komponenti neće utjecati na to kako se druga komponenta prikazuje.
<ErrorBoundary>
<Profil/>
ErrorBoundary>
Na primjer, pogreška u komponenti profila neće utjecati na način na koji se prikazuje druga komponenta poput komponente Hero. Iako bi se komponenta profila mogla srušiti, ostatak aplikacije radit će dobro. Ovo je puno bolje od renderiranja generičkog bijelog rezervnog zaslona koji nudi React.
Rukovanje pogreškama u JavaScriptu
Programske pogreške mogu biti frustrirajuće za programere i korisnike. Neuspješno rješavanje pogrešaka može izložiti vaše korisnike ružnom sučelju s teško razumljivim porukama o pogreškama.
Kada gradite svoju React komponentu, stvorite klasu granice pogreške ispočetka ili pomoću paketa react-error-boundary za prikaz poruka o pogrešci koje su jednostavne za korištenje.