From 442ef4da000a0435a12dea3c63399ba43d3269af Mon Sep 17 00:00:00 2001 From: Krystof Woldrich Date: Mon, 7 Aug 2023 15:56:30 +0200 Subject: [PATCH 1/4] Use new clientOptions.tracePropagationTargets --- src/js/tracing/reactnativetracing.ts | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts index 276a605371..9defecb0b3 100644 --- a/src/js/tracing/reactnativetracing.ts +++ b/src/js/tracing/reactnativetracing.ts @@ -165,6 +165,10 @@ export class ReactNativeTracing implements Integration { addGlobalEventProcessor: (callback: EventProcessor) => void, getCurrentHub: () => Hub, ): void { + const hub = getCurrentHub(); + const client = hub.getClient(); + const clientOptions = client && client.getOptions(); + // eslint-disable-next-line @typescript-eslint/unbound-method const { traceFetch, @@ -173,7 +177,7 @@ export class ReactNativeTracing implements Integration { tracingOrigins, // @ts-ignore TODO shouldCreateSpanForRequest, - tracePropagationTargets, + tracePropagationTargets: integrationTracePropagationTargets, routingInstrumentation, enableAppStartTracking, enableNativeFramesTracking, @@ -182,6 +186,23 @@ export class ReactNativeTracing implements Integration { this._getCurrentHub = getCurrentHub; + const clientOptionsTracePropagationTargets = clientOptions && clientOptions.tracePropagationTargets; + // There are three ways to configure tracePropagationTargets: + // 1. via top level client option `tracePropagationTargets` + // 2. via ReactNativeTracing option `tracePropagationTargets` + // 3. via ReactNativeTracing option `tracingOrigins` (deprecated) + // + // To avoid confusion, favour top level client option `tracePropagationTargets`, and fallback to + // ReactNativeTracing option `tracePropagationTargets` and then `tracingOrigins` (deprecated). + // + // If both 1 and either one of 2 or 3 are set (from above), we log out a warning. + const tracePropagationTargets = clientOptionsTracePropagationTargets || integrationTracePropagationTargets; + if (__DEV__ && (integrationTracePropagationTargets || tracingOrigins) && clientOptionsTracePropagationTargets) { + logger.warn( + '[ReactNativeTracing] The `tracePropagationTargets` option was set in the ReactNativeTracing integration and top level `Sentry.init`. The top level `Sentry.init` value is being used.', + ); + } + if (enableAppStartTracking) { void this._instrumentAppStart(); } From fa8e4a7e41bc7d2f05e42aa5600b00ff0795b343 Mon Sep 17 00:00:00 2001 From: Krystof Woldrich Date: Mon, 7 Aug 2023 18:21:42 +0200 Subject: [PATCH 2/4] feat(tracing): Added `tracePropagationTargets` option to simplify setup for tracing without performance --- CHANGELOG.md | 12 ++++++++++++ sample-new-architecture/src/App.tsx | 2 +- src/js/tracing/reactnativetracing.ts | 6 +++--- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c7738f5dd0..efdc95f02e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Changelog +## Unreleased + +### Features + +- This release adds support for [distributed tracing](https://docs.sentry.io/platforms/javascript/usage/distributed-tracing/) without requiring performance monitoring to be active on the JavaScript SDKs (browser and node). This means even if there is no sampled transaction/span, the SDK will still propagate traces to downstream services. Distributed Tracing can be configured with the `tracePropagationTargets` option, which controls what requests to attach the `sentry-trace` and `baggage` HTTP headers to (which is what propagates tracing information). ([#3230](https://github.com/getsentry/sentry-react-native/pull/3230)) + + ```javascript + Sentry.init({ + tracePropagationTargets: ["third-party-site.com", /^https:\/\/yourserver\.io\/api/], + }); + ``` + ## 5.8.1 ### Fixed diff --git a/sample-new-architecture/src/App.tsx b/sample-new-architecture/src/App.tsx index d3b535d1c8..ab74583719 100644 --- a/sample-new-architecture/src/App.tsx +++ b/sample-new-architecture/src/App.tsx @@ -45,7 +45,6 @@ Sentry.init({ // The time to wait in ms until the transaction will be finished, For testing, default is 1000 ms idleTimeout: 5000, routingInstrumentation: reactNavigationInstrumentation, - tracingOrigins: ['localhost', /^\//, /^https:\/\//], enableUserInteractionTracing: true, beforeNavigate: (context: Sentry.ReactNavigationTransactionContext) => { // Example of not sending a transaction for the screen with the name "Manual Tracker" @@ -75,6 +74,7 @@ Sentry.init({ // This will capture ALL TRACES and likely use up all your quota enableTracing: true, tracesSampleRate: 1.0, + tracePropagationTargets: ['localhost', /^\//, /^https:\/\//, /^http:\/\//], attachStacktrace: true, // Attach screenshots to events. attachScreenshot: true, diff --git a/src/js/tracing/reactnativetracing.ts b/src/js/tracing/reactnativetracing.ts index 9defecb0b3..5155f61bee 100644 --- a/src/js/tracing/reactnativetracing.ts +++ b/src/js/tracing/reactnativetracing.ts @@ -177,7 +177,7 @@ export class ReactNativeTracing implements Integration { tracingOrigins, // @ts-ignore TODO shouldCreateSpanForRequest, - tracePropagationTargets: integrationTracePropagationTargets, + tracePropagationTargets: thisOptionsTracePropagationTargets, routingInstrumentation, enableAppStartTracking, enableNativeFramesTracking, @@ -196,8 +196,8 @@ export class ReactNativeTracing implements Integration { // ReactNativeTracing option `tracePropagationTargets` and then `tracingOrigins` (deprecated). // // If both 1 and either one of 2 or 3 are set (from above), we log out a warning. - const tracePropagationTargets = clientOptionsTracePropagationTargets || integrationTracePropagationTargets; - if (__DEV__ && (integrationTracePropagationTargets || tracingOrigins) && clientOptionsTracePropagationTargets) { + const tracePropagationTargets = clientOptionsTracePropagationTargets || thisOptionsTracePropagationTargets; + if (__DEV__ && (thisOptionsTracePropagationTargets || tracingOrigins) && clientOptionsTracePropagationTargets) { logger.warn( '[ReactNativeTracing] The `tracePropagationTargets` option was set in the ReactNativeTracing integration and top level `Sentry.init`. The top level `Sentry.init` value is being used.', ); From dd58e9ac8e2b5d330babaacf1bd94981c0f821c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kry=C5=A1tof=20Wold=C5=99ich?= <31292499+krystofwoldrich@users.noreply.github.com> Date: Thu, 10 Aug 2023 11:50:44 +0200 Subject: [PATCH 3/4] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49dac76743..f490ec8afc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ - Add `tracePropagationTargets` option ([#3230](https://github.com/getsentry/sentry-react-native/pull/3230)) - This release adds support for [distributed tracing](https://docs.sentry.io/platforms/javascript/usage/distributed-tracing/) + This release adds support for [distributed tracing](https://docs.sentry.io/platforms/react-native/usage/distributed-tracing/) without requiring performance monitoring to be active on the JavaScript SDKs (browser and node). This means even if there is no sampled transaction/span, the SDK will still propagate traces to downstream services. Distributed Tracing can be configured with the `tracePropagationTargets` option, From 92a0cb4bc3ca4f215ae7a23666a1a112d87c12b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kry=C5=A1tof=20Wold=C5=99ich?= <31292499+krystofwoldrich@users.noreply.github.com> Date: Thu, 10 Aug 2023 11:59:59 +0200 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f490ec8afc..740b27365c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ - Add `tracePropagationTargets` option ([#3230](https://github.com/getsentry/sentry-react-native/pull/3230)) This release adds support for [distributed tracing](https://docs.sentry.io/platforms/react-native/usage/distributed-tracing/) - without requiring performance monitoring to be active on the JavaScript SDKs (browser and node). + without requiring performance monitoring to be active on the React Native SDK. This means even if there is no sampled transaction/span, the SDK will still propagate traces to downstream services. Distributed Tracing can be configured with the `tracePropagationTargets` option, which controls what requests to attach the `sentry-trace` and `baggage` HTTP headers to (which is what propagates tracing information).