app.config.errorHandler dla błędów globalnych
Globalny moduł obsługi błędów, logowanie do Sentry/Datadog oraz wyświetlanie błędów zależne od środowiska.
app.config.errorHandler dla błędów globalnych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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.
Globalny moduł obsługi błędów
Vue udostępnia app.config.errorHandler — pojedynczą funkcję przechwytującą błędy z dowolnego miejsca aplikacji, które nie zostały obsłużone lokalnie. To ostatnia linia obrony.
Sygnatura modułu obsługi
Otrzymuje te same trzy argumenty co onErrorCaptured: błąd, instancję komponentu oraz ciąg informacji.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Konfiguracja
Należy skonfigurować go na instancji aplikacji w pliku wejściowym, przed jej zamontowaniem.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Przechwytywanie nieobsłużonych błędów
Przechwytuje błędy z renderowania komponentów, hooków cyklu życia, watcherów i handlerów zdarzeń w całej aplikacji — także te, które przedostały się przez lokalne hooki onErrorCaptured.
Raportowanie do Sentry na produkcji
W środowisku produkcyjnym należy przekazywać błędy do usługi monitorującej, takiej jak Sentry, aby otrzymywać informacje o awariach napotykanych przez użytkowników.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Szczegółowe logowanie podczas tworzenia
Podczas tworzenia aplikacji należy zapisywać w konsoli więcej szczegółów, aby szybko znajdować i naprawiać błędy.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Rozgałęzianie według środowiska
Solidny moduł obsługi wykonuje obie czynności w jednej funkcji: raportuje błędy na produkcji i szczegółowo zapisuje je w logach podczas tworzenia aplikacji.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Błędy asynchroniczne
Globalny moduł obsługi przechwytuje także błędy zgłoszone wewnątrz asynchronicznych hooków cyklu życia i watcherów. W przypadku surowych, nieobsłużonych odrzuceń obietnic poza Vue należy dodatkowo dodać listener window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Relacja z granicami obsługi błędów
Lokalne granice obsługi błędów i onErrorCaptured obsługują błędy oraz zatrzymują je w pobliżu miejsca ich wystąpienia; globalny moduł obsługi jest siatką bezpieczeństwa dla wszystkiego, co się przez nie przedostanie. Należy stosować oba mechanizmy.
Nie należy ignorować błędów bez komunikatu
Należy unikać pustego modułu obsługi, który ukrywa błędy. Zawsze trzeba przynajmniej zapisać błąd w logach lub go zaraportować — ciche awarie sprawiają, że błędy stają się niewidoczne i bardzo trudne do wykrycia.
Dodawanie kontekstu
Warto wzbogacać raporty o bieżącą trasę, identyfikator użytkownika lub wersję aplikacji, aby szybciej analizować błędy występujące na produkcji.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Szybkie sprawdzenie
Jakie błędy obsługuje app.config.errorHandler?
Podsumowanie
Dowiedziano się, że app.config.errorHandler = (err, instance, info) => {} jest globalnym modułem obsługi wszystkich błędów: raportuje je do Sentry na produkcji, szczegółowo zapisuje w logach podczas tworzenia aplikacji i współpracuje z lokalnymi granicami obsługi błędów, zapewniając warstwową i odporną obsługę błędów.
Często zadawane pytania
Czy lekcja „app.config.errorHandler dla błędów globalnych” jest bezpłatna?
Tak — pełny tekst „app.config.errorHandler dla błędów globalnych” 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 „app.config.errorHandler dla błędów globalnych”?
Globalny moduł obsługi błędów, logowanie do Sentry/Datadog oraz wyświetlanie błędów zależne od środowiska. Ć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 3 z 4.
Ile czasu zajmuje lekcja „app.config.errorHandler dla błędów globalnych”?
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