Grafana Cloud

React component profiling

Follow this guide to setup and use the Faro Profiler to get insights into the render performance of a React components.


Using the profiler has an impact on performance and should not be used in production.

To use the Faro profiler, import the Faro web-tracing package and initialize Faro-React as follows:

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

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-react';
import { TracingInstrumentation } from '@grafana/faro-web-tracing';

  // 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

    // Tracing Instrumentation is needed if you want to use the React Profiler
    new TracingInstrumentation(),

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

export default withFaroProfiler(MyReactComponent);