Menu
Grafana Cloud

Setup for React Router v6 with no data router

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

  1. Install the Faro-React Web SDK
  2. 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:

sh
# install globally
npm i @grafana/faro-react

Or the following command Yarn:

sh
yarn add @grafana/faro-react

Instrument your application

React Router v6

In the file you define your router, import createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType from react-router-dom and pass them to the dependencies object.

The final result should look similar like this example.

ts
import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom';

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

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({
      router: createReactRouterV6Options({
        createRoutesFromChildren,
        matchRoutes,
        Routes,
        useLocation,
        useNavigationType,
      }),
    }),
  ],
});

To instrument React Router v6 import the <FaroRoutes/> component and use it instead of the React router <Routes /> component, for example:

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

// during render
<FaroRoutes>
  <Route path="/" element={<Home />} />
  {/* ... */}
</FaroRoutes>;

Next

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