From aef1088ddb615abff6cd2be41401e24819ceee0c Mon Sep 17 00:00:00 2001 From: Krystof Woldrich Date: Tue, 12 Nov 2024 17:52:14 +0100 Subject: [PATCH 1/4] Add RN Replay Privacy page --- .../react-native/session-replay/index.mdx | 3 +- .../session-replay/privacy/index.mdx | 112 ++++++++++++++++++ 2 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 docs/platforms/react-native/session-replay/privacy/index.mdx diff --git a/docs/platforms/react-native/session-replay/index.mdx b/docs/platforms/react-native/session-replay/index.mdx index 6d88fd78d7b37..6979ce897d89e 100644 --- a/docs/platforms/react-native/session-replay/index.mdx +++ b/docs/platforms/react-native/session-replay/index.mdx @@ -75,7 +75,8 @@ Sampling begins as soon as a session starts. + +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. + + + +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._ + +## Mask and Unmask Components + +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 ( + + + This will be unmasked + + + This will be masked + + + ); +} +``` + +## 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. + +```jsx + + + This will be unmasked + + This will be masked + + + + This will be unmasked + + +``` + +When components are wrapped by `Mask`, **all children will be masked**. + +```jsx + + + This will be masked + + This will be masked + + + + This will be masked + + +``` + +### 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 + + This will be masked + + This will be masked + + +``` + +The `Mask` component can't be unmasked. + +```jsx + + + This will be masked + + +``` + +## 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. From 2790d01ad1ba3fa05cf14f2ecdf4b1c3ce08ffba Mon Sep 17 00:00:00 2001 From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Date: Tue, 26 Nov 2024 14:18:02 +0100 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Bruno Garcia Co-authored-by: Liza Mock --- .../react-native/session-replay/index.mdx | 4 ++-- .../session-replay/privacy/index.mdx | 19 ++++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/platforms/react-native/session-replay/index.mdx b/docs/platforms/react-native/session-replay/index.mdx index 6979ce897d89e..2a02cd6c72f3e 100644 --- a/docs/platforms/react-native/session-replay/index.mdx +++ b/docs/platforms/react-native/session-replay/index.mdx @@ -75,8 +75,8 @@ Sampling begins as soon as a session starts. -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. +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. -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. +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. -To disable the default masking behavior (not to be used on applications with sensitive data): +If your app doesn't contain any sensitive date, you can disable the default masking behavior with: ```javascript Sentry.mobileReplayIntegration({ @@ -21,9 +21,10 @@ Sentry.mobileReplayIntegration({ maskAllImages: false, maskAllVectors: false, }), -``` -_Make sure your Sentry React Native SDK version is at least 5.36.0 or 6.3.0._ +_Make sure your Sentry React Native SDK version is 5.36.0, 6.3.0 and up_ + + ## Mask and Unmask Components @@ -48,7 +49,7 @@ const Example = () => { ## 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. +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 @@ -105,8 +106,8 @@ The `Mask` component can't be unmasked. ## 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 `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 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. +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. From 97b4a4e5af489f814189f9dc032bed1552c9ace1 Mon Sep 17 00:00:00 2001 From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Date: Tue, 26 Nov 2024 14:20:10 +0100 Subject: [PATCH 3/4] Update index.mdx --- .../platforms/react-native/session-replay/privacy/index.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/platforms/react-native/session-replay/privacy/index.mdx b/docs/platforms/react-native/session-replay/privacy/index.mdx index 86e39061787c1..94589825fa2e5 100644 --- a/docs/platforms/react-native/session-replay/privacy/index.mdx +++ b/docs/platforms/react-native/session-replay/privacy/index.mdx @@ -24,8 +24,6 @@ Sentry.mobileReplayIntegration({ _Make sure your Sentry React Native SDK version is 5.36.0, 6.3.0 and up_ - - ## Mask and Unmask Components You can choose which views you want to mask or unmask by using the `Mask` or `Unmask` components. @@ -47,6 +45,8 @@ const Example = () => { } ``` +_Make sure your Sentry React Native SDK version is 6.4.0-beta.1 and up to use the masking components_ + ## 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. @@ -110,4 +110,4 @@ The `Mask` and `Unmask` components are native on iOS and Android and are compati 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. +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. From e22735297cacbc5e6f23e0d98f92325a03cbdf14 Mon Sep 17 00:00:00 2001 From: Krystof Woldrich <31292499+krystofwoldrich@users.noreply.github.com> Date: Tue, 26 Nov 2024 14:59:11 +0100 Subject: [PATCH 4/4] Update index.mdx --- docs/platforms/react-native/session-replay/privacy/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/platforms/react-native/session-replay/privacy/index.mdx b/docs/platforms/react-native/session-replay/privacy/index.mdx index 94589825fa2e5..429819b8c1beb 100644 --- a/docs/platforms/react-native/session-replay/privacy/index.mdx +++ b/docs/platforms/react-native/session-replay/privacy/index.mdx @@ -21,6 +21,7 @@ Sentry.mobileReplayIntegration({ maskAllImages: false, maskAllVectors: false, }), +``` _Make sure your Sentry React Native SDK version is 5.36.0, 6.3.0 and up_