Skip to content

Commit c5072fe

Browse files
feat(react-native): Add Browser replay init to the RN docs
1 parent 4a6b095 commit c5072fe

File tree

1 file changed

+38
-2
lines changed
  • docs/platforms/react-native/session-replay

1 file changed

+38
-2
lines changed

docs/platforms/react-native/session-replay/index.mdx

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ pnpm add @sentry/react-native
3333

3434
To set up the integration, add the following to your Sentry initialization.
3535

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

3939
Sentry.init({
@@ -44,6 +44,24 @@ Sentry.init({
4444
});
4545
```
4646

47+
```javascript {tabTitle:Browser}
48+
import * as Sentry from '@sentry/react-native';
49+
import { Platform } from 'react-native';
50+
51+
Sentry.init({
52+
dsn: "___PUBLIC_DSN___",
53+
replaysSessionSampleRate: 0.1,
54+
replaysOnErrorSampleRate: 1.0,
55+
integrations: (integrations) => {
56+
if (Platform.OS === 'web') {
57+
integrations.push(Sentry.browserReplayIntegration());
58+
}
59+
integrations.push(Sentry.mobileReplayIntegration());
60+
return integrations;
61+
},
62+
});
63+
```
64+
4765
## Verify
4866

4967
While you're testing, we recommend that you set <PlatformIdentifier name="replays-session-sample-rate" /> to `1.0`. This ensures that every user session will be sent to Sentry.
@@ -76,7 +94,7 @@ If you encounter any data not being redacted with the default settings, please l
7694

7795
To disable redaction altogether (not to be used on applications with sensitive data):
7896

79-
```javascript
97+
```javascript {tabTitle:Mobile}
8098
// You can pass options to the mobileReplayIntegration function during init:
8199
integrations: [
82100
Sentry.mobileReplayIntegration({
@@ -87,6 +105,24 @@ integrations: [
87105
]
88106
```
89107

108+
```javascript {tabTitle:Browser}
109+
// You can pass options to the browserReplayIntegration function during init:
110+
integrations: (integrations) => {
111+
if (Platform.OS === 'web') {
112+
integrations.push(Sentry.browserReplayIntegration({
113+
maskAllText: true,
114+
maskAllInputs: true,
115+
}));
116+
}
117+
integrations.push(Sentry.mobileReplayIntegration({
118+
maskAllText: false,
119+
maskAllImages: false,
120+
maskAllVectors: false,
121+
}));
122+
return integrations;
123+
}
124+
```
125+
90126
## React Component Names
91127

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

0 commit comments

Comments
 (0)