Vue Academy · Lekcja

Hook cyklu życia onErrorCaptured

Przechwytywanie błędów z komponentów potomnych, zwracanie false w celu zatrzymania propagacji oraz obiekty błędów.

Hook cyklu życia onErrorCaptured to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Przechwytywanie błędów w komponentach

Vue udostępnia hak cyklu życia onErrorCaptured do przechwytywania błędów zgłaszanych przez komponenty potomne. Pozwala on komponentowi nadrzędnemu przechwytywać błędy z całego poddrzewa.

Sygnatura haka

onErrorCaptured otrzymuje trzy argumenty: błąd, instancję komponentu, który go zgłosił, oraz tekst info opisujący miejsce jego wystąpienia.

import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
  // handle it
});

Argument err

Pierwszym argumentem jest zgłoszony obiekt błędu — zazwyczaj instancja Error zawierająca komunikat i stos wywołań, które można zarejestrować lub wyświetlić.

onErrorCaptured((err) => {
  console.error("Captured:", err.message);
});

Argument instance

Drugim argumentem jest instancja komponentu, w którym wystąpił błąd. Przydaje się ona podczas debugowania lub dołączania kontekstu do raportów.

onErrorCaptured((err, instance) => {
  console.log("From component:", instance);
});

Argument info

Trzecim argumentem jest tekst informujący, który cykl życia lub operacja wywołały błąd — na przykład „render function”, „setup function” albo konkretny hak.

onErrorCaptured((err, instance, info) => {
  console.log("Vue context:", info);
});

Tylko błędy komponentów potomnych

Co ważne, onErrorCaptured przechwytuje błędy z komponentów potomnych, a nie z własnej funkcji setup ani renderowania komponentu. Hak należy umieścić w komponencie nadrzędnym wobec kodu, który ma być chroniony.

Zatrzymywanie propagacji

Domyślnie przechwycony błąd nadal propaguje się do nadrzędnych procedur obsługi oraz globalnej procedury obsługi. Należy zwrócić false, aby zatrzymać jego dalsze propagowanie.

onErrorCaptured((err) => {
  reportError(err);
  return false; // do not propagate
});

Dlaczego zatrzymywać propagację

Zwrócenie false ogranicza błąd lokalnie — przydaje się, gdy komponent w pełni obsługuje niepowodzenie (np. wyświetla widok zastępczy) i nie chce dodatkowo uruchamiać globalnej procedury obsługi.

Pozwalanie na propagację

Jeśli błędy mają być widoczne także dla procedur obsługi wyższego poziomu (lub globalnej), nie należy zwracać false. Hak zarejestruje wtedy błąd lokalnie i pozwoli mu propagować się wyżej.

onErrorCaptured((err) => {
  logLocally(err);
  // no return -> still propagates
});

Praktyczne zastosowanie

Typowym zastosowaniem jest rejestrowanie błędu wraz z flagą odzyskiwania. Należy ustawić reaktywną flagę, aby wyświetlić widok zastępczy, i jednocześnie zgłosić błąd do celów diagnostycznych.

const failed = ref(false);
onErrorCaptured((err) => {
  failed.value = true;
  report(err);
  return false;
});

Uwagi dotyczące asynchroniczności

onErrorCaptured przechwytuje błędy podczas renderowania komponentów potomnych, ich cyklu życia oraz synchronicznych procedur obsługi. Niektóre błędy asynchroniczne (nieprzechwycone odrzucenia obietnic) lepiej obsługiwać globalnie — zostanie to omówione później.

Szybkie sprawdzenie

Co powoduje zwrócenie false z onErrorCaptured?

Podsumowanie

Poznał Pan/Pani onErrorCaptured((err, instance, info)), który przechwytuje błędy z komponentów potomnych. Tekst info dostarcza kontekstu cyklu życia, a zwrócenie false zatrzymuje propagację, dzięki czemu komponent może lokalnie obsłużyć błąd.

Często zadawane pytania

Czy lekcja „Hook cyklu życia onErrorCaptured” jest bezpłatna?

Tak — pełny tekst „Hook cyklu życia onErrorCaptured” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Hook cyklu życia onErrorCaptured”?

Przechwytywanie błędów z komponentów potomnych, zwracanie false w celu zatrzymania propagacji oraz obiekty błędów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Hook cyklu życia onErrorCaptured”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Hook cyklu życia onErrorCaptured
Komponenty Error Boundary
app.config.errorHandler dla błędów globalnych
Asynchroniczna obsługa błędów w composable

← Powrót do Vue Academy