Vue Academy · Lekcja

Monitorowanie i utrzymanie

Monitorowanie aplikacji produkcyjnych i dbanie o ich prawidłowe działanie.

Monitorowanie i utrzymanie to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. 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 3 lekcji w sumie.

Życie po uruchomieniu

Publikacja to początek, a nie koniec. Sprawna aplikacja wymaga ciągłego monitorowania w celu wykrywania błędów, analityki pozwalającej zrozumieć sposób jej używania oraz regularnego utrzymania, aby pozostała bezpieczna i aktualna.

Dlaczego śledzić błędy?

Błędy występujące na urządzeniach użytkowników są niewidoczne, jeśli nie są gromadzone. Śledzenie błędów rejestruje awarie na produkcji, dzięki czemu można naprawiać problemy napotykane przez użytkowników, często zanim je zgłoszą.

Sentry do śledzenia błędów

Sentry to powszechnie używana usługa do śledzenia błędów. Należy zainstalować jej SDK i zainicjalizować je podczas uruchamiania aplikacji, aby automatycznie przechwytywać nieobsługiwane błędy.

npm install @sentry/vue

Inicjalizowanie Sentry

Sentry należy zainicjalizować za pomocą DSN projektu i instancji aplikacji Vue, aby mogło ono podłączyć się do obsługi błędów Vue.

import * as Sentry from "@sentry/vue"
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
Sentry.init({
  app,
  dsn: "https://example@sentry.io/123"
})
app.mount("#app")

Przechwytywanie własnych błędów

Oprócz automatycznego przechwytywania można ręcznie zgłaszać obsłużone błędy, aby uzyskać kontekst dotyczący problemów, które kod już przechwytuje.

try {
  riskyOperation()
} catch (err) {
  Sentry.captureException(err)
}

Dodawanie analityki

Analityka pokazuje, jak użytkownicy faktycznie korzystają z aplikacji: które strony odwiedzają, w co klikają i w którym miejscu rezygnują. Te dane pomagają podejmować decyzje dotyczące produktu.

Śledzenie wyświetleń stron

Za pomocą Vue Router można wysyłać zdarzenie wyświetlenia strony przy każdej nawigacji, korzystając z hooka routera.

router.afterEach((to) => {
  trackPageView(to.fullPath)
})

Aktualizowanie zależności

Nieaktualne pakiety gromadzą błędy i luki w zabezpieczeniach. Należy okresowo sprawdzać dostępność aktualizacji i je stosować, testując aplikację na bieżąco.

npm outdated
npm update

Audyt pod kątem luk

Należy uruchomić audyt bezpieczeństwa, aby znaleźć znane luki w drzewie zależności i zastosować dostępne poprawki.

npm audit
npm audit fix

Monitorowanie wydajności na produkcji

Rzeczywisti użytkownicy korzystają z różnych urządzeń i sieci. Należy używać monitorowania rzeczywistych użytkowników, często wbudowanego w narzędzia do obsługi błędów, oraz mierników takich jak czas ładowania, aby po uruchomieniu utrzymać dobrą wydajność.

Obsługa zmian powodujących niezgodność

Aktualizacje głównych wersji mogą wprowadzać zmiany powodujące niezgodność. Należy przeczytać dziennik zmian i przewodnik migracji, zaktualizować aplikację w osobnej gałęzi, uruchomić zestaw testów i naprawić problemy przed scaleniem. Testy zapewniają bezpieczeństwo tego procesu.

Szybki test

Sprawdź swoją wiedzę na temat monitorowania i utrzymania.

Podsumowanie

Po uruchomieniu należy monitorować aplikację za pomocą śledzenia błędów (Sentry), analizować sposób jej używania za pomocą analityki, aktualizować pakiety przy użyciu npm outdated i npm audit oraz obserwować wydajność na produkcji. Zmiany powodujące niezgodność należy wprowadzać ostrożnie, korzystając z zestawu testów. W następnym kroku poznają Państwo zaawansowane wzorce i dobre praktyki.

Często zadawane pytania

Czy lekcja „Monitorowanie i utrzymanie” jest bezpłatna?

Tak — pełny tekst „Monitorowanie i utrzymanie” 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 3 lekcji w sumie.

Co nauczysz się w „Monitorowanie i utrzymanie”?

Monitorowanie aplikacji produkcyjnych i dbanie o ich prawidłowe działanie. Ć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 3.

Ile czasu zajmuje lekcja „Monitorowanie i utrzymanie”?

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

← Powrót do Vue Academy