Set up React Router v4 or v5

Follow these steps to get started quickly with the Faro-React Web SDK for React Router v4 or v5.

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

Instrument your application

To instrument React Router v4 or v5, import the Route component from react-router-dom and the history object from the history package and pass them to the dependencies object:

The final result should look similar like this example.

import { createBrowserHistory } from 'history';
import { Route } from 'react-router-dom';

import {
  // or createReactRouterV4Options
  createReactRouterV5Options,
  getWebInstrumentations,
  initializeFaro,
  ReactIntegration,
  ReactRouterVersion,
} from '@grafana/faro-react';

const history = createBrowserHistory();

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

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

  // ...

  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),

    new ReactIntegration({
      // or createReactRouterV4Options
      router: createReactRouterV5Options({
        history, // the history object used by react-router
        Route, // Route component imported from react-router package
      }),
    }),
  ],
});

To instrument React Router v4, v5 import the <FaroRoute/> component and use it instead of the React router <Route /> component, for example:

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

// during render
<Switch>
  <FaroRoute path="/">
    <Home />
  </FaroRoute>
  {/* ... */}
</Switch>;

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