feat: Touch events now track components with sentry-label (#2068)

Support tracking touch events on components with the prop `sentry-label`. 

Note that this does not throw a typescript error as ["it is not a valid JS Identifier"](https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking)

It will fall back to other properties, with the hierarchy `sentry-label` > `accessibilityLabel` > `displayName`.

Also, removed the tracking of `name` on components without a displayName, found that doing so just caused components to be logged twice.

Author: jennmueng

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- feat: Touch events now track components with `sentry-label` prop, falls back to `accessibilityLabel` and then finally `displayName`. #2068
 - fix: Respect sentryOption.debug setting instead of #DEBUG build flag for outputting logs #2039
 - fix: Passing correct mutableOptions to iOS SDK (#2037)
 - Bump: Bump @sentry/javascript dependencies to 6.17.9 #2082

sample/src/screens/HomeScreen.tsx

@@ -153,21 +153,24 @@ const HomeScreen = (props: Props) => {
             <TouchableOpacity
               onPress={() => {
                 Sentry.captureMessage('Test Message');
-              }}>
+              }}
+              sentry-label="captureMessage">
               <Text style={styles.buttonText}>Capture Message</Text>
             </TouchableOpacity>
             <View style={styles.spacer} />
             <TouchableOpacity
               onPress={() => {
                 Sentry.captureException(new Error('Test Error'));
-              }}>
+              }}
+              accessibilityLabel="captureException">
               <Text style={styles.buttonText}>Capture Exception</Text>
             </TouchableOpacity>
             <View style={styles.spacer} />
             <TouchableOpacity
               onPress={() => {
                 throw new Error('Thrown Error');
-              }}>
+              }}
+              sentry-label="throwError">
               <Text style={styles.buttonText}>Uncaught Thrown Error</Text>
             </TouchableOpacity>
             <View style={styles.spacer} />

src/js/touchevents.tsx

@@ -1,5 +1,6 @@
 import { addBreadcrumb } from "@sentry/core";
 import { Severity } from "@sentry/types";
+import { logger } from "@sentry/utils";
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
 
@@ -38,11 +39,14 @@ const DEFAULT_BREADCRUMB_CATEGORY = "touch";
 const DEFAULT_BREADCRUMB_TYPE = "user";
 const DEFAULT_MAX_COMPONENT_TREE_SIZE = 20;
 
+const PROP_KEY = "sentry-label";
+
 interface ElementInstance {
   elementType?: {
     displayName?: string;
     name?: string;
   };
+  memoizedProps?: Record<string, unknown>;
   return?: ElementInstance;
 }
 
@@ -66,32 +70,39 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
       <View
         style={touchEventStyles.wrapperView}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onTouchStart={this._onTouchStart as any}
+        onTouchStart={this._onTouchStart.bind(this) as any}
       >
         {this.props.children}
       </View>
     );
   }
 
   /**
-   *
+   * Logs the touch event given the component tree names and a label.
    */
   private _logTouchEvent(
     componentTreeNames: string[],
-    displayName: string | null
+    activeLabel?: string
   ): void {
-    addBreadcrumb({
+    const crumb = {
       category: this.props.breadcrumbCategory,
       data: { componentTree: componentTreeNames },
       level: Severity.Info,
-      message: displayName
-        ? `Touch event within element: ${displayName}`
+      message: activeLabel
+        ? `Touch event within element: ${activeLabel}`
         : `Touch event within component tree`,
       type: this.props.breadcrumbType,
-    });
+    };
+
+    addBreadcrumb(crumb);
+
+    logger.log(`[TouchEvents] ${crumb.message}`);
   }
 
-  private _isNameIgnored = (name: string): boolean => {
+  /**
+   * Checks if the name is supposed to be ignored.
+   */
+  private _isNameIgnored(name: string): boolean {
     let ignoreNames = this.props.ignoreNames || [];
     // eslint-disable-next-line deprecation/deprecation
     if (this.props.ignoredDisplayNames) {
@@ -105,17 +116,23 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
         (typeof ignoreName === "string" && name === ignoreName) ||
         (ignoreName instanceof RegExp && name.match(ignoreName))
     );
-  };
+  }
 
   // Originally was going to clean the names of any HOCs as well but decided that it might hinder debugging effectively. Will leave here in case
   // private readonly _cleanName = (name: string): string =>
   //   name.replace(/.*\(/g, "").replace(/\)/g, "");
 
