From 0d2a04d85ab3bb7e7fdac26428381e343809e7dc Mon Sep 17 00:00:00 2001 From: Krystof Woldrich Date: Wed, 16 Oct 2024 11:48:26 +0200 Subject: [PATCH] fix(rn): tracePropagationTargets differs on mobile and web in RN v6 --- .../react-native/configuration/options.mdx | 2 +- .../automatic-instrumentation.mdx | 9 ++++++++- .../tracing/instrumentation/expo-router.mdx | 2 +- .../performance/enable-tracing/react-native.mdx | 17 ----------------- .../react-native.mdx | 9 ++------- 5 files changed, 12 insertions(+), 27 deletions(-) delete mode 100644 platform-includes/performance/enable-tracing/react-native.mdx diff --git a/docs/platforms/react-native/configuration/options.mdx b/docs/platforms/react-native/configuration/options.mdx index 58f5593c3fc69..e79eda75be590 100644 --- a/docs/platforms/react-native/configuration/options.mdx +++ b/docs/platforms/react-native/configuration/options.mdx @@ -267,7 +267,7 @@ The option may contain a list of strings or regex against which the URLs of outg If one of the entries in the list matches the URL of an outgoing request, trace data will be attached to that request. String entries do not have to be full matches, meaning the URL of a request is matched when it _contains_ a string provided through the option. -If is not provided, trace data is only attached to outgoing requests that contain `localhost` in their URL or requests whose URL starts with a `'/'` (for example `GET /api/v1/users`). +If is not provided, trace data is attached to every outgoing request from the application (mobile, desktop, tv). When running on web trace data is only attached to outgoing requests that contain `localhost` in their URL or requests whose URL starts with a `'/'` (for example `GET /api/v1/users`). diff --git a/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx index 90c9f97b1856c..40c77c2aec8c6 100644 --- a/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/automatic-instrumentation.mdx @@ -112,12 +112,19 @@ Sentry.init({ ### tracePropagationTargets -The default value of `tracePropagationTargets` 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'll 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 `tracePropagationTargets` option matches against the entire request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests don't unnecessarily have the `sentry-trace` header attached.** +The default value of `tracePropagationTargets` is `[/.*/]` for mobile and `['localhost', /^\//]` for web. The React Native SDK will attach the `sentry-trace` header to all outgoing XHR/fetch requests on mobile. +On web, trace data is only attached to outgoing requests that contain `localhost` in their URL or requests whose URL starts with a `'/'` (for example `GET /api/v1/users`). + + + +The 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'll 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 `tracePropagationTargets` option matches against the entire request URL, not just the domain. Using stricter regex to match certain parts of the URL ensures that requests don't unnecessarily have the `sentry-trace` header attached.** You'll 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 don't allow the `sentry-trace` header, the request might get blocked. + + ### beforeStartSpan `beforeStartSpan` is called at the start of every `pageload` or `navigation` span, and is passed an object containing data about the span which will be started. With `beforeStartSpan` you can modify that data. diff --git a/docs/platforms/react-native/tracing/instrumentation/expo-router.mdx b/docs/platforms/react-native/tracing/instrumentation/expo-router.mdx index 0ebc3930ddfa4..5765792f85939 100644 --- a/docs/platforms/react-native/tracing/instrumentation/expo-router.mdx +++ b/docs/platforms/react-native/tracing/instrumentation/expo-router.mdx @@ -13,7 +13,7 @@ The code snippet below shows how to initialize the instrumentation. ```javascript {6-8, 15-16, 20-25} {filename: app/_layout.tsx} import React from 'react'; import { Slot, useNavigationContainerRef } from 'expo-router'; -import Constants, { ExecutionEnvironment.StoreClient } from 'expo-constants'; +import Constants, { ExecutionEnvironment } from 'expo-constants'; import * as Sentry from '@sentry/react-native'; const navigationIntegration = Sentry.reactNavigationintegration({ diff --git a/platform-includes/performance/enable-tracing/react-native.mdx b/platform-includes/performance/enable-tracing/react-native.mdx deleted file mode 100644 index 3d13293e47461..0000000000000 --- a/platform-includes/performance/enable-tracing/react-native.mdx +++ /dev/null @@ -1,17 +0,0 @@ -Tracing is enabled by default in the React Native SDK. - - - -If you use a version of our SDK prior to version `3.0.0`, you will need to include the `ReactNativeTracing` integration to use [automatic instrumentation](/platforms/react-native/tracing/instrumentation/automatic-instrumentation/). You do not need to do this in versions `3.0.0` and above. - -```javascript -import * as Sentry from "@sentry/react-native"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - integrations: [new Sentry.ReactNativeTracing()], -}); -``` - - diff --git a/platform-includes/performance/tracePropagationTargets-example/react-native.mdx b/platform-includes/performance/tracePropagationTargets-example/react-native.mdx index 0d6f38c28628e..0b81ea44b606a 100644 --- a/platform-includes/performance/tracePropagationTargets-example/react-native.mdx +++ b/platform-includes/performance/tracePropagationTargets-example/react-native.mdx @@ -3,18 +3,13 @@ For example: - A frontend application is served from `example.com` - A backend service is served from `api.example.com` - The frontend application makes API calls to the backend -- Therefore, the option needs to be configured like this: `new Sentry.ReactNativeTracing({tracePropagationTargets: ['api.example.com']})` +- Therefore, the option needs to be configured like this: `Sentry.init({tracePropagationTargets: ['api.example.com']})` - Now outgoing XHR/fetch requests to `api.example.com` will get the `sentry-trace` header attached - ```javascript Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.ReactNativeTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com"], - }), - ], + tracePropagationTargets: ["localhost", "my-site-url.com"], // We recommend adjusting this value in production, or using tracesSampler // for finer control