Mask user interactions for mobile frontends

• Latest Dynatrace
• How-to guide
• Published Apr 27, 2026

Early Access

User interactions capture the names of UI elements, such as button labels or input field names. When these names contain or expose personal information, you can mask individual views so their UI element names are replaced with *** in captured interactions.

Mask views on Android native

Set the tag data-dt-mask on the view.

myView.tag = "data-dt-mask"

myView.setTag("data-dt-mask");

The interaction will have the view name replaced with ***.

Mask composables on Android Jetpack Compose

Apply the dtMask() modifier to the composable.

Button(
    onClick = { /* ... */ },
    modifier = Modifier.dtMask()
) {
    Text("Pay now")
}

The interaction will have the composable name replaced with ***.

Mask views on iOS native

Set the view's accessibilityIdentifier to data-dt-mask.

myView.accessibilityIdentifier = "data-dt-mask"

myView.accessibilityIdentifier = @"data-dt-mask";

The interaction will have the view name replaced with ***.

Mask views on iOS SwiftUI

Use the .dynatraceMasked() modifier or set the accessibilityIdentifier to data-dt-mask.

Button("Pay now") {
    // ...
}
.dynatraceMasked()

Button("Pay now") {
    // ...
}
.accessibilityIdentifier("data-dt-mask")

The interaction will have the view name replaced with ***.

Mask interactions on React Native

React Native supports two masking approaches: marker-based masking using the dtMask prop, and rule-based masking via configuration.

Use marker-based masking

To mask a component and all its children, add the dtMask prop to any ancestor view.

<View dtMask>
  <Pressable onPress={onPress}>
    <Text>john.doe@example.com</Text>
  </Pressable>
</View>

Any interaction resolved through a subtree with dtMask on an ancestor is masked. The interaction is still captured, but the UI element name is replaced with ***.

Use rule-based masking

To mask interactions based on testID patterns or text content length, configure masking rules in your Dynatrace configuration.

const config = {
  mask: {
    replaceWith: '***',
    testID: (id: string) => /email|phone/i.test(id),
    text: (text: string) => text.length > 20,
  },
};

With this configuration:

Both approaches replace the sensitive label with the value of replaceWith (default: ***) while preserving the interaction identity and element path.

Mask widgets on Flutter

Wrap the widget with UserInteractionWidget and set masked to true.

UserInteractionWidget(
  masked: true,
  child: TextField(
    decoration: InputDecoration(labelText: 'Password'),
  ),
)

The interaction will have the widget name replaced with ***.