Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/platforms/react-native/configuration/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
17 changes: 0 additions & 17 deletions platform-includes/performance/enable-tracing/react-native.mdx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading