Menu
DocumentationGrafana CloudMonitor applicationsFrontend ObservabilityInstrumentReactReact Router v4/v5
Grafana Cloud
Setup for 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:
sh
# install globally
npm i @grafana/faro-react
Or the following command Yarn:
sh
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.
ts
import { createBrowserHistory } from 'history';
import { Route } from 'react-router-dom';
import { 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({
router: {
version: ReactRouterVersion.V5, // or ReactRouterVersion.V4,
dependencies: {
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:
tsx
import { FaroRoute } from '@grafana/faro-react';
// during render
<Switch>
<FaroRoute path="/">
<Home />
</FaroRoute>
{/* ... */}
</Switch>;
Next
Refer to the JavaScript quickstart documentation for instructions on how to create and send data to a Grafana Cloud Frontend Application.
Was this page helpful?
Related resources from Grafana Labs
Additional helpful documentation, links, and articles:
Video
Getting started with the Grafana LGTM Stack
In this webinar, we’ll demo how to get started using the LGTM Stack: Loki for logs, Grafana for visualization, Tempo for traces, and Mimir for metrics.
Video
Intro to Kubernetes monitoring in Grafana Cloud
In this webinar you’ll learn how Grafana offers developers and SREs a simple and quick-to-value solution for monitoring their Kubernetes infrastructure.
Video
Building advanced Grafana dashboards
In this webinar, we’ll demo how to build and format Grafana dashboards.