diff --git a/docs/platforms/react-native/session-replay/index.mdx b/docs/platforms/react-native/session-replay/index.mdx index 785cbf67449ef..7f4f7aaf8a110 100644 --- a/docs/platforms/react-native/session-replay/index.mdx +++ b/docs/platforms/react-native/session-replay/index.mdx @@ -33,7 +33,7 @@ pnpm add @sentry/react-native To set up the integration, add the following to your Sentry initialization. -```javascript +```javascript {tabTitle:Mobile} import * as Sentry from "@sentry/react-native"; Sentry.init({ @@ -44,6 +44,24 @@ Sentry.init({ }); ``` +```javascript {tabTitle:Browser} +import * as Sentry from '@sentry/react-native'; +import { Platform } from 'react-native'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + integrations: (integrations) => { + if (Platform.OS === 'web') { + integrations.push(Sentry.browserReplayIntegration()); + } + integrations.push(Sentry.mobileReplayIntegration()); + return integrations; + }, +}); +``` + ## Verify While you're testing, we recommend that you set to `1.0`. This ensures that every user session will be sent to Sentry. @@ -76,9 +94,9 @@ If you encounter any data not being redacted with the default settings, please l To disable redaction altogether (not to be used on applications with sensitive data): -```javascript -// You can pass options to the mobileReplayIntegration function during init: +```javascript {tabTitle:Mobile} integrations: [ + // You can pass options to the mobileReplayIntegration function during init: Sentry.mobileReplayIntegration({ maskAllText: false, maskAllImages: false, @@ -87,6 +105,25 @@ integrations: [ ] ``` +```javascript {tabTitle:Browser} +integrations: (integrations) => { + if (Platform.OS === 'web') { + // You can pass options to the browserReplayIntegration function during init: + integrations.push(Sentry.browserReplayIntegration({ + maskAllText: true, + maskAllInputs: true, + })); + } + // You can pass options to the mobileReplayIntegration function during init: + integrations.push(Sentry.mobileReplayIntegration({ + maskAllText: false, + maskAllImages: false, + maskAllVectors: false, + })); + return integrations; +} +``` + ## 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.