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