From 813958b6d7f4ecc1edc54e0f1e0fa3b8f5fbd2c6 Mon Sep 17 00:00:00 2001 From: jennmueng Date: Fri, 8 Jan 2021 01:20:39 +0700 Subject: [PATCH 1/4] wip: Just write out what needs to be mentioned for RN auto perf --- .../performance/capturing/automatic.mdx | 238 +++++++++++++++++- 1 file changed, 226 insertions(+), 12 deletions(-) diff --git a/src/platforms/common/performance/capturing/automatic.mdx b/src/platforms/common/performance/capturing/automatic.mdx index a509c9c00ef84..4080f1d59ef17 100644 --- a/src/platforms/common/performance/capturing/automatic.mdx +++ b/src/platforms/common/performance/capturing/automatic.mdx @@ -3,6 +3,7 @@ title: Automatic Instrumentation sidebar_order: 10 supported: - javascript + - react-native description: "Learn how to add automatic instrumentation to captured transactions." --- @@ -12,38 +13,251 @@ To _automatically_ capture transactions, you must first +```javascript +import * as Sentry from "@sentry/react-native"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Tracing.ReactNativeTracing({ + tracingOrigins: ["localhost", "my-site-url.com", /^\//], + // ... other options + }), + ], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); +``` ## Configuration Options -You can pass many different options to the `BrowserTracing` integration (as an object of the form `{optionName: value}`), but it comes with reasonable defaults out of the box. For all possible options, see [TypeDocs](https://getsentry.github.io/sentry-javascript/interfaces/tracing.browsertracingoptions.html). +You can pass many different options to the `ReactNativeTracing` integration (as an object of the form `{optionName: value}`), but it comes with reasonable defaults out of the box. For all possible options, see [TypeDocs](https://getsentry.github.io/sentry-javascript/interfaces/tracing.browsertracingoptions.html). ### tracingOrigins -The default value of `tracingOrigins` is `['localhost', /^\//]`. The JavaScript SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add it there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the whole request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.** +The default value of `tracingOrigins` is `['localhost', /^\//]`. The React Native SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add it there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the whole request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.** You will need to configure your web server CORS to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your set up. If you do not allow the `sentry-trace` header, the request might be blocked. -### beforeNavigate - -For `pageload` and `navigation` transactions, the `BrowserTracing` integration uses the browser's `window.location` API to generate a transaction name. To customize the name of the `pageload` and `navigation` transactions, you can supply a `beforeNavigate` option to the `BrowserTracing` integration. This option allows you to modify the transaction name to make it more generic, so that, for example, transactions named `GET /users/12312012` and `GET /users/11212012` can both be renamed `GET /users/:userid`, so that they'll group together. - - - ### shouldCreateSpanForRequest This function can be used to filter out unwanted spans such as XHR's running health checks or something similar. By default `shouldCreateSpanForRequest` already filters out everything but what was defined in `tracingOrigins`. + +## Enable Routing Instrumentation + +In our React Native, we currently provide two routing instrumentations out of the box for React Navigation V5 and V4. Otherwise you can use the bare bones routing instrumentation or create your own. + +### React Navigation V5 + +Note that this routing instrumentation will create a transaction on every route change including `goBack` navigations. + +```js +import * as Sentry from "@sentry/react-native"; + +// Construct a new instrumentation instance. This is needed to communicate between the integration and React +const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation(); + +Sentry.init({ + ... + integrations: [ + new Sentry.Tracing.ReactNativeTracing({ + // Pass instrumentation to be used as `routingInstrumentation` + routingInstrumentation: reactNavigationV5Instrumentation, + // ... + }), + ], +}) + +const App = () => { + // Create a ref for the navigation container + const navigation = React.createRef(); + + // Register the navigation container with the instrumentation + React.useEffect(() => { + reactNavigationV5Instrumentation.registerNavigationContainer(navigation); + }, []); + + return ( + // Connect the ref to the navigation container + + ... + + ); +}; +``` + +#### Configuration Options + +You can configure this instrumentation by passing an object as the first argument to `ReactNavigationV5Instrumentation`: + +`shouldSendTransaction` (route, previousRoute) => boolean + +```js + +const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation({ + shouldSendTransaction: (route, previousRoute) => { + if (route.name === 'Ignore-Route') { + return false; + } + + if (route.params.containsSensitiveInfo) { + return false; + } + + if (previousRoute.name === 'ShouldIgnoreAfter') { + return false; + } + + return true; + } +}); + +// ... +``` + +### React Navigation V4 + +Note that this routing instrumentation will create a transaction on every route change including `goBack` navigations. + +```js +// Construct a new instrumentation instance. This is needed to communicate between the integration and React +const reactNavigationV4Instrumentation = new Sentry.Tracing.ReactNavigationV4Instrumentation(); + +Sentry.init({ + ... + integrations: [ + new Sentry.Tracing.ReactNativeTracing({ + // Pass instrumentation to be used as `routingInstrumentation` + routingInstrumentation: reactNavigationV4Instrumentation, + ... + }), + ], +}) + +const App = () => { + // Create a ref for the navigation container + const appContainer = React.createRef(); + + // Register the navigation container with the instrumentation + React.useEffect(() => { + reactNavigationV4Instrumentation.registerAppContainer(appContainer); + }, []); + + return ( + // Connect the ref to the navigation container + + ); +}; +``` + +#### Configuration Options + +You can configure this instrumentation by passing an object as the first argument to `ReactNavigationV4Instrumentation`: + +`shouldSendTransaction` (route, previousRoute) => boolean + +```js + +const reactNavigationV4Instrumentation = new Sentry.Tracing.ReactNavigationV4Instrumentation({ + shouldSendTransaction: (route, previousRoute) => { + // Note that it is route.routeName here and NOT route.name like in V5, this is directly from React-Navigation + if (route.routeName === 'Ignore-Route') { + return false; + } + + if (route.params.containsSensitiveInfo) { + return false; + } + + if (previousRoute.name === 'ShouldIgnoreAfter') { + return false; + } + + return true; + } +}); + +// ... +``` + +### Other Navigation Libraries or Custom Navigation + +If you use another navigation library that we don't support or have a custom navigation solution, you can use our basic `RoutingInstrumentation` or extend it to create your own class. + +Every routing instrumentation revoles around one method: + +`onRouteWillChange` (context: TransactionContext): Transaction | undefined + +You need to ensure that this method is called **before** the route change occurs. + +#### Usage + +```js +// Construct a new instrumentation instance. This is needed to communicate between the integration and React +const routingInstrumentation = new Sentry.Tracing.RoutingInstrumentation(); + +Sentry.init({ + ... + integrations: [ + new Sentry.Tracing.ReactNativeTracing({ + // Pass instrumentation to be used as `routingInstrumentation` + routingInstrumentation, + ... + }), + ], +}) + +const App = () => { + { + // Call this before the route changes + routingInstrumentation.onRouteWillChange({ + name: newRoute.name, + op: 'navigation' + }) + }} + /> +}; +``` + + +#### Extending + + +```js +class CustomInstrumentation extends RoutingInstrumentation { + + constructor(navigator) { + super(); + + this.navigator.registerRouteChangeListener(this.routeListener.bind(this)); + } + + routeListener(newRoute) { + // Again, ensure this is called BEFORE the route changes and BEFORE the route is mounted. + this.onRouteWillChange({ + name: newRoute.name, + op: 'navigation' + }); + } +} +``` + +More extensive extension examples is by looking at our code for the React Navigation instrumentations. \ No newline at end of file From 6c9a21189281bf08d7c9e12b569f7934e84ff5ac Mon Sep 17 00:00:00 2001 From: jennmueng Date: Wed, 20 Jan 2021 16:00:42 +0700 Subject: [PATCH 2/4] ref: Update tracing import --- .../performance/capturing/automatic.mdx | 97 +++++++++---------- 1 file changed, 48 insertions(+), 49 deletions(-) diff --git a/src/platforms/common/performance/capturing/automatic.mdx b/src/platforms/common/performance/capturing/automatic.mdx index 4080f1d59ef17..fbf96a8e21443 100644 --- a/src/platforms/common/performance/capturing/automatic.mdx +++ b/src/platforms/common/performance/capturing/automatic.mdx @@ -30,7 +30,7 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - new Sentry.Tracing.ReactNativeTracing({ + new Sentry.ReactNativeTracing({ tracingOrigins: ["localhost", "my-site-url.com", /^\//], // ... other options }), @@ -72,12 +72,12 @@ Note that this routing instrumentation will create a transaction on every route import * as Sentry from "@sentry/react-native"; // Construct a new instrumentation instance. This is needed to communicate between the integration and React -const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation(); +const reactNavigationV5Instrumentation = new Sentry.ReactNavigationV5Instrumentation(); Sentry.init({ ... integrations: [ - new Sentry.Tracing.ReactNativeTracing({ + new Sentry.ReactNativeTracing({ // Pass instrumentation to be used as `routingInstrumentation` routingInstrumentation: reactNavigationV5Instrumentation, // ... @@ -110,24 +110,25 @@ You can configure this instrumentation by passing an object as the first argumen `shouldSendTransaction` (route, previousRoute) => boolean ```js - -const reactNavigationV5Instrumentation = new Sentry.Tracing.ReactNavigationV5Instrumentation({ - shouldSendTransaction: (route, previousRoute) => { - if (route.name === 'Ignore-Route') { - return false; - } - - if (route.params.containsSensitiveInfo) { - return false; - } - - if (previousRoute.name === 'ShouldIgnoreAfter') { - return false; - } - - return true; +const reactNavigationV5Instrumentation = new Sentry.ReactNavigationV5Instrumentation( + { + shouldSendTransaction: (route, previousRoute) => { + if (route.name === "Ignore-Route") { + return false; + } + + if (route.params.containsSensitiveInfo) { + return false; + } + + if (previousRoute.name === "ShouldIgnoreAfter") { + return false; + } + + return true; + }, } -}); +); // ... ``` @@ -138,12 +139,12 @@ Note that this routing instrumentation will create a transaction on every route ```js // Construct a new instrumentation instance. This is needed to communicate between the integration and React -const reactNavigationV4Instrumentation = new Sentry.Tracing.ReactNavigationV4Instrumentation(); +const reactNavigationV4Instrumentation = new Sentry.ReactNavigationV4Instrumentation(); Sentry.init({ ... integrations: [ - new Sentry.Tracing.ReactNativeTracing({ + new Sentry.ReactNativeTracing({ // Pass instrumentation to be used as `routingInstrumentation` routingInstrumentation: reactNavigationV4Instrumentation, ... @@ -174,25 +175,26 @@ You can configure this instrumentation by passing an object as the first argumen `shouldSendTransaction` (route, previousRoute) => boolean ```js - -const reactNavigationV4Instrumentation = new Sentry.Tracing.ReactNavigationV4Instrumentation({ - shouldSendTransaction: (route, previousRoute) => { - // Note that it is route.routeName here and NOT route.name like in V5, this is directly from React-Navigation - if (route.routeName === 'Ignore-Route') { - return false; - } - - if (route.params.containsSensitiveInfo) { - return false; - } - - if (previousRoute.name === 'ShouldIgnoreAfter') { - return false; - } - - return true; +const reactNavigationV4Instrumentation = new Sentry.ReactNavigationV4Instrumentation( + { + shouldSendTransaction: (route, previousRoute) => { + // Note that it is route.routeName here and NOT route.name like in V5, this is directly from React-Navigation + if (route.routeName === "Ignore-Route") { + return false; + } + + if (route.params.containsSensitiveInfo) { + return false; + } + + if (previousRoute.name === "ShouldIgnoreAfter") { + return false; + } + + return true; + }, } -}); +); // ... ``` @@ -211,12 +213,12 @@ You need to ensure that this method is called **before** the route change occurs ```js // Construct a new instrumentation instance. This is needed to communicate between the integration and React -const routingInstrumentation = new Sentry.Tracing.RoutingInstrumentation(); +const routingInstrumentation = new Sentry.RoutingInstrumentation(); Sentry.init({ ... integrations: [ - new Sentry.Tracing.ReactNativeTracing({ + new Sentry.ReactNativeTracing({ // Pass instrumentation to be used as `routingInstrumentation` routingInstrumentation, ... @@ -237,27 +239,24 @@ const App = () => { }; ``` - #### Extending - ```js class CustomInstrumentation extends RoutingInstrumentation { - constructor(navigator) { super(); - + this.navigator.registerRouteChangeListener(this.routeListener.bind(this)); } - + routeListener(newRoute) { // Again, ensure this is called BEFORE the route changes and BEFORE the route is mounted. this.onRouteWillChange({ name: newRoute.name, - op: 'navigation' + op: "navigation", }); } } ``` -More extensive extension examples is by looking at our code for the React Navigation instrumentations. \ No newline at end of file +More extensive extension examples is by looking at our code for the React Navigation instrumentations. From eb238ecf3a2989248d52701d9db463d42ea48a68 Mon Sep 17 00:00:00 2001 From: jennmueng Date: Fri, 22 Jan 2021 00:44:19 +0700 Subject: [PATCH 3/4] feat: Split up JS and RN auto instrumentation page, and write up. --- .../performance/capturing/automatic.mdx | 157 +++++++++--------- 1 file changed, 82 insertions(+), 75 deletions(-) diff --git a/src/platforms/common/performance/capturing/automatic.mdx b/src/platforms/common/performance/capturing/automatic.mdx index fbf96a8e21443..de1c393b40b74 100644 --- a/src/platforms/common/performance/capturing/automatic.mdx +++ b/src/platforms/common/performance/capturing/automatic.mdx @@ -7,13 +7,59 @@ supported: description: "Learn how to add automatic instrumentation to captured transactions." --- + + To _automatically_ capture transactions, you must first enable tracing in your app. -The `@sentry/react-native` provides a `ReactNativeTracing` integration to add _automatic_ instrumentation for monitoring the performance of React Native applications. +The `@sentry/tracing` package provides a `BrowserTracing` integration to add _automatic_ instrumentation for monitoring the performance of browser applications. + +## What Automatic Instrumentation Provides + +The `BrowserTracing` integration creates a new transaction for each page load and navigation event, and creates a child span for every `XMLHttpRequest` or `fetch` request that occurs while those transactions are open. Learn more about [traces, transactions, and spans](/product/performance/distributed-tracing/). + +## Enable Automatic Instrumentation + +To enable this automatic tracing, include the `BrowserTracing` integration in your SDK configuration options. (Note that when using ESM modules, the main `@sentry/*` import must come before the `@sentry/tracing` import.) + + + +## Configuration Options + +You can pass many different options to the `BrowserTracing` integration (as an object of the form `{optionName: value}`), but it comes with reasonable defaults out of the box. For all possible options, see [TypeDocs](https://getsentry.github.io/sentry-javascript/interfaces/tracing.browsertracingoptions.html). + +### tracingOrigins + +The default value of `tracingOrigins` is `['localhost', /^\//]`. The JavaScript SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add it there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the whole request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.** + + + +You will need to configure your web server CORS to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your set up. If you do not allow the `sentry-trace` header, the request might be blocked. + +### beforeNavigate + +For `pageload` and `navigation` transactions, the `BrowserTracing` integration uses the browser's `window.location` API to generate a transaction name. To customize the name of the `pageload` and `navigation` transactions, you can supply a `beforeNavigate` option to the `BrowserTracing` integration. This option allows you to modify the transaction name to make it more generic, so that, for example, transactions named `GET /users/12312012` and `GET /users/11212012` can both be renamed `GET /users/:userid`, so that they'll group together. + + + +### shouldCreateSpanForRequest + +This function can be used to filter out unwanted spans such as XHR's running health checks or something similar. By default `shouldCreateSpanForRequest` already filters out everything but what was defined in `tracingOrigins`. + + + + + + + + + Automatic Instrumentation is current in beta and available on the Sentry React Native SDK version ≥ 2.2.0-beta.0. As this feature is currently in beta, the API could change at any time. + + +`@sentry/react-native` provides a `ReactNativeTracing` integration to add _automatic_ instrumentation for monitoring the performance of React Native applications. ## What Automatic Instrumentation Provides @@ -42,6 +88,8 @@ Sentry.init({ }); ``` +Next, you should look to instrument your app with [routing instrumentation](#enable-routing-instrumentation). + ## Configuration Options You can pass many different options to the `ReactNativeTracing` integration (as an object of the form `{optionName: value}`), but it comes with reasonable defaults out of the box. For all possible options, see [TypeDocs](https://getsentry.github.io/sentry-javascript/interfaces/tracing.browsertracingoptions.html). @@ -62,7 +110,7 @@ This function can be used to filter out unwanted spans such as XHR's running hea ## Enable Routing Instrumentation -In our React Native, we currently provide two routing instrumentations out of the box for React Navigation V5 and V4. Otherwise you can use the bare bones routing instrumentation or create your own. +We currently provide two routing instrumentations out of the box to instrumentation route changes for React Navigation V5 and V4. We are looking to add support for other libraries such as [react-native-navigation](https://github.com/wix/react-native-navigation). Otherwise, if you have a custom routing instrumentation or use a routing library we don't support yet, you can use the bare bones routing instrumentation or create your own by extending it. ### React Navigation V5 @@ -72,14 +120,14 @@ Note that this routing instrumentation will create a transaction on every route import * as Sentry from "@sentry/react-native"; // Construct a new instrumentation instance. This is needed to communicate between the integration and React -const reactNavigationV5Instrumentation = new Sentry.ReactNavigationV5Instrumentation(); +const routingInstrumentation = new Sentry.ReactNavigationV5Instrumentation(); Sentry.init({ ... integrations: [ new Sentry.ReactNativeTracing({ // Pass instrumentation to be used as `routingInstrumentation` - routingInstrumentation: reactNavigationV5Instrumentation, + routingInstrumentation, // ... }), ], @@ -91,7 +139,7 @@ const App = () => { // Register the navigation container with the instrumentation React.useEffect(() => { - reactNavigationV5Instrumentation.registerNavigationContainer(navigation); + routingInstrumentation.registerNavigationContainer(navigation); }, []); return ( @@ -103,50 +151,20 @@ const App = () => { }; ``` -#### Configuration Options - -You can configure this instrumentation by passing an object as the first argument to `ReactNavigationV5Instrumentation`: - -`shouldSendTransaction` (route, previousRoute) => boolean - -```js -const reactNavigationV5Instrumentation = new Sentry.ReactNavigationV5Instrumentation( - { - shouldSendTransaction: (route, previousRoute) => { - if (route.name === "Ignore-Route") { - return false; - } - - if (route.params.containsSensitiveInfo) { - return false; - } - - if (previousRoute.name === "ShouldIgnoreAfter") { - return false; - } - - return true; - }, - } -); - -// ... -``` - ### React Navigation V4 Note that this routing instrumentation will create a transaction on every route change including `goBack` navigations. ```js // Construct a new instrumentation instance. This is needed to communicate between the integration and React -const reactNavigationV4Instrumentation = new Sentry.ReactNavigationV4Instrumentation(); +const routingInstrumentation = new Sentry.ReactNavigationV4Instrumentation(); Sentry.init({ ... integrations: [ new Sentry.ReactNativeTracing({ // Pass instrumentation to be used as `routingInstrumentation` - routingInstrumentation: reactNavigationV4Instrumentation, + routingInstrumentation, ... }), ], @@ -158,7 +176,7 @@ const App = () => { // Register the navigation container with the instrumentation React.useEffect(() => { - reactNavigationV4Instrumentation.registerAppContainer(appContainer); + routingInstrumentation.registerAppContainer(appContainer); }, []); return ( @@ -168,48 +186,17 @@ const App = () => { }; ``` -#### Configuration Options - -You can configure this instrumentation by passing an object as the first argument to `ReactNavigationV4Instrumentation`: +### Other Routing Libraries or Custom Routing Implementations -`shouldSendTransaction` (route, previousRoute) => boolean - -```js -const reactNavigationV4Instrumentation = new Sentry.ReactNavigationV4Instrumentation( - { - shouldSendTransaction: (route, previousRoute) => { - // Note that it is route.routeName here and NOT route.name like in V5, this is directly from React-Navigation - if (route.routeName === "Ignore-Route") { - return false; - } - - if (route.params.containsSensitiveInfo) { - return false; - } - - if (previousRoute.name === "ShouldIgnoreAfter") { - return false; - } - - return true; - }, - } -); - -// ... -``` - -### Other Navigation Libraries or Custom Navigation - -If you use another navigation library that we don't support or have a custom navigation solution, you can use our basic `RoutingInstrumentation` or extend it to create your own class. +If you use another routing library that we don't support yet, or have a custom routing solution, you can use the basic `RoutingInstrumentation` we provide, or extend it to create your own instrumentation. Every routing instrumentation revoles around one method: `onRouteWillChange` (context: TransactionContext): Transaction | undefined -You need to ensure that this method is called **before** the route change occurs. +You need to ensure that this method is called **before** the route change occurs, and an `IdleTransaction` is created and set on the scope. -#### Usage +#### Bare Bones ```js // Construct a new instrumentation instance. This is needed to communicate between the integration and React @@ -239,7 +226,7 @@ const App = () => { }; ``` -#### Extending +#### Custom Instrumentation ```js class CustomInstrumentation extends RoutingInstrumentation { @@ -259,4 +246,24 @@ class CustomInstrumentation extends RoutingInstrumentation { } ``` -More extensive extension examples is by looking at our code for the React Navigation instrumentations. +## Recipes + +At this moment, by default the React Native SDK will only create child spans for Fetch/XHR transactions out of the box. This means once you are done setting up your routing instrumentation, you will either see just a couple Fetch/XHR child spans or no children at all. To find out how to manually instrument your app, you can read up on Manual Instrumentation. + +### React Profiler + +We export the React Profiler from our React Native SDK as well, you can read more at [React Profiler](/platforms/javascript/guides/react/components/profiler/). + +After you instrument your app's routing, if you wrap a component that renders on one of the routes with `withProfiler`, you will be able to track the component's lifecycle as a child span of the route transaction. + +```js +import * as Sentry from "@sentry/react-native"; + +const SomeComponent = () => { + // ... +}; + +export default Sentry.withProfiler(SomeComponent); +``` + + From 00761f07d10b7b2aa440a45ee4bb08c559c620d6 Mon Sep 17 00:00:00 2001 From: Jenn Mueng <30991498+jennmueng@users.noreply.github.com> Date: Fri, 22 Jan 2021 15:58:54 +0700 Subject: [PATCH 4/4] ref: Code review suggestions Co-authored-by: Fiona <61481573+PeloWriter@users.noreply.github.com> --- .../performance/capturing/automatic.mdx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/platforms/common/performance/capturing/automatic.mdx b/src/platforms/common/performance/capturing/automatic.mdx index de1c393b40b74..d8b25a5539c5e 100644 --- a/src/platforms/common/performance/capturing/automatic.mdx +++ b/src/platforms/common/performance/capturing/automatic.mdx @@ -56,18 +56,18 @@ This function can be used to filter out unwanted spans such as XHR's running hea - Automatic Instrumentation is current in beta and available on the Sentry React Native SDK version ≥ 2.2.0-beta.0. As this feature is currently in beta, the API could change at any time. + Automatic instrumentation is currently in beta, available on the Sentry React Native SDK version ≥ 2.2.0-beta.0. As a result, the API may change without warning. `@sentry/react-native` provides a `ReactNativeTracing` integration to add _automatic_ instrumentation for monitoring the performance of React Native applications. ## What Automatic Instrumentation Provides -The `ReactNativeTracing` creates a child span for every `XMLHttpRequest` or `fetch` request on the Javascript layer that occurs while those transactions are open. Learn more about [traces, transactions, and spans](/product/performance/distributed-tracing/). +The `ReactNativeTracing` integration creates a child span for every `XMLHttpRequest` or `fetch` request on the Javascript layer that occurs while those transactions are open. Learn more about [traces, transactions, and spans](/product/performance/distributed-tracing/). ## Enable Automatic Instrumentation -To enable this automatic tracing, include the `ReactNativeTracing` integration in your SDK configuration options. +To enable automatic tracing, include the `ReactNativeTracing` integration in your SDK configuration options. ```javascript import * as Sentry from "@sentry/react-native"; @@ -88,7 +88,7 @@ Sentry.init({ }); ``` -Next, you should look to instrument your app with [routing instrumentation](#enable-routing-instrumentation). +Next, instrument your app with [routing instrumentation](#enable-routing-instrumentation). ## Configuration Options @@ -96,21 +96,21 @@ You can pass many different options to the `ReactNativeTracing` integration (as ### tracingOrigins -The default value of `tracingOrigins` is `['localhost', /^\//]`. The React Native SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add it there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the whole request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.** +The default value of `tracingOrigins` is `['localhost', /^\//]`. The React Native SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests whose destination contains a string in the list or matches a regex in the list. If your frontend is making requests to a different domain, you will need to add the domain there to propagate the `sentry-trace` header to the backend services, which is required to link transactions together as part of a single trace. **The `tracingOrigins` option matches against the entire request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests do not unnecessarily have the `sentry-trace` header attached.** -You will need to configure your web server CORS to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your set up. If you do not allow the `sentry-trace` header, the request might be blocked. +You will need to configure your web server CORS to allow the `sentry-trace` header. The configuration might look like `"Access-Control-Allow-Headers: sentry-trace"`, but the configuration depends on your setup. If you do not allow the `sentry-trace` header, the request might be blocked. ### shouldCreateSpanForRequest -This function can be used to filter out unwanted spans such as XHR's running health checks or something similar. By default `shouldCreateSpanForRequest` already filters out everything but what was defined in `tracingOrigins`. +This function can be used to filter out unwanted spans, such as XHR's running health checks or something similar. By default `shouldCreateSpanForRequest` already filters out everything except what was defined in `tracingOrigins`. ## Enable Routing Instrumentation -We currently provide two routing instrumentations out of the box to instrumentation route changes for React Navigation V5 and V4. We are looking to add support for other libraries such as [react-native-navigation](https://github.com/wix/react-native-navigation). Otherwise, if you have a custom routing instrumentation or use a routing library we don't support yet, you can use the bare bones routing instrumentation or create your own by extending it. +We currently provide two routing instrumentations out of the box to instrument route changes for React Navigation V5 and V4. In the future, we will add support for other libraries such as [react-native-navigation](https://github.com/wix/react-native-navigation). Otherwise, if you have a custom routing instrumentation, or use a routing library we don't yet support, you can use the bare bones routing instrumentation or create your own by extending it. ### React Navigation V5 @@ -188,7 +188,7 @@ const App = () => { ### Other Routing Libraries or Custom Routing Implementations -If you use another routing library that we don't support yet, or have a custom routing solution, you can use the basic `RoutingInstrumentation` we provide, or extend it to create your own instrumentation. +If you use another routing library that we don't yet support, or have a custom routing solution, you can use the basic `RoutingInstrumentation` we provide, or extend it to create your own instrumentation. Every routing instrumentation revoles around one method: @@ -248,7 +248,7 @@ class CustomInstrumentation extends RoutingInstrumentation { ## Recipes -At this moment, by default the React Native SDK will only create child spans for Fetch/XHR transactions out of the box. This means once you are done setting up your routing instrumentation, you will either see just a couple Fetch/XHR child spans or no children at all. To find out how to manually instrument your app, you can read up on Manual Instrumentation. +Currently, by default, the React Native SDK will only create child spans for fetch/XHR transactions out of the box. This means once you are done setting up your routing instrumentation, you will either see just a few fetch/XHR child spans or no children at all. To find out how to manually instrument your app, review our Manual Instrumentation. ### React Profiler