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