Skip to content

Commit aef1088

Browse files
krystofwoldrichkrystofwoldrich
committed
Add RN Replay Privacy page
1 parent 0717c17 commit aef1088

File tree

2 files changed

+114
-1
lines changed

2 files changed

+114
-1
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ Sampling begins as soon as a session starts. <PlatformIdentifier name="replays-s
7575

7676
## Privacy
7777

78-
The SDK is recording and aggressively redacting all text and images. We plan to add fine controls for redacting, but in this version, we just allow either on or off. The default is on. Please don’t turn it off if you have sensitive data in your app. Before the Beta is complete, we'll give you the controls you need.
78+
The SDK is recording and aggressively masking all text, images and webviews. Please don’t turn it off if you have sensitive data in your app.
79+
However, if you're working on a mobile app that's free of PII or other types of private data, you can opt out of the default text and image masking settings. To learn more about Session Replay privacy, [read our docs](/platforms/android/session-replay/privacy/).
7980

8081
<Note>
8182

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Privacy
3+
sidebar_order: 5501
4+
notSupported:
5+
description: "Learn how to mask parts of your app's data in Session Replay."
6+
---
7+
8+
<Alert>
9+
10+
Using custom masking in your Session Replays may accidentally expose sensitive customer data. Before publishing an App with Session Replay enabled, make sure to test it thoroughly to ensure that no sensitive data is exposed.
11+
12+
</Alert>
13+
14+
By default, our Session Replay SDK masks all text content, images, webviews, and user input. This helps ensure that no sensitive data is exposed. You can also manually choose which parts of your app's data you want to mask by using the different options listed below.
15+
16+
To disable the default masking behavior (not to be used on applications with sensitive data):
17+
18+
```javascript
19+
Sentry.mobileReplayIntegration({
20+
maskAllText: false,
21+
maskAllImages: false,
22+
maskAllVectors: false,
23+
}),
24+
```
25+
26+
_Make sure your Sentry React Native SDK version is at least 5.36.0 or 6.3.0._
27+
28+
## Mask and Unmask Components
29+
30+
You can choose which views you want to mask or unmask by using the `Mask` or `Unmask` components.
31+
32+
```jsx
33+
import * as Sentry from '@sentry/react-native';
34+
35+
const Example = () => {
36+
return (
37+
<View>
38+
<Sentry.Unmask>
39+
<Text>This will be unmasked</Text>
40+
</Sentry.Unmask>
41+
<Sentry.Mask>
42+
<Text>This will be masked</Text>
43+
</Sentry.Mask>
44+
</View>
45+
);
46+
}
47+
```
48+
49+
## General Masking Rules
50+
51+
When components are wrapped by `Unmask`, **only direct children will be unmasked**. You'll need to explicitly wrap each further child if you want them to appear in the replay.
52+
53+
```jsx
54+
<Sentry.Unmask>
55+
<Text>
56+
This will be unmasked
57+
<Text>
58+
This will be masked
59+
</Text>
60+
</Text>
61+
<Text>
62+
This will be unmasked
63+
</Text>
64+
</Sentry.Unmask>
65+
```
66+
67+
When components are wrapped by `Mask`, **all children will be masked**.
68+
69+
```jsx
70+
<Sentry.Mask>
71+
<Text>
72+
This will be masked
73+
<Text>
74+
This will be masked
75+
</Text>
76+
</Text>
77+
<Text>
78+
This will be masked
79+
</Text>
80+
</Sentry.Mask>
81+
```
82+
83+
### Masking Priority
84+
85+
If a view is marked as masked, it will always be masked, even if it's a child of an unmasked view.
86+
87+
```jsx
88+
<Sentry.Mask>
89+
<Text>This will be masked</Text>
90+
<Sentry.Unmask>
91+
<Text>This will be masked</Text>
92+
</Sentry.Unmask>
93+
</Sentry.Mask>
94+
```
95+
96+
The `Mask` component can't be unmasked.
97+
98+
```jsx
99+
<Sentry.Unmask>
100+
<Sentry.Mask>
101+
<Text>This will be masked</Text>
102+
</Sentry.Mask>
103+
</Sentry.Unmask>
104+
```
105+
106+
## Troubleshooting
107+
108+
The `Mask` and `Unmask` components are native components on iOS and Android and are compatible with both the New Architecture and the Legacy Architecture.
109+
110+
The masking components behave as standard React Native `View` components.
111+
112+
If you are experiencing issues with unmasking more than one level deep, check if the wrapped components are present in the native views hierarchy. If not your view were evaluated by React Native to be flattened. Read more about [flattening views](https://reactnative.dev/architecture/view-flattening) in the React Native documentation.

0 commit comments

Comments
 (0)