fix(rn): tracePropagationTargets differs on mobile and web in RN v6 (#11579)

Author: krystofwoldrich

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 <PlatformIdentifier name="trace-propagation-targets" /> 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 <PlatformIdentifier name="trace-propagation-targets" /> 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`).
 
 </ConfigKey>
 

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`).
+
+<Expandable title="Using React Native on Web? Here is how `tracePropagationTargets` changes.">
+
+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.**
 
 <PlatformContent includePath="performance/tracePropagationTargets-example" />
 
 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.
 
+</Expandable>
+
 ### 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.

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({

platform-includes/performance/enable-tracing/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