Documentationbreadcrumb arrow Grafana Cloudbreadcrumb arrow Monitor applicationsbreadcrumb arrow Frontend Observabilitybreadcrumb arrow Instrumentbreadcrumb arrow Reactbreadcrumb arrow Component 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);