Jeśli pracowałeś z Reactem przez jakiś czas, mogłeś napotkać komunikat o treści: „Rozważ dodanie granicy błędu do twoje drzewo, aby dostosować sposób obsługi błędów”. Być może widziałeś to w konsoli przeglądarki za każdym razem, gdy twoje komponenty rozbić się.
React zaleca stosowanie granicy błędu, aby zapewnić lepszą obsługę użytkownika w przypadku wystąpienia błędu.
Co to jest klasa granicy błędu w React?
Granice błędów działają jak blok try/catch w waniliowym JavaScript. Różnica polega na tym, że przechwytują one błędy występujące w komponentach React. Jeśli w komponencie interfejsu użytkownika wystąpi błąd, React odłącza drzewo w tym komponencie i zastępuje je awaryjnym interfejsem użytkownika, który zdefiniowałeś. Oznacza to, że błąd dotyczy tylko komponentu, w którym występuje, a reszta aplikacji działa zgodnie z oczekiwaniami.
Według Dokumentacja reakcji, klasy granic błędów nie przechwytują błędów w:
- Obsługa zdarzeń.
- Kod asynchroniczny.
- Kod po stronie serwera.
- Błędy zgłaszane w samej granicy błędu (a nie w jej elementach podrzędnych).
W przypadku powyższych błędów możesz użyć bloku try/catch.
Na przykład, aby przechwycić błąd występujący w pliku obsługa zdarzeń, użyj następującego kodu:
funkcjonowaćSkładnik zdarzenia() {
konst [błąd, setError] = useState(zero)konst uchwytKliknij = () => {
próbować {
// Zrób coś
} złapać (błąd) {
setError (błąd)
}
}
powrót (
<>
<dz>{błąd? błąd: ""}dz>
<przyciskna kliknięcie={uchwytKliknij}>Przyciskprzycisk>
)
}
Użyj granic błędów, aby wychwycić błędy tylko w komponentach React.
Tworzenie klasy granicy błędu
Granicę błędu można utworzyć, definiując klasę zawierającą jedną lub obie z następujących metod:
- static getDerivedStateFromError()
- komponentDidCatch()
Funkcja getDerivedStateFromError() aktualizuje stan komponentu po wykryciu błędu, podczas gdy można użyć componentDidCatch() do zarejestrowania informacji o błędzie w konsoli. Błędy można również wysłać do usługi raportowania błędów.
Poniżej znajduje się przykład pokazujący, jak utworzyć prostą klasę granicy błędu.
klasaGranica błędurozciąga sięReagować.Część{
konstruktor(rekwizyty) {
Super(rekwizyty);
Tenstan = { błąd: FAŁSZ };
}statycznygetDerivedStateFromError(błąd){
// Zaktualizuj stan, aby następne renderowanie pokazywało rezerwowy interfejs użytkownika.
powrót { błąd: błąd };
}componentDidCatch (błąd, informacja o błędzie) {
// Zarejestruj błąd w usłudze raportowania błędów
}renderowanie() {
Jeśli (Ten.państwo.błąd) {
// Tutaj utwórz niestandardowy awaryjny interfejs użytkownika
powrót<h1>Wydaje się, że jest problem.h1>;
}
powrótTen.rekwizyty.dzieci;
}
}
eksportdomyślny Granica błędu;
Kiedy wystąpi błąd, getDerivedStateFromError() zaktualizuje stan i w konsekwencji uruchomi ponowne renderowanie, które wyświetli awaryjny interfejs użytkownika.
Jeśli nie chcesz tworzyć klasy granicy błędów od podstaw, użyj metody pakiet NPM dotyczący granic błędów reagowania. Ten pakiet zawiera komponent ErrorBoundary, który obejmuje komponenty, które Twoim zdaniem mogą powodować błędy.
Korzystanie z klasy granicy błędu
Aby obsłużyć błędy, opakuj komponenty komponentem klasy granicy błędu. Możesz opakować komponent najwyższego poziomu lub poszczególne komponenty.
Jeśli opakujesz komponent najwyższego poziomu, klasa granic błędów obsłuży błędy zgłaszane przez wszystkie komponenty w aplikacji React.
<Granica błędu>
<Aplikacja/>
Granica błędu>
Jeśli zawiniesz pojedynczy komponent za pomocą ErrorBoundary, błąd w tym komponencie nie wpłynie na sposób renderowania innego komponentu.
<Granica błędu>
<Profil/>
Granica błędu>
Na przykład błąd w komponencie profilu nie wpłynie na sposób renderowania innego komponentu, takiego jak komponent Hero. Podczas gdy komponent profilu może ulec awarii, reszta aplikacji będzie działać poprawnie. Jest to znacznie lepsze niż renderowanie standardowego białego ekranu awaryjnego zapewnianego przez React.
Obsługa błędów w JavaScript
Błędy programistyczne mogą być frustrujące dla programistów i użytkowników. Brak obsługi błędów może narazić użytkowników na brzydki interfejs użytkownika z trudnymi do zrozumienia komunikatami o błędach.
Tworząc komponent React, stwórz klasę granic błędów albo od podstaw, albo za pomocą pakietu react-error-boundary, aby wyświetlić przyjazne dla użytkownika komunikaty o błędach.
