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

1import { init } from '@sentry/react';
2import { render } from 'react-dom';
3import { BrowserRouter } from 'react-router';
4import useRoutingInstrumentation from 'react-router-v6-instrumentation';
5
6function App() {
7  // Initialize Sentry with the browser tracing integration.
8  const routingInstrumentation = useRoutingInstrumentation();
9  useEffect(() => {
10    const browserTracing = new BrowserTracing({
11      routingInstrumentation,
12    });
13    init({
14      integrations: [browserTracing],
15    });
16  }, [routingInstrumentation]);
17
18  return <>Hello world!</>;
19}
20
21render(
22  <BrowserRouter>
23    <App />
24  </BrowserRouter>,
25  document.getElementById('root'),
26);

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.