diff --git a/_typos.toml b/_typos.toml index 6c476e05e4e9de..7fc8c07de024a0 100644 --- a/_typos.toml +++ b/_typos.toml @@ -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 diff --git a/docs/platforms/react-native/session-replay/index.mdx b/docs/platforms/react-native/session-replay/index.mdx index dd4e3f7b8bbe58..53b2f3be637dfa 100644 --- a/docs/platforms/react-native/session-replay/index.mdx +++ b/docs/platforms/react-native/session-replay/index.mdx @@ -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). + + + +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. + + + + + +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. + + + +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 — opt in explicitly. | +| `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 — 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"], + }), +] +``` + + + +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. + + + ## 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.