Official Sentry SDK for Vue.js

Links

- Official SDK Docs

General

This package is a wrapper around @sentry/browser, with added functionality related to Vue.js. All methods available in
@sentry/browser can be imported from @sentry/vue.

To use this SDK, call Sentry.init(options) as early in your application as possible.

$3

``javascript
const app = createApp({
// ...
});

Sentry.init({
app,
dsn: '__PUBLIC_DSN__',
integrations: [
// Or omit router if you're not using vue-router
Sentry.browserTracingIntegration({ router }),
],
});
`

$3

`javascript
import Vue from 'vue';
import App from './App';
import router from './router';
import * as Sentry from '@sentry/vue';

Sentry.init({
Vue: Vue,
dsn: '__PUBLIC_DSN__',
integrations: [
// Or omit router if you're not using vue-router
Sentry.browserTracingIntegration({ router }),
],
});

new Vue({
el: '#app',
router,
components: { App },
template: '',
});
`

$3

If you use TanStack Router for Vue instead of Vue Router, you can use the TanStack Router instrumentation to create
navigation spans and collect meaningful performance data about the health of your page loads and associated requests.

Add tanstackRouterBrowserTracingIntegration from @sentry/vue/tanstackrouter instead of the regular
Sentry.browserTracingIntegration.

Make sure tanstackRouterBrowserTracingIntegration is initialized by your Sentry.init call. Otherwise, the routing
instrumentation will not work properly.

Pass your router instance from createRouter to the integration.

`javascript
import { createApp } from 'vue';
import { createRouter } from '@tanstack/vue-router';
import * as Sentry from '@sentry/vue';
import { tanstackRouterBrowserTracingIntegration } from '@sentry/vue/tanstackrouter';

const router = createRouter({
// your router config
// ...
});

Sentry.init({
app,
dsn: '__PUBLIC_DSN__',
integrations: [tanstackRouterBrowserTracingIntegration(router)],
tracesSampleRate: 1.0, // Capture 100% of the transactions
});
``