Vue SDK

Error monitoring and performance tracking for Vue.js applications

The Sentry Vue SDK provides error tracking and performance monitoring for Vue.js applications (Vue 2 and Vue 3).

Installation

npm

npm install @sentry/vue

Basic Setup

Vue 3

Initialize Sentry before creating your Vue app:

import { createApp } from 'vue';
import { createRouter } from 'vue-router';
import * as Sentry from '@sentry/vue';
import App from './App.vue';

const app = createApp(App);
const router = createRouter({
  // your router config
});

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration({ router }),
    Sentry.replayIntegration(),
  ],
  
  // Performance Monitoring
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
  
  // Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

app.use(router);
app.mount('#app');

Vue 2

Initialize Sentry before creating your Vue instance:

import Vue from 'vue';
import VueRouter from 'vue-router';
import * as Sentry from '@sentry/vue';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  // your router config
});

Sentry.init({
  Vue,
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration({ router }),
    Sentry.replayIntegration(),
  ],
  
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

Vue-Specific Features

Error Handler Integration

Automatically captures Vue component errors:

import * as Sentry from '@sentry/vue';

Sentry.init({
  app, // or Vue for Vue 2
  dsn: 'YOUR_DSN_HERE',
  
  // Customize error handling
  attachProps: true, // Attach component props
  logErrors: true,   // Log errors to console
  
  // Hook options
  hooks: ['mount', 'update', 'destroy'],
});

Component Tracking

Track specific component lifecycle events:

import * as Sentry from '@sentry/vue';

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  // Track component lifecycle
  trackComponents: true,
  
  // Set a timeout for component tracking (ms)
  timeout: 2000,
  
  // Which hooks to track
  hooks: ['mount', 'update'],
});

Vue Router Integration

Automatic route change tracking:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import * as Sentry from '@sentry/vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User },
  ],
});

const app = createApp(App);

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.browserTracingIntegration({
      router,
      routeLabel: 'path', // or 'name'
    }),
  ],
  tracesSampleRate: 1.0,
});

app.use(router);

Pinia Integration

Track Pinia store actions:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import * as Sentry from '@sentry/vue';

const app = createApp(App);
const pinia = createPinia();

// Add Sentry plugin to Pinia
pinia.use(Sentry.createSentryPiniaPlugin());

app.use(pinia);

This will:

• Attach store state to error events
• Create breadcrumbs for store mutations
• Track action performance

Performance Monitoring

Component Performance

Track component render times:

import * as Sentry from '@sentry/vue';

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration(),
  ],
  
  tracesSampleRate: 1.0,
  
  // Track component performance
  trackComponents: true,
  timeout: 2000,
  hooks: ['mount', 'update'],
});

Custom Spans

Add custom performance tracking:

import * as Sentry from '@sentry/vue';

export default {
  name: 'UserProfile',
  
  async mounted() {
    await Sentry.startSpan(
      {
        name: 'load-user-data',
        op: 'http.client',
      },
      async () => {
        const response = await fetch(`/api/user/${this.userId}`);
        this.userData = await response.json();
      },
    );
  },
};

Composition API

Use Sentry in Vue 3 Composition API:

import { onMounted, ref } from 'vue';
import * as Sentry from '@sentry/vue';

export default {
  setup() {
    const data = ref(null);
    const error = ref(null);
    
    onMounted(async () => {
      try {
        await Sentry.startSpan(
          { name: 'fetch-data', op: 'http.client' },
          async () => {
            const response = await fetch('/api/data');
            data.value = await response.json();
          },
        );
      } catch (err) {
        error.value = err;
        Sentry.captureException(err);
      }
    });
    
    return { data, error };
  },
};

Error Handling

Global Error Handler

The SDK automatically integrates with Vue’s error handler:

// This is handled automatically
export default {
  name: 'BrokenComponent',
  
  mounted() {
    // This error will be captured by Sentry
    throw new Error('Component error');
  },
};

Manual Error Capture

import * as Sentry from '@sentry/vue';

export default {
  name: 'MyComponent',
  
  methods: {
    async handleAction() {
      try {
        await riskyOperation();
      } catch (error) {
        Sentry.captureException(error, {
          tags: {
            component: 'MyComponent',
            action: 'handleAction',
          },
        });
      }
    },
  },
};

Context & Breadcrumbs

Component Context

import * as Sentry from '@sentry/vue';

export default {
  name: 'UserDashboard',
  
  mounted() {
    // Set user context
    Sentry.setUser({
      id: this.user.id,
      email: this.user.email,
      username: this.user.username,
    });
    
    // Add custom context
    Sentry.setContext('dashboard', {
      section: 'overview',
      permissions: this.user.permissions,
    });
    
    // Add breadcrumb
    Sentry.addBreadcrumb({
      category: 'navigation',
      message: 'User entered dashboard',
      level: 'info',
    });
  },
};

Advanced Configuration

Vue Integration Options

import * as Sentry from '@sentry/vue';

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.vueIntegration({
      // Attach component props to errors
      attachProps: true,
      
      // Log errors to console
      logErrors: true,
      
      // Track component performance
      trackComponents: true,
      
      // Component tracking timeout (ms)
      timeout: 2000,
      
      // Which lifecycle hooks to track
      hooks: ['mount', 'update', 'destroy'],
    }),
  ],
});

Router Options

import * as Sentry from '@sentry/vue';

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration({
      router,
      
      // Use route path or name for transaction names
      routeLabel: 'path', // or 'name'
      
      // Enable tracking of router navigation timing
      enableNavigationSpans: true,
    }),
  ],
});

Filtering

import * as Sentry from '@sentry/vue';

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  beforeSend(event, hint) {
    // Filter Vue-specific errors
    if (hint.originalException?.isVueError) {
      // Modify or drop event
      event.tags = {
        ...event.tags,
        vue_version: app.version,
      };
    }
    return event;
  },
  
  ignoreErrors: [
    // Ignore specific Vue warnings
    'Vue warn',
    'Unknown custom element',
  ],
});

Tracing Mixins (Vue 2)

For Vue 2, use tracing mixins:

import Vue from 'vue';
import * as Sentry from '@sentry/vue';

const tracingMixin = Sentry.createTracingMixins({
  trackComponents: true,
  timeout: 2000,
  hooks: ['mount', 'update'],
});

// Apply globally
Vue.mixin(tracingMixin);

// Or per component
export default {
  mixins: [tracingMixin],
  name: 'MyComponent',
  // ...
};

Best Practices

Initialize Early

Initialize Sentry before creating your Vue app to catch all errors.

Router Integration

Always pass your router instance for accurate navigation tracking.

Component Tracking

Enable component tracking to understand performance bottlenecks.

Pinia Plugin

Use the Pinia plugin to track store actions and state.

Examples

Complete Vue 3 Setup

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { createPinia } from 'pinia';
import * as Sentry from '@sentry/vue';
import App from './App.vue';
import routes from './routes';

const app = createApp(App);

const router = createRouter({
  history: createWebHistory(),
  routes,
});

const pinia = createPinia();
pinia.use(Sentry.createSentryPiniaPlugin());

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
  
  integrations: [
    Sentry.browserTracingIntegration({
      router,
      routeLabel: 'path',
    }),
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  
  tracesSampleRate: 0.2,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  
  trackComponents: true,
  hooks: ['mount', 'update'],
  timeout: 2000,
});

app.use(router);
app.use(pinia);
app.mount('#app');

Next Steps

Vue Router

Advanced router integration patterns

Pinia

State management tracking

Performance

Component performance monitoring

Source Maps

Upload source maps for better stack traces