Menu
DocumentationGrafana CloudMonitor applicationsFrontend ObservabilityInstrumentReactComponent profiling
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.

Warning

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:

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

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

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(),

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

    // ...
  ],
});
tsx 
import { withFaroProfiler } from '@grafana/faro-react';

export default withFaroProfiler(MyReactComponent);