# Introduction


If you haven't turned on tracing yet, start with [turn on tracing](/docs/react/getting-started/quick-start#turn-on-tracing) in the quick start. This page covers the React-specific half: naming navigation spans after your router's routes. You can stop after the error reporting steps in the quick start and come back to this later. It isn't required to get errors into Flare.

On its own, `@flareapp/js` already traces page loads, client side navigations, and the `fetch`/`XMLHttpRequest` calls your page makes. It has no router though, so it names a navigation span after the raw URL it navigated to. `@flareapp/react` adds the route pattern, through a separate integration per router.

## Adding your router's integration

Pick the router you use and add its integration. Both are subpath imports, not exports of `@flareapp/react` itself, so importing them from the root package will not work.

```tsx tab=tanstack
import { createRouter, RouterProvider } from '@tanstack/react-router';
import { traceTanStackRouter } from '@flareapp/react/tanstack-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({ routeTree });

traceTanStackRouter(router);

export function App() {
    return <RouterProvider router={router} />;
}
```

```tsx tab=react-router
import { createBrowserRouter, RouterProvider } from 'react-router';
import { traceReactRouter } from '@flareapp/react/react-router';
import Home from './pages/Home';
import Product from './pages/Product';

const router = createBrowserRouter([
    { path: '/', Component: Home },
    { path: '/products/:id', Component: Product },
]);

traceReactRouter(router);

export function App() {
    return <RouterProvider router={router} />;
}
```

`traceReactRouter` is built for a React Router v7 data router, one created with `createBrowserRouter`, `createHashRouter`, or `createMemoryRouter`. Pass it the router instance you get back from that call, before you render `RouterProvider`.

## What the router integration adds

Without a router integration, a `browser_navigation` span only knows the raw URL it navigated to, for example `/products/482`. With the integration, the span also contains the matched route pattern, for example `/products/:id`, so every navigation to a product page groups together on the Pages table instead of becoming one entry for every product. When you open a single trace, you still see the URL. Flare uses the pattern to group pages, not to name the span.

## Stopping the router integration

Both `traceTanStackRouter` and `traceReactRouter` return a stop function:

```jsx
const stopTracingNavigations = traceReactRouter(router);

// Later, for example when tearing down the router:
stopTracingNavigations();
```

Calling it unsubscribes from the router and stops opening navigation spans. You only need this if you tear down or replace the router instance while your app keeps running, for example in a test.

## Read more

- [Sampling](/docs/javascript/tracing/sampling): control how many traces get sent.
- [Manual spans](/docs/javascript/tracing/manual-spans): time your own code inside a trace.
- [Profiling introduction for React](/docs/react/profiling/introduction): time component mounts inside a trace.