Error monitoring for Vue.

As of 24 October 2026, @sentry/vue 11.9.0 for Vue 2 and 3, @sentry/vite-plugin 11.9.0, sentry-cli 3.8. We tested @sentry/browser 11.8.0, which the Vue SDK builds on, with Fehlo.

1. Install the package

npm install @sentry/vue

2. Start the SDK

In main.js, after createApp and before app.mount. The SDK hooks into Vue's error handler and reports errors with the component name.

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 } keeps the SDK from sending user data and IP addresses. Since version 11 that is on otherwise; more on GDPR-compliant error tracking.

3. Test it

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

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

Click the button. Errors thrown from the browser's developer console are not captured.

4. Upload source maps

With the Vite plugin, Vite creates source maps without linking them in the bundle, uploads them to Fehlo after the build and deletes them from dist. The url option points at Fehlo instead of sentry.io; telemetry: false stops the plugin from sending usage data to Sentry.

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"],
      },
    }),
  ],
});

Create the token in Fehlo under Settings, API tokens, with the preset "For source maps". The organisation and project slugs are in the address bar of the project settings: /<organisation>/settings/projects/<project>. Set the token in CI as SENTRY_AUTH_TOKEN. Without the plugin, use sentry-cli as in the React guide; that is the route we tested with Fehlo. You don't need the wizard npx @sentry/wizard -i sourcemaps; it signs in to sentry.io.

Measure performance

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

Each measured page view is a transaction and counts against your plan's transaction allowance, not against your events.

Questions