https://github.com/charlesstover/react-router-v6-sentry-browser-tracing-integration

Sentry browser tracing integration for React Router v6
https://github.com/charlesstover/react-router-v6-sentry-browser-tracing-integration

Last synced: 2 months ago
JSON representation

Sentry browser tracing integration for React Router v6

• Host: GitHub
• URL: https://github.com/charlesstover/react-router-v6-sentry-browser-tracing-integration
• Owner: CharlesStover
• License: mit
• Archived: true
• Created: 2021-11-04T06:18:06.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-01T05:39:41.000Z (about 3 years ago)
• Last Synced: 2025-03-16T11:47:06.102Z (3 months ago)
• Language: TypeScript
• Size: 2.54 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sentry browser tracing integration for React Router v6

[![version](https://img.shields.io/npm/v/react-router-v6-instrumentation.svg)](https://www.npmjs.com/package/react-router-v6-instrumentation)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-router-v6-instrumentation.svg)](https://www.npmjs.com/package/react-router-v6-instrumentation)

[![downloads](https://img.shields.io/npm/dt/react-router-v6-instrumentation.svg)](https://www.npmjs.com/package/react-router-v6-instrumentation)

[![GitHub Action: Push](https://github.com/CharlesStover/react-router-v6-sentry-browser-tracing-integration/actions/workflows/push.yml/badge.svg)](https://github.com/CharlesStover/react-router-v6-sentry-browser-tracing-integration/actions/workflows/push.yml)

Easy React Router v6 instrumentation for Sentry

## Install

- `npm install react-router-v6-instrumentation` or

- `yarn add react-router-v6-instrumentation`

## Use

```javascript

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(

  

    

  ,

  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`.