-  private _onTouchStart = (e: { _targetInst?: ElementInstance }): void => {
+  /**
+   * Traverses through the component tree when a touch happens and logs it.
+   * @param e
+   */
+  // eslint-disable-next-line complexity
+  private _onTouchStart(e: { _targetInst?: ElementInstance }): void {
     if (e._targetInst) {
       let currentInst: ElementInstance | undefined = e._targetInst;
 
-      let activeDisplayName = null;
+      let activeLabel: string | undefined;
+      let activeDisplayName: string | undefined;
       const componentTreeNames: string[] = [];
 
       while (
@@ -124,40 +141,59 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
         this.props.maxComponentTreeSize &&
         componentTreeNames.length < this.props.maxComponentTreeSize
       ) {
-        if (currentInst.elementType) {
-          if (
-            // If the loop gets to the boundary itself, break.
-            currentInst.elementType.displayName ===
-            TouchEventBoundary.displayName
-          ) {
-            break;
+        if (
+          // If the loop gets to the boundary itself, break.
+          currentInst.elementType?.displayName ===
+          TouchEventBoundary.displayName
+        ) {
+          break;
+        }
+
+        const props = currentInst.memoizedProps;
+        const label =
+          typeof props?.[PROP_KEY] !== "undefined"
+            ? `${props[PROP_KEY]}`
+            : undefined;
+
+        // 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)
+        ) {
+          if (!activeLabel) {
+            activeLabel = props.accessibilityLabel;
+          }
+          componentTreeNames.push(props.accessibilityLabel);
+        } else if (currentInst.elementType) {
+          const { elementType } = currentInst;
 
           if (
-            typeof currentInst.elementType.displayName === "string" &&
-            !this._isNameIgnored(currentInst.elementType.displayName)
+            elementType.displayName &&
+            !this._isNameIgnored(elementType.displayName)
           ) {
-            const { displayName } = currentInst.elementType;
-            if (activeDisplayName === null) {
-              activeDisplayName = displayName;
+            // Check display name
+            if (!activeDisplayName) {
+              activeDisplayName = elementType.displayName;
             }
-            componentTreeNames.push(displayName);
-          } else if (
-            typeof currentInst.elementType.name === "string" &&
-            !this._isNameIgnored(currentInst.elementType.name)
-          ) {
-            componentTreeNames.push(currentInst.elementType.name);
+            componentTreeNames.push(elementType.displayName);
           }
         }
 
         currentInst = currentInst.return;
       }
 
-      if (componentTreeNames.length > 0 || activeDisplayName) {
-        this._logTouchEvent(componentTreeNames, activeDisplayName);
+      const finalLabel = activeLabel ?? activeDisplayName;
+
+      if (componentTreeNames.length > 0 || finalLabel) {
+        this._logTouchEvent(componentTreeNames, finalLabel);
       }
     }
-  };
+  }
 }
 
 /**

test/touchevents.test.tsx

@@ -10,7 +10,7 @@ afterEach(() => {
 });
 
 describe("TouchEventBoundary._onTouchStart", () => {
-  it("tree without displayName", () => {
+  it("tree without displayName or label is not logged", () => {
     const { defaultProps } = TouchEventBoundary;
     const boundary = new TouchEventBoundary(defaultProps);
 
@@ -40,25 +40,17 @@ describe("TouchEventBoundary._onTouchStart", () => {
     // @ts-ignore Calling private member
     boundary._onTouchStart(event);
 
-    expect(addBreadcrumb).toBeCalledWith({
-      category: defaultProps.breadcrumbCategory,
-      data: {
-        componentTree: ["View", "Text", "CoolComponent", "Screen"],
-      },
-      level: Severity.Info,
-      message: "Touch event within component tree",
-      type: defaultProps.breadcrumbType,
-    });
+    expect(addBreadcrumb).not.toBeCalled();
   });
 
-  it("displayName is displayed", () => {
+  it("label is preferred over accessibilityLabel and displayName", () => {
     const { defaultProps } = TouchEventBoundary;
     const boundary = new TouchEventBoundary(defaultProps);
 
     const event = {
       _targetInst: {
         elementType: {
-          name: "View",
+          displayName: "View",
         },
         return: {
           elementType: {
@@ -68,6 +60,12 @@ describe("TouchEventBoundary._onTouchStart", () => {
             elementType: {
               displayName: "Connect(View)",
             },
+            return: {
+              memoizedProps: {
+                "sentry-label": "LABEL!",
+                accessibilityLabel: "access!",
+              },
+            },
           },
         },
       },
@@ -79,10 +77,10 @@ describe("TouchEventBoundary._onTouchStart", () => {
     expect(addBreadcrumb).toBeCalledWith({
       category: defaultProps.breadcrumbCategory,
       data: {
-        componentTree: ["View", "Text", "Connect(View)"],
+        componentTree: ["View", "Connect(View)", "LABEL!"],
       },
       level: Severity.Info,
-      message: "Touch event within element: Connect(View)",
+      message: "Touch event within element: LABEL!",
       type: defaultProps.breadcrumbType,
     });
   });
@@ -91,7 +89,7 @@ describe("TouchEventBoundary._onTouchStart", () => {
     const { defaultProps } = TouchEventBoundary;
     const boundary = new TouchEventBoundary({
       ...defaultProps,
-      ignoreNames: ["View", /^Connect\(/, new RegExp("^Happy\\(")],
+      ignoreNames: ["View", "Ignore", /^Connect\(/, new RegExp("^Happy\\(")],
     });
 
     const event = {
@@ -108,12 +106,21 @@ describe("TouchEventBoundary._onTouchStart", () => {
               displayName: "Connect(View)",
             },
             return: {
+              memoizedProps: {
+                "sentry-label": "Ignore",
+                accessibilityLabel: "Ignore",
+              },
               elementType: {
-                displayName: "Styled(View)",
+                displayName: "Styled(View2)",
               },
               return: {
                 elementType: {
-                  displayName: "Happy(View)",
+                  displayName: "Styled(View)",
+                },
+                return: {
+                  elementType: {
+                    displayName: "Happy(View)",
+                  },
                 },
               },
             },
@@ -128,10 +135,10 @@ describe("TouchEventBoundary._onTouchStart", () => {
     expect(addBreadcrumb).toBeCalledWith({
       category: defaultProps.breadcrumbCategory,
       data: {
-        componentTree: ["Text", "Styled(View)"],
+        componentTree: ["Styled(View2)", "Styled(View)"],
       },
       level: Severity.Info,
-      message: "Touch event within element: Styled(View)",
+      message: "Touch event within element: Styled(View2)",
       type: defaultProps.breadcrumbType,
     });
   });
@@ -140,7 +147,7 @@ describe("TouchEventBoundary._onTouchStart", () => {
     const { defaultProps } = TouchEventBoundary;
     const boundary = new TouchEventBoundary({
       ...defaultProps,
-      maxComponentTreeSize: 3,
+      maxComponentTreeSize: 2,
     });
 
     const event = {
@@ -153,8 +160,8 @@ describe("TouchEventBoundary._onTouchStart", () => {
             name: "Text",
           },
           return: {
-            elementType: {
-              displayName: "Connect(View)",
+            memoizedProps: {
+              accessibilityLabel: "Connect(View)",
             },
             return: {
               elementType: {
@@ -177,7 +184,7 @@ describe("TouchEventBoundary._onTouchStart", () => {
     expect(addBreadcrumb).toBeCalledWith({
       category: defaultProps.breadcrumbCategory,
       data: {
-        componentTree: ["View", "Text", "Connect(View)"],
+        componentTree: ["Connect(View)", "Styled(View)"],
       },
       level: Severity.Info,
       message: "Touch event within element: Connect(View)",