Komponenty Error Boundary
Budowanie komponentu opakowującego ErrorBoundary z fallback slotem i wyświetlaniem błędów.
Komponenty Error Boundary to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 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.
Czym jest granica błędów
Granica błędów (error boundary) to wielokrotnego użytku komponent, który otacza część interfejsu, przechwytuje błędy występujące wewnątrz niej i wyświetla widok zastępczy zamiast dopuszczać do awarii całej aplikacji.
Główna idea
Granica przechowuje flagę hasError. Gdy jej wartość to false, renderuje komponenty potomne; po przechwyceniu błędu zmienia wartość na true i renderuje widok zastępczy.
import { ref } from "vue";
const hasError = ref(false);Przechwytywanie błędu
Należy użyć onErrorCaptured, aby ustawić flagę i zatrzymać propagację, dzięki czemu granica w pełni przejmuje obsługę błędu.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Zapisywanie szczegółów błędu
Należy przechwycić również sam błąd, aby widok zastępczy mógł wyświetlić komunikat lub zaoferować ponowienie operacji.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});Struktura szablonu
Gdy komponent działa poprawnie, należy renderować domyślny slot (komponenty potomne), a po wystąpieniu błędu — slot zastępczy.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Domyślny slot wyświetla komponenty potomne
Domyślny slot zawiera chroniony interfejs. W normalnych warunkach granica jest niewidoczna — po prostu przekazuje komponenty potomne dalej.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Slot zastępczy wyświetlany po błędzie
Należy udostępnić nazwany slot fallback zawierający interfejs błędu. Może on otrzymać błąd za pomocą właściwości slotu zakresowego.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Dodawanie ponowienia
Należy udostępnić funkcję resetowania, aby użytkownicy mogli odzyskać sprawność interfejsu. Metoda usuwa flagę i ponownie renderuje komponenty potomne.
function reset() {
hasError.value = false;
error.value = null;
}Ponowienie w widoku zastępczym
Należy przekazać reset przez slot zakresowy, aby widok zastępczy mógł zaoferować przycisk ponowienia.
<slot v-else name="fallback" :error="error" :reset="reset" />Domyślna zawartość zastępcza
Należy zapewnić slotowi z zawartością zastępczą sensowną domyślną treść, aby granica działała także bez dostarczenia niestandardowej zawartości zastępczej.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Dlaczego granice obsługi błędów są ważne
Bez granic obsługi błędów jeden wadliwy widget może wyłączyć cały widok. Granice izolują awarie, dzięki czemu reszta aplikacji nadal działa — to kluczowy wzorzec odporności.
Szybkie sprawdzenie
Jak granica obsługi błędów decyduje o tym, co wyrenderować?
Podsumowanie
Zbudowano granicę obsługi błędów: ref hasError, funkcję onErrorCaptured, która ustawia tę wartość i zwraca false, domyślny slot na elementy podrzędne oraz slot z zawartością zastępczą (z błędem i funkcją resetowania), wyświetlany po wystąpieniu błędu — dzięki temu awarie są izolowane od reszty aplikacji.
Często zadawane pytania
Czy lekcja „Komponenty Error Boundary” jest bezpłatna?
Tak — pełny tekst „Komponenty Error Boundary” 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 „Komponenty Error Boundary”?
Budowanie komponentu opakowującego ErrorBoundary z fallback slotem i wyświetlaniem 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 2 z 4.
Ile czasu zajmuje lekcja „Komponenty Error Boundary”?
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