cleanup & fix touchevent ignore behaviour

Author: vaind

src/js/touchevents.tsx

@@ -186,43 +186,30 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
       }
 
       const props = currentInst.memoizedProps;
-      const sentryLabel =
+      const labelValue =
         typeof props?.[SENTRY_LABEL_PROP_KEY] !== 'undefined'
           ? `${props[SENTRY_LABEL_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];
+        // 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
+          : (typeof this.props.labelName === 'string') ? props?.[this.props.labelName] : undefined;
 
       // Check the label first
-      if (sentryLabel && !this._isNameIgnored(sentryLabel)) {
-        if (!activeLabel) {
-          activeLabel = sentryLabel;
-        }
-        componentTreeNames.push(sentryLabel);
-      } else if (
-        typeof labelValue === 'string' &&
-        !this._isNameIgnored(labelValue)
-      ) {
-        if (!activeLabel) {
-          activeLabel = labelValue;
+      if (labelValue && typeof labelValue === 'string') {
+        if (this._pushIfNotIgnored(componentTreeNames, labelValue)) {
+          if (!activeLabel) {
+            activeLabel = labelValue;
+          }
         }
-        componentTreeNames.push(labelValue);
       } else if (currentInst.elementType) {
         const { elementType } = currentInst;
 
-        if (
-          elementType.displayName &&
-          !this._isNameIgnored(elementType.displayName)
-        ) {
-          // Check display name
-          if (!activeDisplayName) {
-            activeDisplayName = elementType.displayName;
+        // Check display name
+        if (elementType.displayName) {
+          if (this._pushIfNotIgnored(componentTreeNames, elementType.displayName)) {
+            if (!activeDisplayName) {
+              activeDisplayName = elementType.displayName;
+            }
           }
-          componentTreeNames.push(elementType.displayName);
         }
       }
 
@@ -240,6 +227,18 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
       op: UI_ACTION_TOUCH,
     });
   }
+
+  /**
+   * Pushes the name to the componentTreeNames array if it is not ignored.
+   */
+  private _pushIfNotIgnored(componentTreeNames: string[], name: string, file?: string): boolean {
+    const value = file ? `${name} (${file})` : name;
+    if (this._isNameIgnored(value)) {
+      return false;
+    }
+    componentTreeNames.push(value);
+    return true;
+  }
 }
 
 /**

test/touchevents.test.tsx

@@ -163,7 +163,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
         componentTree: ['Styled(View2)', 'Styled(View)'],
       },
       level: 'info' as SeverityLevel,
-      message: 'Touch event within element: Styled(View2)',
+      message: 'Touch event within element: Styled(View)',
       type: defaultProps.breadcrumbType,
     });
   });