Vue Academy · Lektion

app.config.errorHandler för globala fel

Global felhanterare, loggning till Sentry/Datadog och miljöanpassad felvisning.

Lektion 3 av 413 steg

app.config.errorHandler för globala fel är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Den globala felhanteraren

Vue tillhandahåller app.config.errorHandler, en enda funktion som fångar upp fel från var som helst i appen som inte har hanterats lokalt. Det är er sista försvarslinje.

Hanterarens signatur

Den tar emot samma tre argument som onErrorCaptured: felet, komponentinstansen och en informationssträng.

app.config.errorHandler = (err, instance, info) => {
  // global handling
};

Konfigurera den

Konfigurera den på appinstansen i er startfil, innan appen mountas.

const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  console.error(err, info);
};
app.mount("#app");

Fånga obehandlade fel

Den fångar upp fel från komponentrendering, livscykelhakar, watchers och händelsehanterare i hela appen – inklusive fel som har bubblat förbi lokala onErrorCaptured-hakar.

Rapportera till Sentry i produktion

Vid produktion bör ni vidarebefordra fel till en övervakningstjänst som Sentry, så att ni får kännedom om de fel användarna råkar ut för.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) {
    Sentry.captureException(err, { extra: { info } });
  }
};

Detaljerad loggning under utveckling

Under utvecklingen bör ni logga mer detaljerad information i konsolen för att snabbt kunna felsöka.

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();
  }
};

Välj utifrån miljö

En robust hanterare gör båda delarna i en och samma funktion: rapporterar i produktion och loggar utförligt under utvecklingen.

app.config.errorHandler = (err, instance, info) => {
  if (import.meta.env.PROD) Sentry.captureException(err);
  else console.error("[Vue]", err, info);
};

Asynkrona fel

Den globala hanteraren fångar också upp fel som kastas inuti asynkrona livscykelhakar och watchers. För obehandlade Promise-avvisningar utanför Vue bör ni även lägga till en lyssnare på window.

window.addEventListener("unhandledrejection", (e) => {
  Sentry.captureException(e.reason);
});

Förhållandet till error boundaries

Lokala error boundaries och onErrorCaptured hanterar och begränsar fel nära den plats där de uppstår. Den globala hanteraren är skyddsnätet för allt som tar sig förbi. Använd båda tillsammans.

Ignorera inte fel i tysthet

Undvik en tom hanterare som döljer fel. Logga eller rapportera alltid åtminstone felet – tysta fel gör buggar osynliga och mycket svåra att hitta.

Lägg till kontext

Berika rapporterna med den aktuella routen, användarens id eller appversionen, så går det snabbare att utreda produktionsfel.

Sentry.captureException(err, {
  tags: { info },
  user: { id: currentUserId }
});

Snabb kontroll

Vad hanterar app.config.errorHandler?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni lärde er att app.config.errorHandler = (err, instance, info) => {} är den globala fångsten för alla fel: rapportera till Sentry i produktion, logga detaljerat under utvecklingen och kombinera den med lokala error boundaries för en lagerindelad och motståndskraftig felhantering.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”app.config.errorHandler för globala fel” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”app.config.errorHandler för globala fel”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”app.config.errorHandler för globala fel”?

Global felhanterare, loggning till Sentry/Datadog och miljöanpassad felvisning. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”app.config.errorHandler för globala fel”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Vue Academy