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.

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