feat(sdk): Custom touch tracking property instead of accessibilityLabel (#2712)

Co-authored-by: Jens Kuhr Jørgensen <jenjrg@danskebank.dk>

Author: jenskuhrjorgensen

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Breaking changes
 
 - Message event current stack trace moved from exception to threads ([#2694](https://github.com/getsentry/sentry-react-native/pull/2694))
+- `touchEventBoundaryProps.labelName` property instead of default `accessibilityLabel` fallback ([#2712](https://github.com/getsentry/sentry-react-native/pull/2712))
 
 ### Fixes
 
@@ -1088,10 +1089,10 @@ This release is a breaking change an code changes are necessary.
 New way to import and init the SDK:
 
 ```js
-import * as Sentry from "@sentry/react-native";
+import * as Sentry from '@sentry/react-native';
 
 Sentry.init({
-  dsn: "DSN",
+  dsn: 'DSN',
 });
 ```
 
@@ -1326,7 +1327,7 @@ We decided to deactivate stack trace merging by default on iOS since it seems to
 To activate it set:
 
 ```js
-Sentry.config("___DSN___", {
+Sentry.config('___DSN___', {
   deactivateStacktraceMerging: false,
 });
 ```

sample/src/App.tsx

@@ -103,4 +103,8 @@ const App = () => {
 };
 
 // Wrap your app to get more features out of the box such as auto performance monitoring.
-export default Sentry.wrap(App);
+export default Sentry.wrap(App, {
+  touchEventBoundaryProps: {
+    labelName: 'custom-sentry-label-name',
+  },
+});

sample/src/screens/HomeScreen.tsx

@@ -172,7 +172,7 @@ const HomeScreen = (props: Props) => {
               onPress={() => {
                 Sentry.captureException(new Error('Test Error'));
               }}
-              accessibilityLabel="captureException">
+              custom-sentry-label-name="captureException via custom Sentry label">
               <Text style={styles.buttonText}>Capture Exception</Text>
             </TouchableOpacity>
             <View style={styles.spacer} />

src/js/touchevents.tsx

@@ -31,6 +31,10 @@ export type TouchEventBoundaryProps = {
    * React Node wrapped by TouchEventBoundary.
    */
   children?: React.ReactNode;
+  /**
+   * Label Name used to identify the touched element.
+   */
+  labelName?: string;
 };
 
 const touchEventStyles = StyleSheet.create({
@@ -96,8 +100,8 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
       message: activeLabel
         ? `Touch event within element: ${activeLabel}`
         : 'Touch event within component tree',
-      type: this.props.breadcrumbType
-    }
+      type: this.props.breadcrumbType,
+    };
     addBreadcrumb(crumb);
 
     logger.log(`[TouchEvents] ${crumb.message}`);
@@ -159,20 +163,26 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
             ? `${props[PROP_KEY]}`
             : undefined;
 
+        // For some reason type narrowing doesn't work as expected with indexing when checking it all in one go in
+        // the "check-label" if sentence, so we have to assign it to a variable here first
+        let labelValue;
+        if (typeof this.props.labelName === 'string')
+          labelValue = props?.[this.props.labelName];
+
         // Check the label first
         if (label && !this._isNameIgnored(label)) {
           if (!activeLabel) {
             activeLabel = label;
           }
           componentTreeNames.push(label);
         } else if (
-          typeof props?.accessibilityLabel === 'string' &&
-          !this._isNameIgnored(props.accessibilityLabel)
+          typeof labelValue === 'string' &&
+          !this._isNameIgnored(labelValue)
         ) {
           if (!activeLabel) {
-            activeLabel = props.accessibilityLabel;
+            activeLabel = labelValue;
           }
-          componentTreeNames.push(props.accessibilityLabel);
+          componentTreeNames.push(labelValue);
         } else if (currentInst.elementType) {
           const { elementType } = currentInst;
 

test/touchevents.test.tsx

@@ -46,9 +46,12 @@ describe('TouchEventBoundary._onTouchStart', () => {
     expect(addBreadcrumb).not.toBeCalled();
   });
 
-  it('label is preferred over accessibilityLabel and displayName', () => {
+  it('sentry-label is preferred over labelName and displayName', () => {
     const { defaultProps } = TouchEventBoundary;
-    const boundary = new TouchEventBoundary(defaultProps);
+    const boundary = new TouchEventBoundary({
+      ...defaultProps,
+      labelName: 'custom-sentry-label-name',
+    });
 
     const event = {
       _targetInst: {
@@ -66,7 +69,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
             return: {
               memoizedProps: {
                 'sentry-label': 'LABEL!',
-                accessibilityLabel: 'access!',
+                'custom-sentry-label-name': 'access!',
               },
             },
           },
@@ -92,6 +95,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
     const { defaultProps } = TouchEventBoundary;
     const boundary = new TouchEventBoundary({
       ...defaultProps,
+      labelName: 'custom-sentry-label-name',
       ignoreNames: ['View', 'Ignore', /^Connect\(/, new RegExp('^Happy\\(')],
     });
 
@@ -111,7 +115,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
             return: {
               memoizedProps: {
                 'sentry-label': 'Ignore',
-                accessibilityLabel: 'Ignore',
+                'custom-sentry-label-name': 'Ignore',
               },
               elementType: {
                 displayName: 'Styled(View2)',
@@ -151,6 +155,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
     const boundary = new TouchEventBoundary({
       ...defaultProps,
       maxComponentTreeSize: 2,
+      labelName: 'custom-sentry-label-name',
     });
 
     const event = {
@@ -164,7 +169,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
           },
           return: {
             memoizedProps: {
-              accessibilityLabel: 'Connect(View)',
+              'custom-sentry-label-name': 'Connect(View)',
             },
             return: {
               elementType: {