Sentry browser tracing integration for React Router v6
Easy React Router v6 instrumentation for Sentry
Install
-
npm install react-router-v6-instrumentation
or yarn add react-router-v6-instrumentation
Use
import { init } from '@sentry/react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router';
import useRoutingInstrumentation from 'react-router-v6-instrumentation';
function App() {
// Initialize Sentry with the browser tracing integration.
const routingInstrumentation = useRoutingInstrumentation();
useEffect(() => {
const browserTracing = new BrowserTracing({
routingInstrumentation,
});
init({
integrations: [browserTracing],
});
}, [routingInstrumentation]);
return <>Hello world!</>;
}
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
Note: For the useRoutingInstrumentation
hook to work, it must be called
from a component that is nested inside your BrowserRouter
(or MemoryRouter
)
component.
Contributing
To contribute to this repository, start by running the following commands.
- To keep Yarn up to date, run
yarn set version latest
. - To keep dependencies up to date, run
yarn up "*" "@*/*"
. - If you use VIM, run
yarn sdks vim
. - If you use Visual Studio Code, run
yarn sdks vscode
.
To test your changes for validity, use the following scripts:
- To build your changes, run
yarn rollup
. - To build your changes in watch mode, run
yarn rollup:watch
. - To lint your changes, run
yarn eslint
. - To unit test your changes, run
yarn jest
. - To unit test your changes in watch mode, run
yarn jest:watch
.