Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add RN Replay Privacy page #11798

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/platforms/react-native/session-replay/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ Sampling begins as soon as a session starts. <PlatformIdentifier name="replays-s

## Privacy

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.
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.
Copy link
Member

@bruno-garcia bruno-garcia Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this text widespread? If so, we could reword it everywhere IMO

Suggested change
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.
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.

Made a few language tweaks to @bruno-garcia edits :)

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/).
Comment on lines +78 to +79
Copy link
Collaborator

@antonis antonis Nov 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

l: Nit pick because I was initially confused on what to turn off. Probably it's clear enough based on the context even without the suggested change.
h: we need to change the link to react-native

Suggested change
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.
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/).
The SDK is recording and aggressively masking all text, images, and webviews. Please don’t disable masking if you have sensitive data in your app.
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/).

Made a few small language tweaks.

Copy link
Member

@bruno-garcia bruno-garcia Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should reword it on the Android docs too:

Suggested change
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/).
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/).


<Note>

Expand Down
112 changes: 112 additions & 0 deletions docs/platforms/react-native/session-replay/privacy/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
---
title: Privacy
sidebar_order: 5501
notSupported:
description: "Learn how to mask parts of your app's data in Session Replay."
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
description: "Learn how to mask parts of your app's data in Session Replay."
description: "Learn how to mask sensitive data that may appear in your app in Session Replay."

---

<Alert>

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.

</Alert>
Comment on lines +8 to +12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Alert>
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.
</Alert>
<Alert>
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.
</Alert>


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.

To disable the default masking behavior (not to be used on applications with sensitive data):

```javascript
Sentry.mobileReplayIntegration({
maskAllText: false,
maskAllImages: false,
maskAllVectors: false,
}),
```

_Make sure your Sentry React Native SDK version is at least 5.36.0 or 6.3.0._

Comment on lines +13 to +27
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
To disable the default masking behavior (not to be used on applications with sensitive data):
```javascript
Sentry.mobileReplayIntegration({
maskAllText: false,
maskAllImages: false,
maskAllVectors: false,
}),
```
_Make sure your Sentry React Native SDK version is at least 5.36.0 or 6.3.0._
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.
If your app doesn't contain any sensitive date, you can disable the default masking behavior with:
```javascript
Sentry.mobileReplayIntegration({
maskAllText: false,
maskAllImages: false,
maskAllVectors: false,
}),
_Make sure your Sentry React Native SDK version is 5.36.0, 6.3.0 and up_

## Mask and Unmask Components
Comment on lines +26 to +28
Copy link
Collaborator

@lucas-zimerman lucas-zimerman Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I: Masking all items doesn't require the mentioned versions, but masking specific items surely do, so I suggest moving this part inside of Mask and Unmask Components

Suggested change
_Make sure your Sentry React Native SDK version is at least 5.36.0 or 6.3.0._
## Mask and Unmask Components
## Mask and Unmask Components
<Note>
Mask and Unmask components requires a Sentry React Native SDK version 5.36.0, 6.3.0 and up.
</Note>


You can choose which views you want to mask or unmask by using the `Mask` or `Unmask` components.

```jsx
import * as Sentry from '@sentry/react-native';

const Example = () => {
return (
<View>
<Sentry.Unmask>
<Text>This will be unmasked</Text>
</Sentry.Unmask>
<Sentry.Mask>
<Text>This will be masked</Text>
</Sentry.Mask>
</View>
);
}
```

## General Masking Rules

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.
Comment on lines +49 to +51
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## General Masking Rules
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.
## General Masking Rules
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.


```jsx
<Sentry.Unmask>
<Text>
This will be unmasked
<Text>
This will be masked
</Text>
</Text>
<Text>
This will be unmasked
</Text>
</Sentry.Unmask>
```

When components are wrapped by `Mask`, **all children will be masked**.

```jsx
<Sentry.Mask>
<Text>
This will be masked
<Text>
This will be masked
</Text>
</Text>
<Text>
This will be masked
</Text>
</Sentry.Mask>
```

### Masking Priority

If a view is marked as masked, it will always be masked, even if it's a child of an unmasked view.

```jsx
<Sentry.Mask>
<Text>This will be masked</Text>
<Sentry.Unmask>
<Text>This will be masked</Text>
</Sentry.Unmask>
</Sentry.Mask>
```

The `Mask` component can't be unmasked.

```jsx
<Sentry.Unmask>
<Sentry.Mask>
<Text>This will be masked</Text>
</Sentry.Mask>
</Sentry.Unmask>
```

## Troubleshooting

The `Mask` and `Unmask` components are native components on iOS and Android and are compatible with both the New Architecture and the Legacy Architecture.

The masking components behave as standard React Native `View` components.

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.
Comment on lines +106 to +112
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Troubleshooting
The `Mask` and `Unmask` components are native components on iOS and Android and are compatible with both the New Architecture and the Legacy Architecture.
The masking components behave as standard React Native `View` components.
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.
## Troubleshooting
The `Mask` and `Unmask` components are native on iOS and Android and are compatible with both the New and the Legacy Architecture.
The masking components behave as standard React Native `View` components.
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 and flattened. Read more about [flattening views](https://reactnative.dev/architecture/view-flattening) in the React Native documentation.

Loading