Skip to content
Open
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: 2 additions & 0 deletions _typos.toml
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,5 @@ aso = "aso" # Intentional variable name in utils.ts
MIGRATED_GETTING_STARTD_DOCS = "MIGRATED_GETTING_STARTD_DOCS" # Matches actual constant in Sentry backend (external)
STARTD = "STARTD" # Part of MIGRATED_GETTING_STARTD_DOCS - needed because typos parses words in markdown text
ERRO = "ERRO" # Special case - Part of "ERRORs" in legacy-sdk/integrations.mdx (logging level context)
UNPARSEABLE_BODY_TYPE = "UNPARSEABLE_BODY_TYPE" # Constant emitted by React Native Session Replay SDK
UNPARSEABLE = "UNPARSEABLE" # Part of UNPARSEABLE_BODY_TYPE - needed because typos parses words in markdown text
88 changes: 88 additions & 0 deletions docs/platforms/react-native/session-replay/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,94 @@ integrations: [
]
```

## Network Details

_Available in React Native SDK 8.15.0 and later_

By default, Replay captures basic information about all outgoing HTTP requests in your application — URL, request and response body sizes, method, and status code. To limit the chance of collecting private data, request/response **headers** and **bodies** are _not_ captured unless you explicitly opt in.

You opt in by listing the URLs you want enriched in `networkDetailAllowUrls`. Pick only URLs that are safe for capturing bodies and avoid any endpoints that may contain Personally Identifiable Information (PII).

<Alert>

Body and header content will be PII-sanitized server-side, based on object keys and values. Refer to [Server-Side Scrubbing](/security-legal-pii/scrubbing/server-side-scrubbing/) for more details.

</Alert>

<Alert level="warning">

Only **XHR**-based requests are currently supported (this covers `axios` and most popular HTTP clients on React Native). Native `fetch` body capture will be added in a follow-up.

</Alert>

The SDK exposes the following options on `mobileReplayIntegration`:

| Key | Type | Default | Description |
|-----|------|---------|-------------|
| `networkDetailAllowUrls` | `(string \| RegExp)[]` | `[]` | URL patterns to enable capture of request/response headers (and bodies, when `networkCaptureBodies` is `true`). String patterns use substring matching; `RegExp` is matched via `.test(url)`. |
| `networkDetailDenyUrls` | `(string \| RegExp)[]` | `[]` | URL patterns to **never** enable capture for, even if an allow pattern matches them. |
| `networkCaptureBodies` | `boolean` | `false` | Controls whether request and response bodies are captured for allow-listed URLs. Disabled by default since bodies can contain sensitive payloads &mdash; opt in explicitly. |
Comment thread
sentry[bot] marked this conversation as resolved.
| `networkRequestHeaders` | `string[]` | `[]` | Additional request header names to capture for allow-listed URLs, in addition to the defaults (`Content-Type`, `Content-Length`, `Accept`). |
| `networkResponseHeaders` | `string[]` | `[]` | Additional response header names to capture for allow-listed URLs, in addition to the defaults (`Content-Type`, `Content-Length`, `Accept`). |

Any URL matching the given pattern(s) will be enriched with headers and (optionally) bodies:

```javascript {tabTitle:Mobile}
import * as Sentry from "@sentry/react-native";

Sentry.init({
dsn: "___PUBLIC_DSN___",
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 1.0,
integrations: [
Sentry.mobileReplayIntegration({
networkDetailAllowUrls: ["https://api.example.com"],
networkCaptureBodies: true,
}),
],
});
```

String patterns use substring matching &mdash; any URL containing the string will match. For exact or more complex matches, pass a `RegExp`:

```javascript {tabTitle:Mobile}
integrations: [
Sentry.mobileReplayIntegration({
networkDetailAllowUrls: [
"api.example.com", // substring match
/^https:\/\/api\.example\.com\/.*/, // regex match
],
networkDetailDenyUrls: [/\/auth\//], // never capture details for auth endpoints
networkCaptureBodies: true,
}),
]
```

Requests to a matching URL will include request and response bodies (when `networkCaptureBodies` is `true`) as well as the following default headers:

- `Content-Type`
- `Content-Length`
- `Accept`

To capture additional headers, configure `networkRequestHeaders` and `networkResponseHeaders`. The defaults are always included:

```javascript {tabTitle:Mobile}
integrations: [
Sentry.mobileReplayIntegration({
networkDetailAllowUrls: ["https://api.example.com"],
networkCaptureBodies: true,
networkRequestHeaders: ["Cache-Control", "X-My-Header"],
networkResponseHeaders: ["Referrer-Policy", "X-Response-Header"],
}),
]
```

<Alert>

Authorization-like headers (`Authorization`, `Cookie`, `Set-Cookie`, `X-API-Key`, `X-Auth-Token`, `Proxy-Authorization`) are always stripped, regardless of configuration. Captured bodies are truncated to ~150 KB; truncated payloads include a `MAX_BODY_SIZE_EXCEEDED` warning. Binary bodies (`Blob`, `ArrayBuffer`, typed arrays) are skipped with an `UNPARSEABLE_BODY_TYPE` warning instead of being inlined.

</Alert>

## React Component Names

Sentry helps you capture your React components and unlock additional insights in your application. You can set it up to use React component names.
Expand Down
Loading