Fehler-Monitoring für Vue.

Stand: 24.10.2026, @sentry/vue 11.9.0 für Vue 2 und 3, @sentry/vite-plugin 11.9.0, sentry-cli 3.8. Mit Fehlo getestet haben wir @sentry/browser 11.8.0, auf dem das Vue-SDK aufbaut.

1. Paket installieren

npm install @sentry/vue

2. SDK starten

In main.js, nach createApp und vor app.mount. Das SDK hängt sich dann in den Fehler-Handler von Vue und meldet Fehler mit dem Namen der Komponente.

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

const app = createApp(App);

Sentry.init({
  app,
  dsn: "https://<key>@app.fehlo.de/<project-id>",
  environment: "production",
  release: "my-app@1.0.0",
  dataCollection: {
    userInfo: false,
  },
});

app.mount("#app");

dataCollection: { userInfo: false } verhindert, dass das SDK Nutzerdaten und IP-Adressen mitsendet. Seit Version 11 ist das sonst an; mehr unter Error Tracking und DSGVO.

3. Testen

<script setup>
function throwError() {
  throw new Error("Fehlo test error");
}
</script>

<template>
  <button type="button" @click="throwError">Test error</button>
</template>

Klick den Knopf. Fehler, die du in der Konsole der Entwicklerwerkzeuge auslöst, erfasst das SDK nicht.

4. Source Maps hochladen

Mit dem Vite-Plugin erzeugt Vite die Source Maps, ohne sie im Bundle zu verlinken, lädt sie nach dem Build zu Fehlo hoch und löscht sie danach aus dist. Die Option url zeigt auf Fehlo statt auf sentry.io; telemetry: false verhindert, dass das Plugin Nutzungsdaten an Sentry schickt.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig({
  build: {
    sourcemap: "hidden",
  },
  plugins: [
    vue(),
    sentryVitePlugin({
      url: "https://app.fehlo.de/",
      org: "<organisation-slug>",
      project: "<project-slug>",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      telemetry: false,
      sourcemaps: {
        filesToDeleteAfterUpload: ["./dist/**/*.map"],
      },
    }),
  ],
});

Das Token legst du in Fehlo unter Einstellungen, API-Tokens an, mit der Vorlage „Für Source Maps“. Organisation und Projekt stehen in der Adresszeile der Projekteinstellungen: /<organisation>/settings/projects/<projekt>. Setz das Token im CI als SENTRY_AUTH_TOKEN. Ohne Plugin geht es mit sentry-cli, wie in der React-Anleitung beschrieben; diesen Weg haben wir mit Fehlo getestet. Den Assistenten npx @sentry/wizard -i sourcemaps brauchst du nicht, er meldet sich bei sentry.io an.

Performance messen

integrations: [Sentry.browserTracingIntegration()],
tracesSampleRate: 0.2,

Jede gemessene Seitenansicht ist eine Transaktion und zählt zum Transaktionskontingent deines Plans, nicht zu den Ereignissen.

Häufige Fragen