Vue Router Integration
If you're using Vue Router, you should use our provided routing instrumentation to get better, parameterized transaction names.
Our routing instrumentation supports vue-router
v2, v3, and v4.
Here is a full example of how to use it:
main.js
Copied
import Vue from "vue";
import App from "./App";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import Foo from "@/components/Foo";
import Bar from "@/components/Bar";
Vue.use(Router);
const router = new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld,
},
{ path: "/foo/:id", component: Foo },
{ path: "/bar", component: Bar },
],
});
Sentry.init({
Vue,
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
tracesSampleRate: 1.0,
integrations: [
new BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation(router),
}),
],
});
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>",
});
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/vue
- Version:
- 7.34.0
- Repository:
- https://github.com/getsentry/sentry-javascript