Vue Router

If you are using Vue Router, you can use the @bugsnag/vue-router-performance package to listen for navigation events and map page URLs back to your defined routes.

The package can be installed from the npm registry using npm or yarn:

yarn add @bugsnag/vue-router-performance
# or
npm install --save @bugsnag/vue-router-performance

To use the package, create a VueRouterRoutingProvider and provide it as part of your BugSnag configuration with the routes and base (if not served from the root) from your router configuration:

import BugsnagPerformance from '@bugsnag/browser-performance'
import { VueRouterRoutingProvider } from '@bugsnag/vue-router-performance'
import { createRouter, createWebHistory } from 'vue-router'

const base = '/my-app'

const router = createRouter({
  history: createWebHistory(base),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/contacts/:contactId',
      name: 'contact',
      component: () => import('../views/ContactView.vue')
    }
  ]
})

BugsnagPerformance.start({
  apiKey: 'YOUR_API_KEY',
  routingProvider: new VueRouterRoutingProvider(router, base)
})

const app = createApp(App)
app.use(router)
app.mount('#app')