ReactComponent Performance Monitoring
Sentry's React SDK offers a feature to monitor the performance of your React components: component tracking. The SDK exports a withProfiler higher-order component that attaches React related spans to the current active transaction on the scope. This allows you to get a drilled-down view into how your components are behaving so you can do things like identify slow mounts or frequent updates, which might have an impact on your app's performance.
To set up component tracking, you need to configure performance monitoring. For details on how to do this, check out our Performance documentation.
In the example below, the withProfiler higher-order component is used to instrument an app component.
import React from "react";
import * as Sentry from "@sentry/react";
class App extends React.Component {
render() {
return (
<FancyComponent>
<NestedComponent someProp={2} />
<AnotherComponent />
</FancyComponent>
);
}
}
export default Sentry.withProfiler(App);
The React Profiler currently generates spans with three different kinds of op-codes: ui.react.mount, ui.react.render, and ui.react.update.
ui.react.mount
The span that represents how long it took for the profiled component to mount.
ui.react.render
The span that represents how long the profiled component was on a page. This span is only generated if the profiled component mounts and unmounts while a transaction is occurring.
ui.react.update
The span that represents when the profiled component updated. This span is only generated if the profiled component has mounted.
In React Strict Mode, certain component methods will be invoked twice. This may lead to duplicate ui.react.mount spans appearing in a transaction. React Strict Mode only runs in development mode, so this will have no impact on your production traces.
The withProfiler higher-order component has a variety of options for further customization. They can be passed in as the second argument to the withProfiler function.
export default Sentry.withProfiler(App, { name: "CustomAppName" });
name (string)
The name of the component being profiled. By default, the name is taken from the component displayName property or the component name property.
includeRender (boolean)
If a ui.react.render span should be created by the Profiler. Set as true by default.
includeUpdates (boolean)
If react.update spans should be created by the Profiler. Set as true by default. We recommend setting this prop as false for components that will experience many rerenders, such as text input components, as the resulting spans can be very noisy.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").
