Overview
-- Session Replay provides privacy controls to ensure organizations of any - scale do not expose sensitive or personal data. Data is stored on - Datadog-managed cloud instances and encrypted at rest. -
-- Default privacy options for Session Replay protect end user privacy and - prevent sensitive organizational information from being collected. -
-- By enabling Mobile Session Replay, you can automatically mask sensitive - elements from being recorded through the RUM Mobile SDK. When data is - masked, that data is not collected in its original form by Datadog's SDKs - and thus is not sent to the backend. -
-Fine-grained masking
-- Using the masking modes below, you can override the default setup on a - per-application basis. Masking is fine-grained, which means you can override - masking for text and inputs, images, and touches individually to create a - custom configuration that suits your needs. -
-Text and input masking
-
- By default, the mask_all setting is enabled for all data. With
- this setting enabled, all text and input content on screen is masked, as
- shown below.
-
Mask sensitive inputs
-
- With the mask_sensitive_inputs setting enabled, all text and
- inputs are shown except those considered sensitive (passwords, emails, and
- phone numbers).
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setTextAndInputPrivacy(TextAndInputPrivacy.MASK_SENSITIVE_INPUTS)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: .maskSensitiveInputs,
- imagePrivacyLevel: imagePrivacyLevel,
- touchPrivacyLevel: touchPrivacyLevel
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- TextAndInputPrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS,
-}
-
-SessionReplay.enable(config)
-final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.maskSensitiveInputs,
- replaySampleRate: replay,
- ),
-);
-
-Mask all inputs
-
- With the mask_all_inputs setting enabled, all inputs fields are
- masked in the replay.
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
-.setTextAndInputPrivacy(TextAndInputPrivacy.MASK_ALL_INPUTS)
-.build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: .maskAllInputs,
- imagePrivacyLevel: imagePrivacyLevel,
- touchPrivacyLevel: touchPrivacyLevel
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- TextAndInputPrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_ALL_INPUTS,
-}
-
-SessionReplay.enable(config)
-final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.maskAllInputs,
- replaySampleRate: replay,
- ),
-);
-
-Mask all
-
- With the mask_all setting enabled, all text and input fields
- are masked in the replay.
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setTextAndInputPrivacy(TextAndInputPrivacy.MASK_ALL)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: .maskAll,
- imagePrivacyLevel: imagePrivacyLevel,
- touchPrivacyLevel: touchPrivacyLevel
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- TextAndInputPrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_ALL,
-}
-
-SessionReplay.enable(config)
-final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.maskAll,
- replaySampleRate: replay,
- ),
-);
-
-Image masking
-
- By default, the mask_all setting is enabled for all images.
- With this setting enabled, all images on screen are masked.
-
- For performance reasons, large images (those exceeding 1000x1000 total - pixels) are masked in Flutter, and will display "Large Image" in - the Session Replay player. -
-Mask all images
-
- With the mask_all setting enabled, all images are replaced by
- placeholders labeled 'Image' in the replay.
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setImagePrivacy(ImagePrivacy.MASK_ALL)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: textAndInputPrivacyLevel,
- imagePrivacyLevel: .maskAll,
- touchPrivacyLevel: touchPrivacyLevel
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- ImagePrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- imagePrivacyLevel: ImagePrivacyLevel.MASK_ALL,
-}
-
-SessionReplay.enable(config)
-final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- imagePrivacyLevel: ImagePrivacyLevel.maskAll,
- replaySampleRate: replay,
- ),
-);
-
-Mask content images
-- You can manage content masking while still allowing system or bundled images - to be visible. -
-
- Use the maskNonBundledOnly setting to replace non-bundled
- images with a "Content Image" placeholder in the replay.
-
-
-
- - In UIKit, the SDK can determine whether an image is bundled and can mask - it accordingly. - -
- - In SwiftUI, this determination isn't possible. Instead, the SDK uses a - heuristic: if an image exceeds 100×100 points, it is assumed to be - non-bundled and is masked. - -
- Select the mask_large_only setting, which replaces images
- with dimensions that exceed 100x100dp with a "Content Image"
- placeholder.
-
- Note: These dimensions refer to the drawable resource, - not the view's size. -
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setImagePrivacy(ImagePrivacy.MASK_LARGE_ONLY)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-
AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: textAndInputPrivacyLevel,
- imagePrivacyLevel: .maskNonBundledOnly,
- touchPrivacyLevel: touchPrivacyLevel
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- ImagePrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- imagePrivacyLevel: ImagePrivacyLevel.MASK_NON_BUNDLED_ONLY,
-}
-
-SessionReplay.enable(config)
-
- Bundled images are those that use AssetImage as their image
- provider.
-
final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- imagePrivacyLevel: ImagePrivacyLevel.maskNonAssetsOnly,
- replaySampleRate: replay,
- ),
-);
-
-Show all images
-
- With the mask_none setting enabled, all images are shown in the
- replay.
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setImagePrivacy(ImagePrivacy.MASK_NONE)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: textAndInputPrivacyLevel,
- imagePrivacyLevel: .maskNone,
- touchPrivacyLevel: touchPrivacyLevel
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- ImagePrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- imagePrivacyLevel: ImagePrivacyLevel.MASK_NONE,
-}
-
-SessionReplay.enable(config)
-Touch masking
-
- By default, the hide setting is enabled for all touches. With
- this setting enabled, all touches on screen are hidden.
-
Hide all touches
-
- With the hide setting enabled, all touches that occur during
- the replay are hidden. This is the default setting.
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setTouchPrivacy(TouchPrivacy.HIDE)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: textAndInputPrivacyLevel,
- imagePrivacyLevel: imagePrivacyLevel,
- touchPrivacyLevel: .hide
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- TouchPrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- touchPrivacyLevel: TouchPrivacyLevel.HIDE,
-}
-
-SessionReplay.enable(config)
-final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- imagePrivacyLevel: ImagePrivacyLevel.maskNone,
- replaySampleRate: replay,
- ),
-);
-
-Show all touches
-
- With the show setting enabled, all touches that occur during
- the replay are shown.
-
application.kt
-val sessionReplayConfig = SessionReplayConfiguration.Builder([sampleRate])
- .setTouchPrivacy(TouchPrivacy.SHOW)
- .build()
-SessionReplay.enable(sessionReplayConfig)
-AppDelegate.swift
-let sessionReplayConfig = SessionReplay.Configuration(
- replaySampleRate: sampleRate,
- textAndInputPrivacyLevel: textAndInputPrivacyLevel,
- imagePrivacyLevel: imagePrivacyLevel,
- touchPrivacyLevel: .show
-)
-SessionReplay.enable(with: sessionReplayConfig)
-App.tsx
-import {
- SessionReplay,
- SessionReplayConfiguration,
- TouchPrivacyLevel,
-} from "@datadog/mobile-react-native-session-replay";
-
-const config: SessionReplayConfiguration = {
- replaySampleRate: sampleRate,
- touchPrivacyLevel: TouchPrivacyLevel.SHOW,
-}
-
-SessionReplay.enable(config)
-
- Bundled images are those that use AssetImage as their image
- provider.
-
final configuration = DatadogConfiguration(
- // ...
-)..enableSessionReplay(
- DatadogSessionReplayConfiguration(
- touchPrivacyLevel: TouchPrivacyLevel.show,
- replaySampleRate: replay,
- ),
-);
-
-Privacy overrides
-- The sections above describe the global masking levels that apply to the - entire application. However, it is also possible to override these settings - at the view level. The same privacy levels as above are available for text - and inputs, images, touches, and an additional setting to completely hide a - specific view. -
-- To ensure overrides are recognized properly, they should be applied as early - as possible in the view lifecycle. This prevents scenarios where Session - Replay might process a view before applying the overrides. -
-- Privacy overrides affect views and their descendants. This means that even - if an override is applied to a view where it might have no immediate effect - (for example, applying an image override to a text input), the override - still applies to all child views. -
-- Overrides operate using a "nearest parent" principle: if a view - has an override, it uses that setting. Otherwise, it inherits the privacy - level from the closest parent in the hierarchy with an override. If no - parent has an override, the view defaults to the application's general - masking level. -
-Text and input override
-
- To override text and input privacy in Android classic view, use
- setSessionReplayTextAndInputPrivacy on a view instance and
- pass a value from the TextAndInputPrivacy enum. Passing
- null removes the override.
-
application.kt
-// Set a text and input override on your view
-myView.setSessionReplayTextAndInputPrivacy(TextAndInputPrivacy.MASK_SENSITIVE_INPUTS)
-// Remove a text and input override from your view
-myView.setSessionReplayTextAndInputPrivacy(null)
-
- To override text and input privacy in Jetpack Compose, use
- Modifier.sessionReplayTextAndInputPrivacy on the modifier
- of a composable and pass a value from the
- TextAndInputPrivacy enum.
-
application.kt
-// Set a text and input override on your view
-Text(modifier = Modifier
- .padding(16.dp)
- .sessionReplayTextAndInputPrivacy(textAndInputPrivacy = TextAndInputPrivacy.MASK_SENSITIVE_INPUTS),
- text = "Datadog"
-)
-
- To override text and input privacy in UIKit views, use
- dd.sessionReplayOverrides.textAndInputPrivacy on a view
- instance and set a value from the
- TextAndInputPrivacyLevel enum. Setting it to
- nil removes the override.
-
AppDelegate.swift
-// Set a text and input override on your view
-myView.dd.sessionReplayOverrides.textAndInputPrivacy = .maskSensitiveInputs
-// Remove a text and input override from your view
-myView.dd.sessionReplayOverrides.textAndInputPrivacy = nil
-
- To override text and input privacy in SwiftUI, wrap your content with
- SessionReplayPrivacyView and configure the
- textAndInputPrivacy parameter. You can combine this with
- other privacy settings in the same view for better performance.
-
ContentView.swift
-struct ContentView: View {
- @State private var username = ""
- @State private var password = ""
-
- var body: some View {
- // Set a text and input override on your SwiftUI content
- SessionReplayPrivacyView(textAndInputPrivacy: .maskAllInputs) {
- VStack {
- Text("User Profile")
- TextField("Enter name", text: $username)
- SecureField("Password", text: $password)
- }
- }
- }
-}
-
- To override text and input privacy in Flutter, use the
- SessionReplayPrivacy widget to override the privacy
- settings for an entire widget tree. Setting any value to
- null keeps the privacy values unchanged from values
- provided higher up the widget tree.
-
class MyWidget: StatelessWidget {
- Widget build() {
- return SessionReplayPrivacy(
- textAndInputPrivacyLevel: TextAndInputPrivacyLevel.maskAllInputs,
- child: TextField(
- decoration: InputDecoration(
- labelText: 'Simple Text Field',
- ),
- ),
- );
- }
-}
-Image override
-
- To override image privacy in Android classic view, use
- setSessionReplayImagePrivacy on a view instance and pass a
- value from the ImagePrivacy enum. Passing
- null removes the override.
-
application.kt
-// Set an image override on your view
-myView.setSessionReplayImagePrivacy(ImagePrivacy.MASK_ALL)
-// Remove an image override from your view
-myView.setSessionReplayImagePrivacy(null)
-
- To override image privacy in Jetpack Compose, use
- Modifier.sessionReplayImagePrivacy on the modifier of a
- composable and pass a value from the ImagePrivacy enum.
-
application.kt
-// Set a image privacy override on your image
-Image(modifier = Modifier
- .padding(16.dp)
- .sessionReplayImagePrivacy(imagePrivacy = ImagePrivacy.MASK_ALL),
- painter = painterResource(id = R.drawable.ic_datadog),
- contentDescription = null
-)
-
- To override image privacy in UIKit views, use
- dd.sessionReplayOverrides.imagePrivacy on a view instance
- and set a value from the ImagePrivacyLevel enum. Setting it
- to nil removes the override.
-
AppDelegate.swift
-// Set an image override on your view
-myView.dd.sessionReplayOverrides.imagePrivacy = .maskAll
-// Remove an image override from your view
-myView.dd.sessionReplayOverrides.imagePrivacy = nil
-
- To override image privacy in SwiftUI, wrap your content with
- SessionReplayPrivacyView and configure the
- imagePrivacy parameter.
-
ContentView.swift
-struct ProfileView: View {
- let profileImageURL = URL(string: "https://example.com/profile.jpg")
-
- var body: some View {
- // Set an image privacy override on your SwiftUI content
- SessionReplayPrivacyView(imagePrivacy: .maskAll) {
- VStack {
- Image("userAvatar")
- .resizable()
- .frame(width: 60, height: 60)
- .clipShape(Circle())
-
- AsyncImage(url: profileImageURL) { image in
- image.resizable()
- } placeholder: {
- ProgressView()
- }
- .frame(width: 100, height: 100)
- }
- }
- }
-}
-
- To override image privacy in Flutter, use the
- SessionReplayPrivacy widget to override the privacy
- settings for an entire widget tree. Setting any value to
- null keeps the privacy values unchanged from values
- provided higher up the widget tree.
-
class MyWidget: StatelessWidget {
- Widget build() {
- return SessionReplayPrivacy(
- imagePrivacyLevel: ImagePrivacyLevel.maskAll,
- child: Image.asset('assets/my_image.png'),
- );
- }
-}
-Touch override
-
- To override touch privacy in Android classic view, use
- setSessionReplayTouchPrivacy on a view instance and pass a
- value from the TouchPrivacy enum. Passing
- null removes the override.
-
application.kt
-// Set a touch override on your view
-view.setSessionReplayTouchPrivacy(TouchPrivacy.HIDE)
-// Remove a touch override from your view
-view.setSessionReplayTouchPrivacy(null)
-
- To override touch privacy in Jetpack Compose, use
- Modifier.sessionReplayTouchPrivacy on the modifier of a
- composable and pass a value from the TouchPrivacy enum.
-
application.kt
-// Set a touch privacy override on your view
-Column(modifier = Modifier
- .padding(16.dp)
- .sessionReplayTouchPrivacy(touchPrivacy = TouchPrivacy.HIDE)){
- // Content
-}
-
- To override touch privacy in UIKit views, use
- dd.sessionReplayOverrides.touchPrivacy on a view instance
- and set a value from the TouchPrivacyLevel enum. Setting it
- to nil removes the override.
-
AppDelegate.swift
-// Set a touch override on your view
-myView.dd.sessionReplayOverrides.touchPrivacy = .hide
-// Remove a touch override from your view
-myView.dd.sessionReplayOverrides.touchPrivacy = nil
-
- To override touch privacy in SwiftUI, wrap your content with
- SessionReplayPrivacyView and configure the
- touchPrivacy parameter.
-
ContentView.swift
-struct SettingsView: View {
- @State private var sliderValue = 0.5
-
- var body: some View {
- // Set a touch privacy override on your SwiftUI content
- SessionReplayPrivacyView(touchPrivacy: .hide) {
- VStack(spacing: 20) {
- Button("Some Action") {
- // Handle action
- }
- .padding()
- .background(Color.blue)
- .foregroundColor(.white)
- .cornerRadius(8)
-
- Slider(value: $sliderValue, in: 0...1) {
- Text("Some Value")
- }
- }
- .padding()
- }
- }
-}
-
- To override touch privacy in Flutter, use the
- SessionReplayPrivacy widget to override the privacy
- settings for an entire widget tree. Setting any value to
- null keeps the privacy values unchanged from values
- provided higher up the widget tree.
-
- Enabling touch privacy affects the entire widget tree, and cannot be - toggled back to "show" in children. -
-class MyWidget: StatelessWidget {
- Widget build() {
- return SessionReplayPrivacy(
- touchPrivacyLevel: TouchPrivacyLevel.hide,
- child: PinPadWidget(),
- );
- }
-}
-Hidden elements override
-
- For sensitive elements that need to be completely hidden, use the
- hidden setting.
-
- When an element is hidden, it is replaced by a placeholder
- labeled as "Hidden" in the replay, and its subviews are not
- recorded.
-
- Note: Marking a view as hidden does not
- prevent touch interactions from being recorded on that element. To hide
- touch interactions as well, use the
- touch override in addition to marking the
- element as hidden.
-
- Use setSessionReplayHidden(hide = true) to hide the
- element. Setting hide to false removes the
- override.
-
application.kt
-// Mark a view as hidden
-myView.setSessionReplayHidden(hide = true)
-// Remove the override from the view
-myView.setSessionReplayHidden(hide = false)
-
- Use Modifier.sessionReplayHide to hide the element in
- Jetpack Compose.
-
application.kt
-// Mark a Column as hidden
-Column(modifier = Modifier
- .padding(16.dp)
- .sessionReplayHide(hide = true)){
- // Content
-}
-
- In UIKit views, use dd.sessionReplayOverrides.hide to hide
- the element:
-
AppDelegate.swift
-// Mark a view as hidden
-myView.dd.sessionReplayOverrides.hide = true
-// Remove the override from the view
-myView.dd.sessionReplayOverrides.hide = false
-
- In SwiftUI, wrap your content with
- SessionReplayPrivacyView and set the
- hide parameter to true:
-
ContentView.swift
-struct PaymentView: View {
- @State private var cardNumber = ""
- @State private var cvv = ""
-
- var body: some View {
- // Mark SwiftUI content as hidden
- SessionReplayPrivacyView(hide: true) {
- VStack(spacing: 16) {
- Text("Payment Information")
- .font(.headline)
-
- TextField("Card Number", text: $cardNumber)
- .textFieldStyle(RoundedBorderTextFieldStyle())
-
- SecureField("CVV", text: $cvv)
- .textFieldStyle(RoundedBorderTextFieldStyle())
-
- Text("Card ending in 1234")
- .foregroundColor(.secondary)
- }
- .padding()
- }
- }
-}
-
- Note: Setting the hidden override to
- nil or false has the same effect—it disables
- the override.
-
- Combining privacy settings in SwiftUI -
-
- Combine multiple privacy settings in one
- SessionReplayPrivacyView for different configurations.
- Datadog recommends
- combining options in a single view rather than nesting multiple
- instances
- to avoid adding unnecessary view layers.
-
ContentView.swift
-struct UserProfileView: View {
- @State private var userBio = ""
- @State private var cardNumber = ""
-
- var body: some View {
- VStack(spacing: 30) {
- // Preferred: Combine multiple privacy settings in one view
- SessionReplayPrivacyView(
- textAndInputPrivacy: .maskSensitiveInputs,
- imagePrivacy: .maskNonBundledOnly,
- touchPrivacy: .show
- ) {
- VStack(spacing: 20) {
- // User profile section
- HStack {
- AsyncImage(url: URL(string: "https://example.com/profile.jpg")) { image in
- image.resizable()
- } placeholder: {
- Circle().fill(Color.gray.opacity(0.3))
- }
- .frame(width: 60, height: 60)
- .clipShape(Circle())
-
- VStack(alignment: .leading) {
- Text("John Doe")
- .font(.headline)
- TextField("Enter bio", text: $userBio)
- .textFieldStyle(RoundedBorderTextFieldStyle())
- }
- }
-
- Button("Save Profile") {
- // Save action
- print("Profile saved")
- }
- .padding()
- .background(Color.blue)
- .foregroundColor(.white)
- .cornerRadius(8)
- }
- .padding()
- }
-
- // For completely different privacy requirements, use separate `SessionReplayPrivacyView` instances
- SessionReplayPrivacyView(hide: true) {
- VStack(spacing: 16) {
- Text("Credit Card Information")
- .font(.headline)
- TextField("Card Number", text: $cardNumber)
- .textFieldStyle(RoundedBorderTextFieldStyle())
- }
- .padding()
- .background(Color.gray.opacity(0.1))
- .cornerRadius(8)
- }
- }
- .padding()
- }
-}
-
- Note: Each
- SessionReplayPrivacyView introduces an additional native
- view layer. For optimal performance, prefer combining privacy settings
- instead of nesting multiple privacy views when possible.
-
- To hide a widget tree in Flutter, use the
- SessionReplayPrivacy widget to override the privacy
- settings for an entire widget tree.
-
- Hiding a widget tree affects the entire widget tree, and cannot be
- toggled back to false in children, as Session Replay stops
- processing widget trees that are marked with hide.
-
class MyWidget: StatelessWidget {
- Widget build() {
- return SessionReplayPrivacy(
- hide: true,
- child: PinPadWidget(),
- );
- }
-}
-
- Privacy overrides are fully supported in React Native starting from
- version 2.8.0 of the Datadog
- React Native SDK. Although the underlying functionality is shared with native Android and
- iOS platforms, the integration in React Native is designed to align with
- common React patterns.
-
Behavior consistency
-- React Native's implementation is built on the same foundation as the - native Android and iOS SDKs. As a result, you can rely on the privacy - features behaving the same way across all three platforms. -
-Usage with SessionReplayView
-
- The SDK provides a set of React components under the
- SessionReplayView namespace, which are used to configure
- privacy settings within your React Native application.
-
To use them, import SessionReplayView as follows:
App.tsx
-import { SessionReplayView } from "@datadog/mobile-react-native-session-replay";
-This import provides access to four privacy-focused components.
-- Each of these components behaves like a regular React Native View, meaning - they can be used anywhere you would typically use a View, with the - addition of privacy-related behavior. -
-| Component | -Description | -Properties | -
|---|---|---|
SessionReplayView.Privacy |
- - Adds support for customizing text, image, and touch privacy settings - for its children. - | -
-
|
-
SessionReplayView.MaskAll |
-
- Applies the most restrictive privacy settings (MaskAll
- or platform equivalent) to all children.
- |
-
-
|
-
SessionReplayView.MaskNone |
-
- Applies the least restrictive settings (MaskNone or
- platform equivalent). All child components are visible.
- |
- (No additional properties) | -
SessionReplayView.Hide |
- Completely hides all child components from session replay. | -(No additional properties) | -
Integration approaches
-There are two ways to apply privacy overrides in React Native:
--
-
-
- Wrap specific components with a privacy-focused
-
SessionReplayViewto target only certain elements, or -
- -
- Replace an entire
<View>with a -SessionReplayViewto apply privacy settings to a whole - section of your UI. -
-
- This flexibility lets you control which parts of your app are masked or - visible in session replays. -
-
- Use SessionReplayView components to wrap specific parts
- of your UI where you want to override privacy settings.
-
For example, going from:
-App.tsx
-const App = () => {
- return (
- <View>
- {/* content */}
- <TextInput placeholder="First Name" value="Data" />
- <TextInput placeholder="Last Name" value="Dog" />
- {/* content */}
- </View>
- );
-}
-To:
-App.tsx
-const App = () => {
- return (
- <View>
- {/* content */}
- <SessionReplayView.MaskAll showTouch={true}>
- <TextInput placeholder="First Name" value="Data" />
- <TextInput placeholder="Last Name" value="Dog" />
- </SessionReplayView.MaskAll>
- {/* content */}
- </View>
- );
-}
-
- Replace an existing <View> with a
- SessionReplayView component directly. This is ideal
- when a view already encapsulates the section of the UI that needs
- modified privacy behavior.
-
For example, instead of:
-App.tsx
-const App = () => {
- return (
- <View>
- {/* content */}
- </View>
- );
-}
-You can use:
-App.tsx
-const App = () => {
- return (
- <SessionReplayView.MaskNone>
- {/* content */}
- </SessionReplayView.MaskNone>
- );
-}
-Combining privacy components
-
- You can freely combine the SessionReplayView components to
- apply different privacy settings to distinct sections of your UI. This is
- especially useful when you need a mix of hidden elements, masked input
- fields, and visible content within the same screen.
-
For example:
-App.tsx
-import { ImagePrivacyLevel, SessionReplayView, TextAndInputPrivacyLevel, TouchPrivacyLevel } from "@datadog/mobile-react-native-session-replay";
-
-const App = () => {
- return (
- <SessionReplayView.Privacy
- textAndInputPrivacy={TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS}
- imagePrivacy={ImagePrivacyLevel.MASK_NONE}
- touchPrivacy={TouchPrivacyLevel.SHOW}>
- {/* content */}
- <SessionReplayView.MaskAll showTouch={true}>
- {/* content */}
- <SessionReplayView.MaskNone>
- {/* content */}
- </SessionReplayView.MaskNone>
- {/* content */}
- </SessionReplayView.MaskAll>
- {/* content */}
- <SessionReplayView.Hide>
- {/* content */}
- </SessionReplayView.Hide>
- </SessionReplayView.Privacy>
- );
-}
-Notes on WebViews
--
-
-
- Privacy overrides, aside from the
hiddenand -touchoptions, are not supported for WebViews. You can - primarily manage their privacy using the - browser SDK privacy settings. -
- -
- When a WebView is marked as
hidden, it is replaced by a - placeholder in the replay. However, the WebView itself continues to - collect and send data. To avoid this, it is recommended to use - browser SDK privacy settings - for managing WebView privacy, as they provide more targeted control. -
-
How and what data is masked
-- This section describes how the Datadog recorder handles masking based on - data type and how that data is defined. -
-Text masking strategies
-- Depending on how you've configured your privacy settings, the type of text, - and sensitivity of data, Datadog's masking rules apply different strategies - to different types of text fields. -
-| Text masking strategy | -Description | -Example | -
|---|---|---|
| No mask | -The text is revealed in the session replay | -
- "Hello world" →
- "Hello world"
- |
-
| Space-preserving mask | -- Each visible character is replaced with a lowercase "x" - | -
- "Hello world" →
- "xxxxx xxxxx"
- |
-
| Fixed-length mask | -- The entire text field is replaced with a constant of three asterisks - (***) - | -
- "Hello world" → "***"
- |
-
- With the above text strategies in mind, you have a few different options if
- you want to override the default privacy rule of mask in your
- configuration.
-
- The following chart shows how Datadog applies different text masking - strategies, using the rules you set up in your configuration, to the below - text types. -
-| Type | -Allow all | -Mask all | -Mask user input | -
|---|---|---|---|
| Sensitive text | -Fixed-length mask | -Fixed-length mask | -Fixed-length mask | -
| Input and option text | -No mask | -Fixed-length mask | -Fixed-length mask | -
| Static text | -No mask | -Space-preserving mask | -No mask | -
| Hint text | -No mask | -Fixed-length mask | -No mask | -
Text masking definitions
-- Find below a description of how Datadog's recorder treats each text type. -
-Sensitive text
-- Sensitive text includes passwords, e-mails, and phone numbers marked in a - platform-specific way, and other forms of sensitivity in text available to - each platform. -
-Sensitive text can be detected in:
--
-
- Edit Text -
- Address information -
Sensitive text can be detected in:
--
-
- Text Field -
- Text View -
- Address information -
- Credit card numbers -
- One-time codes -
Sensitive text can be detected in the following components.
-| Component | -Platform(s) | -
|---|---|
| Text Field | -iOS | -
| Text View | -iOS | -
| Edit Text | -Android | -
| Address information | -iOS, Android | -
| Credit card numbers | -iOS | -
| One-time codes | -iOS | -
TextInputType.name |
- TextInputType.phone |
- TextInputType.emailAddress |
- TextInputType.streetAddress |
- TextInputType.twitter |
- TextInputType.visiblePassword |
-
Input and option text
-- Input and option text is text entered by the user with a keyboard or other - text-input device, or a custom (non-generic) value in selection elements. -
-This includes the below.
--
-
-
- User-entered text in:
-
-
-
- Text Field -
- Text View -
- -
- User-selected options in:
-
-
-
- Value Picker -
- Segment -
- -
- Notable exclusions:
-
-
-
- - Placeholder (hint) texts in Text Field and Text View (not entered by - the user) - -
- Non-editable texts in Text View -
- Month, day, and year labels in Date Picker (generic values) -
-
-
-
-
- User-entered text in:
-
-
-
- Edit Text -
- -
- User-selected options in:
-
-
-
- Value Picker -
- Drop Down List -
- -
- Notable exclusions:
-
-
-
- - Placeholder (hint) texts in Edit Text (not entered by the user) - -
- Month, day, and year labels in Date Picker (generic values) -
-
-
-
-
- User-entered text in:
-
-
-
- Text Field (iOS) -
- Text View (iOS) -
- Edit Text (Android) -
- -
- User-selected options in:
-
-
-
- Value Picker (iOS + Android) -
- Segment (iOS) -
- Drop Down List (Android) -
- -
- Notable exclusions:
-
-
-
- - Placeholder (hint) texts in Text Field, Text View and Edit Text (not - entered by the user) - -
- Non-editable texts in Text View (iOS). -
- Month, day, and year labels in Date Picker (generic values) -
-
-
-
-
- User-entered text in EditableText, which is used in:
-
-
-
- TextField -
- CupertinoTextField -
- many custom TextField implementations -
- -
- Notable exclusions:
-
-
-
- - Placeholder (hint) texts in Text Field and Text View (not entered by - the user) - -
- Text in Text Decorations (not entered by the user) -
- Month, day, and year labels in Date Picker (generic values) -
-
Static text
-- Static text is any text that is not directly entered by the user. This - includes the below. -
-All texts in:
--
-
- Texts in non-editable Text View -
- Month, day, and year labels in the date and time picker -
- - Values updated in response to gesture interaction with input elements, - such as the current value of the Slider - -
- - Other controls, not considered as "user input elements", such - as Labels, Tab Bar, and Navigation Bar - -
-
-
- Checkbox and Radio Button titles -
- Month, day, and year labels in the date and time picker -
- - Values updated in response to gesture interaction with input elements, - such as the current value of the Slider - -
- - Other controls, not considered as "user input elements", such - as Tabs - -
-
-
- Checkbox and Radio Button titles (Android) -
- Texts in non-editable Text View (iOS) -
- Month, day and year labels in the date and time picker -
- - Values updated in response to gesture interaction with input elements, - such as the current value of the Slider - -
- - Other controls, not considered as "user input elements", such - as Labels, Tab Bar, and Navigation Bar (iOS), or Tabs (Android) - -
-
-
- Checkbox and Radio Button titles -
- Month, day and year labels in the date and time picker -
- - Values updated in response to gesture interaction with input elements, - such as the current value of the Slider - -
- - Other controls, not considered as "user input elements", such - as Text, Tab Bar, and Bottom Navigation Bar - -
Hint text
-- Hint text is static text in editable text elements or option selectors that - is displayed when no value is given. This includes: -
--
-
- Placeholders in Text Field -
- Placeholders in Text View -
-
-
- Hints in Edit Text -
- Prompts in Drop Down lists -
-
-
- Placeholders in Text Field (iOS), Text View (iOS) -
- Hints in Edit Text (Android) -
- Prompts in Drop Down lists (Android) -
-
-
- InputDecoration elements in TextView -
- Placeholder text in CupertinoTextField -
Appearance masking
-- The following chart shows how we apply different appearance masking - strategies, using the rules you set up in your configuration, to the below - text types. -
-| Type | -Allow all | -Mask all | -Mask user input | -
|---|---|---|---|
| Revealing attributes | -- | - | - |
| Other attributes | -- | - | - |
Revealing attributes
-- Revealing attributes are attributes that can reveal or suggest the value of - input elements and can be used to infer a user's input or selection. -
-This includes:
-Shapes
--
-
- Background of selected option in Segment -
- Circle surrounding the selected date in a Date Picker -
- Thumb of a Slider -
Text attributes
--
-
- The color of a label rendering the selected date in Date Picker -
- The position of the first and last option in Value Picker -
Shapes
--
-
- Selection mark in Checkbox -
- Thumb of a Slider -
Text attributes
--
-
- The position of the first and last option in Value Picker -
Shapes
-| Type | -Platform(s) | -
|---|---|
| Background of selected option in Segment | -iOS | -
| Circle surrounding the selected date in Date Picker | -iOS | -
| Selection mark in Checkbox | -Android | -
| Thumb of a Slider | -iOS, Android | -
Text attributes
-| Type | -Platform(s) | -
|---|---|
| - The color of a label rendering the selected date in Date Picker - | -iOS | -
| The position of the first and last option in Value Picker | -iOS, Android | -
Shapes
--
-
- Background of selected option in Segment -
- Circle surrounding the selected date in a Date Picker -
- Thumb of a Slider -
Text attributes
--
-
- The color of a label rendering the selected date in Date Picker -
- The position of the first and last option in Value Picker -
Touch interactions
-- The following chart shows how we apply different touch interaction - strategies, using the rules you set up in your configuration, to the below - text types. While any interaction that happens on an on-screen keyboard is - masked, interactions with other elements are not masked. -
-| Type | -Allow all | -Mask all | -Mask user input | -
|---|---|---|---|
| Other attributes | -- | - | - |
| On-screen keyboard | -- | - | - |
Image masking
-- The following chart shows how we apply different image masking strategies: -
-| Type | -Mask None | -
- Mask Large Only
-
- Mask Non Bundled Only
-
-
- Mark Large Only (Android) / Mask Non Bundled Only (iOS)
-
- |
- Mask All | -
|---|---|---|---|
| Content Image | -Shown | -Masked | -Masked | -
| System Image | -Shown | -Shown | -Masked | -
