Vue.js Error Monitoring: Global Handler Setup

Vue's reactivity system is elegant for building UIs but makes error handling tricky: an uncaught exception in a component method or lifecycle hook can silently fail or crash your entire tree. Without visibility into what went wrong, you're left debugging based on user reports that may arrive hours later — or not at all. This guide sets up production-grade vue error tracking using the Sentry SDK pointed at LightTrace, so every error lands in a fast dashboard with breadcrumbs, release context, and affected-user info.

By the end you'll capture component errors, global handler errors, and unhandled promise rejections — all with readable stack traces that map back to your original source code.

Install and initialize the SDK

Start by adding the Sentry SDK for Vue. Because LightTrace is Sentry-SDK-compatible, you use the standard @sentry/vue package and change only the dsn to point at LightTrace.

npm install @sentry/vue

Initialize the SDK once when your app boots, before any components render:

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

const app = createApp(App);

Sentry.init({
  app,
  dsn: "https://<key>@your-lighttrace-host/1",
  environment: import.meta.env.MODE,
  release: `web@${import.meta.env.VITE_APP_VERSION}`,
  tracesSampleRate: 1.0,
});

app.mount("#app");

That single init call installs global handlers for uncaught errors and unhandled promise rejections. The SDK automatically integrates with Vue's plugin system, so it's aware of your component tree and can capture render errors, lifecycle hook errors, and event handler errors.

Wire up Vue's errorHandler

Vue's error handler is your main hook for catching thrown exceptions. The Sentry SDK integrates with it, but you can customize the behavior:

app.config.errorHandler = (err, instance, info) => {
  // Log the error message, component name, and lifecycle hook
  console.error(`Error in ${info}: ${err.message}`);
  
  // Sentry captures it automatically, but you can add extra context
  Sentry.captureException(err, {
    tags: {
      component: instance?.$options.name,
      lifecycle: info,
    },
  });
};

Every thrown exception — whether in a method, computed property, watcher, or lifecycle hook — now lands in LightTrace. The grouping system automatically deduplicates identical errors so one bug is one issue, not ten thousand noise entries.

Capture async and event-handler errors

Vue's global errorHandler catches synchronous exceptions, but async errors and event handlers need explicit wrapping. Use Sentry's helpers to keep those captured too:

<template>
  <form @submit="handleSubmit">
    <input v-model="email" type="email" />
    <button type="submit">Subscribe</button>
  </form>
</template>

<script setup lang="ts">
import * as Sentry from "@sentry/vue";
import { ref } from "vue";

const email = ref("");

const handleSubmit = Sentry.withProfiler(async () => {
  try {
    const response = await fetch("/api/subscribe", {
      method: "POST",
      body: JSON.stringify({ email: email.value }),
    });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    email.value = "";
  } catch (err) {
    // This is caught, but Sentry wraps it too for full tracing
    Sentry.captureException(err);
    throw err;
  }
});
</script>

withProfiler wraps your async function so the SDK sees the full span from start to finish. If the fetch fails or the API throws a 500, you get a breadcrumb showing exactly what happened.

Add context so debugging is fast

Raw errors are a starting point. The speed-up comes from context — who hit the error, what were they doing, and which release introduced it. Set the user and add breadcrumbs at key moments:

// When a user logs in, tell Sentry
Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.handle,
});

// Before an important operation, add a breadcrumb
Sentry.addBreadcrumb({
  category: "checkout",
  message: "User started checkout flow",
  level: "info",
});

Now every captured error arrives with the full breadcrumb trail — clicks, API calls, state changes — so you can reproduce the exact path instead of guessing. Combined with release tagging, you also see exactly which deploy introduced each regression.

Upload source maps for readable traces

In production your Vue code is minified into app-abc123.js:1:45000 — completely unreadable. Source maps map that gibberish back to your real .vue and .ts files. With Vite, enable them in your build config:

// vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
  build: {
    sourcemap: true,  // Generate .map files
  },
});

Then upload the source maps to LightTrace in CI as part of your deploy:

# In your GitHub Actions or CI pipeline
npm run build
npx @sentry/cli releases files upload-sourcemaps dist \
  --org my-org \
  --project my-project \
  --release web@$(git describe --tags)

Once uploaded, every stack frame in LightTrace shows your real file path and line number, not minified garbage. See Vite source maps for a complete walkthrough.

Common Vue errors worth monitoring

A handful of Vue-specific patterns show up constantly. Knowing how to spot them in LightTrace speeds up triage:

• Errors in lifecycle hooks — mounted(), beforeUnmount(), etc. throw and bubble to the global handler. The error context tells you which lifecycle failed.
• Prop type mismatches — Vue warns in dev mode but won't throw in production. A component expecting an array gets a string; the error happens later when your code tries to iterate.
• Unhandled promise rejections in watchers — a watcher makes an async call, it rejects, and nothing catches it. Sentry catches these by default as unhandledrejection events.
• Ref unwrapping edge cases — mixing raw values and .value can lead to subtle bugs that show up in specific Vue versions.

LightTrace's error grouping turns these into actionable issues, each with a stack trace and affected-user count. Use the AI-powered Explain with AI feature to read a trace and understand what broke without having to decode the code yourself.

Next steps

You now have the full setup: SDK initialized, Vue's errorHandler wired, async errors wrapped, source maps making traces readable, and context making them fast to fix. For a framework-agnostic walkthrough of the same pattern, see how to add error tracking to any app.

Ship Vue apps with confidence. The next production error becomes a line item in your dashboard instead of a fire drill.