Setup for React Router v6 with a data router

Follow these steps to get started quickly with the Faro-React Web SDK for React Router v6 with no data router.

Install the Faro-React Web SDK
Instrument your application

Install the Faro-React Web SDK

First add Faro-React to your project. Install the Faro-React package by running the following command for NPM:

# install globally
npm i @grafana/faro-react

Or the following command Yarn:

yarn add @grafana/faro-react

The Faro-React package offers all the functionality and behavior from the Faro Web SDK package plus additional React specific functionality like router instrumentation, a custom ErrorBoundary, and more.

Add the following code snippet to your project to import Faro-React with the minimum setup needed to get insights into the health and performance of your application or website:

import { initializeFaro } from '@grafana/faro-react';

initializeFaro({
  // required: the URL of the Grafana collector
  url: 'my/collector/url',

  // required: the identification label of your application
  app: {
    name: 'my-react-app',
  },
});

Faro-React captures data about your application’s health and performance and exports them to the Grafana Cloud faro receiver.

Open source users can use the Grafana Alloy as their data collector, to learn more consult the Faro receiver with Grafana Alloy documentation.

Instrument your application

Next, instrument the routes from a React data router (BrowserRouter, HashRouter, or MemoryRouter).

In the file you create your data router, often the App.\* file pass your data router to the Faro-React function withFaroRouterInstrumentation to wrap all your routes with Faro instrumentation:

Configure the router instrumentation:

import {
  initializeFaro,
  createReactRouterV6DataOptions,
  ReactIntegration,
  getWebInstrumentations,
} from '@grafana/faro-react';

import { matchRoutes } from 'react-router-dom';

initializeFaro({
  // required: the URL of the Grafana collector
  url: 'my/collector/url',

  // required: the identification label of your application
  app: {
    name: 'my-react-app',
  },
  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),

    new ReactIntegration({
      router: createReactRouterV6DataOptions({
        matchRoutes,
      }),
    }),
  ],
});

Instrument the router:

import { createBrowserRouter } from 'react-router-dom';

const reactBrowserRouter = createBrowserRouter([
  // your routes...
]);

const browserRouter = withFaroRouterInstrumentation(reactBrowserRouter);

Refer to the JavaScript quickstart documentation for instructions on how to create and send data to a Grafana Cloud Frontend Application.