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);
Was this page helpful?
Related documentation
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.