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").