Flare Flare PHP PHP JavaScript JavaScript Protocol Protocol

Introduction

View as Markdown

If you haven't turned on tracing yet, start with 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.

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} />;
}

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:

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

Sourcemaps Introduction

On this page