React Router

If you are using React Router, you can use the @bugsnag/react-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/react-router-performance
# or
npm install --save @bugsnag/react-router-performance

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

import BugsnagPerformance from '@bugsnag/browser-performance'
import { ReactRouterRoutingProvider } from '@bugsnag/react-router-performance'
import { createRoot } from 'react-dom/client'

const basename = '/my-app'
const routes = [
    {
        path: '/',
        element: <Root />,
        children: [
          // ...
        ]
    },
]
const router = createBrowserRouter(routes, { basename })

BugsnagPerformance.start({
    apiKey: 'YOUR_API_KEY',
    routingProvider: new ReactRouterRoutingProvider(routes, basename)
})

const root = createRoot(document.getElementById('root'))

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)