BugSnag is now Insight Hub – we're making some changes to how the product looks, but this won't impact the way you use BugSnag or any of your integrations.

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')