Documentationbreadcrumb arrow Grafana Cloudbreadcrumb arrow Monitor applicationsbreadcrumb arrow Frontend Observabilitybreadcrumb arrow Instrumentbreadcrumb arrow Reactbreadcrumb arrow React Router v7 no data router
Grafana Cloud

Set up React Router v7 with no data router

Follow these steps to get started quickly with the Faro-React Web SDK for React Router v7 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 v7

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

To instrument React Router v7 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.