VueVue Router
If you're using Vue Router, 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.jsCopied
import Vue from "vue";
import App from "./App";
import * as Sentry from "@sentry/vue";
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({
// your router configuration
});
Sentry.init({
Vue,
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
tracesSampleRate: 1.0,
integrations: [
Sentry.browserTracingIntegration({ router }),
],
});
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>",
});
You can pass an optional configuration object as a second argument to the browser tracing integration:
Copied
Sentry.browserTracingIntegration({
router,
routeLabel: "path",
});
The available options are:
| Key | Type | Default | Description |
|---|---|---|---|
| routeLabel | string | name | The label to use for the route transactions. Can be either name or path. When this is name, the transaction will use route.name, if it is set, and else use the path of the route. By setting this to path you can opt-out of this and always use the path. |
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or 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!) or suggesting an update ("yeah, this would be better").
