Skip to content

Commit d84ad61

Browse files
krystofwoldrichbruno-garcializokm
authored
Add RN Replay Privacy page (#11798)
Co-authored-by: Bruno Garcia <[email protected]> Co-authored-by: Liza Mock <[email protected]>
1 parent f664c09 commit d84ad61

File tree

2 files changed

+116
-1
lines changed

2 files changed

+116
-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 by default. If your app has any sensitive data, you should only turn the default masking off after explicitly masking out any sensitive data, using the APIs described below.
79+
However, if you're working on a mobile app that doesn't contain any PII or 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/react-native/session-replay/privacy/).
7980

8081
<Note>
8182

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: Privacy
3+
sidebar_order: 5501
4+
notSupported:
5+
description: "Learn how to mask sensitive data that may appear in your app in Session Replay."
6+
---
7+
8+
<Alert>
9+
10+
Using custom masking in your Session Replays instead of our default settings, may accidentally expose sensitive customer data. Make sure to test your app thoroughly to ensure that no sensitive data is exposed before publishing it.
11+
12+
</Alert>
13+
14+
The Session Replay SDK masks all text content, images, webviews, and user input by default. This helps ensure that no sensitive data is exposed. You can also manually choose which parts of your app to mask by using the options listed below.
15+
16+
If your app doesn't contain any sensitive date, you can disable the default masking behavior with:
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 5.36.0, 6.3.0 and up_
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+
_Make sure your Sentry React Native SDK version is 6.4.0-beta.1 and up to use the masking components_
50+
51+
## General Masking Rules
52+
53+
When components are wrapped by `Unmask`, **only direct children will be unmasked**. You'll need to explicitly wrap any indirect children that you want to appear in the replay.
54+
55+
```jsx
56+
<Sentry.Unmask>
57+
<Text>
58+
This will be unmasked
59+
<Text>
60+
This will be masked
61+
</Text>
62+
</Text>
63+
<Text>
64+
This will be unmasked
65+
</Text>
66+
</Sentry.Unmask>
67+
```
68+
69+
When components are wrapped by `Mask`, **all children will be masked**.
70+
71+
```jsx
72+
<Sentry.Mask>
73+
<Text>
74+
This will be masked
75+
<Text>
76+
This will be masked
77+
</Text>
78+
</Text>
79+
<Text>
80+
This will be masked
81+
</Text>
82+
</Sentry.Mask>
83+
```
84+
85+
### Masking Priority
86+
87+
If a view is marked as masked, it will always be masked, even if it's a child of an unmasked view.
88+
89+
```jsx
90+
<Sentry.Mask>
91+
<Text>This will be masked</Text>
92+
<Sentry.Unmask>
93+
<Text>This will be masked</Text>
94+
</Sentry.Unmask>
95+
</Sentry.Mask>
96+
```
97+
98+
The `Mask` component can't be unmasked.
99+
100+
```jsx
101+
<Sentry.Unmask>
102+
<Sentry.Mask>
103+
<Text>This will be masked</Text>
104+
</Sentry.Mask>
105+
</Sentry.Unmask>
106+
```
107+
108+
## Troubleshooting
109+
110+
The `Mask` and `Unmask` components are native on iOS and Android and are compatible with both the New and the Legacy Architecture.
111+
112+
The masking components behave as standard React Native `View` components.
113+
114+
If you're experiencing issues with unmasking that are more than one level deep, check if the wrapped components are present in the native views hierarchy. If not, it means that your view was evaluated by React Native as `Layout Only` and flattened. Read more about [flattening views](https://reactnative.dev/architecture/view-flattening) in the React Native documentation.

0 commit comments

Comments
 (0)