From b7a9a6ce1d9a33f0caeb5432b289133acb681341 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Thu, 25 Jun 2020 16:08:16 -0400 Subject: [PATCH 1/4] feat: Add performance docs for react --- .../configuration/react.md | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/collections/_documentation/performance-monitoring/configuration/react.md diff --git a/src/collections/_documentation/performance-monitoring/configuration/react.md b/src/collections/_documentation/performance-monitoring/configuration/react.md new file mode 100644 index 0000000000000..981b89edce122 --- /dev/null +++ b/src/collections/_documentation/performance-monitoring/configuration/react.md @@ -0,0 +1,90 @@ +To get started with performance monitoring using Sentry's React SDK, first install the `@sentry/react` and `@sentry/apm` packages: + +```bash +# Using yarn +$ yarn add @sentry/react @sentry/apm + +# Using npm +$ npm install @sentry/react @sentry/apm +``` + +Next, initialize the integration in your call to `Sentry.init`. Make sure this happens before you mount your React component on the page. + +```jsx +import * as Sentry from '@sentry/react'; +import { Integrations } from "@sentry/apm"; +Sentry.init({ + dsn: '"___PUBLIC_DSN___"', + release: 'my-project-name@' + process.env.npm_package_version, + integrations: [ + new Integrations.Tracing(), + ], + tracesSampleRate: 0.25, // must be present and non-zero +}); + +// ... + +ReactDOM.render(, rootNode); + +// Can also use with React Concurrent Mode +// ReactDOM.createRoot(rootNode).render(); +``` + +### `withProfiler` Higher-Order Component + +`@sentry/react` exports a `withProfiler` Higher-Order Component that leverages the `@sentry/apm` Tracing integration to add React related spans to transactions. If the Tracing integration is not enabled, the Profiler will not work. + +In the example below, the `withProfiler` Higher-Order Component is used to instrument an App component. + +```jsx +import React from 'react'; +import * as Sentry from '@sentry/react'; + +class App extends React.Component { + render() { + return ( + + + + + ) + } +} + +export default Sentry.withProfiler(App); +``` + +The React Profiler current generates spans with three different kinds of op codes: `react.mount`, `react.render`, and `react.update`. + +1. `react.mount` is the span that represents how long it took for the profiled component to mount. + +2. `react.render` is the span that represents how long the profiled component was on a page. This span is only generated if the profiled component unmounts. + +2. `react.update` is the span that represents when the profiled component updated. + +{% capture __alert_content -%} +In [React Strict Mode](https://reactjs.org/docs/strict-mode.html), certain component methods will be [invoked twice](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects). This may lead to duplicate `react.mount` spans appearing in a transaction. React Strict Mode only runs in development mode, so this should have no impact on your production traces. +{%- endcapture -%} +{%- include components/alert.html + title="Note" + content=__alert_content + level="warning" +%} + +The `withProfiler` higher order component has a variety options for further customization. They can be passed in as the second argument to the `withProfiler` function. + +```jsx +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 `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. You should set this prop as false for that components experience that will many rerenders, as text input components, as the resulting spans can become very noisy. From 0ce52b9bedac0eb722346dd3441c4530145946df Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Mon, 29 Jun 2020 09:04:06 -0400 Subject: [PATCH 2/4] ref(perf): React cleanup --- .../performance-monitoring/configuration/react.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/collections/_documentation/performance-monitoring/configuration/react.md b/src/collections/_documentation/performance-monitoring/configuration/react.md index 981b89edce122..9fd698f438356 100644 --- a/src/collections/_documentation/performance-monitoring/configuration/react.md +++ b/src/collections/_documentation/performance-monitoring/configuration/react.md @@ -32,9 +32,9 @@ ReactDOM.render(, rootNode); ### `withProfiler` Higher-Order Component -`@sentry/react` exports a `withProfiler` Higher-Order Component that leverages the `@sentry/apm` Tracing integration to add React related spans to transactions. If the Tracing integration is not enabled, the Profiler will not work. +`@sentry/react` exports a `withProfiler` higher-order component that leverages the `@sentry/apm` Tracing integration to add React related spans to transactions. If the Tracing integration is not enabled, the Profiler will not work. -In the example below, the `withProfiler` Higher-Order Component is used to instrument an App component. +In the example below, the `withProfiler` higher-order component is used to instrument an App component. ```jsx import React from 'react'; @@ -58,12 +58,12 @@ The React Profiler current generates spans with three different kinds of op code 1. `react.mount` is the span that represents how long it took for the profiled component to mount. -2. `react.render` is the span that represents how long the profiled component was on a page. This span is only generated if the profiled component unmounts. +2. `react.render` is 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 occuring. -2. `react.update` is the span that represents when the profiled component updated. +2. `react.update` is the span that represents when the profiled component updated. This span is only generated if the profiled component has mounted. {% capture __alert_content -%} -In [React Strict Mode](https://reactjs.org/docs/strict-mode.html), certain component methods will be [invoked twice](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects). This may lead to duplicate `react.mount` spans appearing in a transaction. React Strict Mode only runs in development mode, so this should have no impact on your production traces. +In [React Strict Mode](https://reactjs.org/docs/strict-mode.html), certain component methods will be [invoked twice](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects). This may lead to duplicate `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. {%- endcapture -%} {%- include components/alert.html title="Note" @@ -71,7 +71,7 @@ In [React Strict Mode](https://reactjs.org/docs/strict-mode.html), certain compo level="warning" %} -The `withProfiler` higher order component has a variety options for further customization. They can be passed in as the second argument to the `withProfiler` function. +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. ```jsx export default Sentry.withProfiler(App, { name: "CustomAppName" }) @@ -87,4 +87,4 @@ If a `react.render` span should be created by the Profiler. Set as true by defau #### `includeUpdates` (boolean) -If `react.update` spans should be created by the Profiler. Set as true by default. You should set this prop as false for that components experience that will many rerenders, as text input components, as the resulting spans can become very noisy. +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. From cb4885070da84b1901d7e57af6e30b7ab51e15c1 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Mon, 29 Jun 2020 09:09:50 -0400 Subject: [PATCH 3/4] chore(perf): Add React SDK --- src/collections/_documentation/performance-monitoring/setup.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/collections/_documentation/performance-monitoring/setup.md b/src/collections/_documentation/performance-monitoring/setup.md index 419276c37352a..483e65564ba4a 100644 --- a/src/collections/_documentation/performance-monitoring/setup.md +++ b/src/collections/_documentation/performance-monitoring/setup.md @@ -12,6 +12,7 @@ Supported SDKs for Tracing - JavaScript Browser SDK ≥ 5.16.0 - JavaScript Node SDK ≥ 5.16.0 - Python SDK version ≥ 0.11.2 +- Javascript React SDK ≥ 5.18.1 {%- endcapture -%} {%- include components/alert.html From 09d27690fc67b63a6f4d7a5fa3361896600f1bb8 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Tue, 30 Jun 2020 09:57:52 -0400 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Alberto Leal Co-authored-by: Tien "Mimi" Nguyen --- .../configuration/react.md | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/collections/_documentation/performance-monitoring/configuration/react.md b/src/collections/_documentation/performance-monitoring/configuration/react.md index 9fd698f438356..5b262cd03874a 100644 --- a/src/collections/_documentation/performance-monitoring/configuration/react.md +++ b/src/collections/_documentation/performance-monitoring/configuration/react.md @@ -1,3 +1,6 @@ + +**React** + To get started with performance monitoring using Sentry's React SDK, first install the `@sentry/react` and `@sentry/apm` packages: ```bash @@ -30,7 +33,7 @@ ReactDOM.render(, rootNode); // ReactDOM.createRoot(rootNode).render(); ``` -### `withProfiler` Higher-Order Component +**`withProfiler` Higher-Order Component** `@sentry/react` exports a `withProfiler` higher-order component that leverages the `@sentry/apm` Tracing integration to add React related spans to transactions. If the Tracing integration is not enabled, the Profiler will not work. @@ -54,13 +57,19 @@ class App extends React.Component { export default Sentry.withProfiler(App); ``` -The React Profiler current generates spans with three different kinds of op codes: `react.mount`, `react.render`, and `react.update`. +The React Profiler currently generates spans with three different kinds of op-codes: `react.mount`, `react.render`, and `react.update`. + +`react.mount` + +: The span that represents how long it took for the profiled component to mount. + +`react.render` -1. `react.mount` is the span that represents how long it took for the profiled component to mount. +: 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. -2. `react.render` is 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 occuring. +`react.update` -2. `react.update` is the span that represents when the profiled component updated. This span is only generated if the profiled component has mounted. +: The span that represents when the profiled component updated. This span is only generated if the profiled component has mounted. {% capture __alert_content -%} In [React Strict Mode](https://reactjs.org/docs/strict-mode.html), certain component methods will be [invoked twice](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects). This may lead to duplicate `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. @@ -77,14 +86,14 @@ The `withProfiler` higher-order component has a variety of options for further c export default Sentry.withProfiler(App, { name: "CustomAppName" }) ``` -#### `name` (string) +`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. +: 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) +`includeRender` (boolean) -If a `react.render` span should be created by the Profiler. Set as true by default. +: If a `react.render` span should be created by the Profiler. Set as true by default. -#### `includeUpdates` (boolean) +`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. +: 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.