fix: Inject component annotations into HTML elements

Author: timfish

packages/babel-plugin-component-annotate/src/constants.ts

@@ -30,7 +30,26 @@ export const KNOWN_INCOMPATIBLE_PLUGINS = [
   "@react-navigation",
 ];
 
-export const DEFAULT_IGNORED_ELEMENTS = [
+export const REACT_NATIVE_ELEMENTS = [
+  "View",
+  "Text",
+  "Image",
+  "ScrollView",
+  "TextInput",
+  "TouchableOpacity",
+  "TouchableHighlight",
+  "TouchableWithoutFeedback",
+  "FlatList",
+  "SectionList",
+  "Button",
+  "ActivityIndicator",
+  "Modal",
+  "Switch",
+  "Picker",
+  "Slider",
+];
+
+export const DEFAULT_HTML_ELEMENTS = [
   "a",
   "abbr",
   "address",

packages/babel-plugin-component-annotate/src/index.ts

@@ -30,12 +30,17 @@
  * - Added `sentry` to data properties, i.e `data-sentry-component`
  * - Converted to TypeScript
  * - Code cleanups
+ * - Inject into root HTML elements instead of React component
  */
 
 import type * as Babel from "@babel/core";
 import type { PluginObj, PluginPass } from "@babel/core";
 
-import { DEFAULT_IGNORED_ELEMENTS, KNOWN_INCOMPATIBLE_PLUGINS } from "./constants";
+import {
+  DEFAULT_HTML_ELEMENTS,
+  KNOWN_INCOMPATIBLE_PLUGINS,
+  REACT_NATIVE_ELEMENTS,
+} from "./constants";
 
 const webComponentName = "data-sentry-component";
 const webElementName = "data-sentry-element";
@@ -251,6 +256,7 @@ function functionBodyPushAttributes(
 function processJSX(
   context: JSXProcessingContext,
   jsxNode: Babel.NodePath,
+  isRoot = true,
   componentName?: string
 ): void {
   if (!jsxNode) {
@@ -265,11 +271,19 @@ function processJSX(
   const paths = jsxNode.get("openingElement");
   const openingElements = Array.isArray(paths) ? paths : [paths];
 
+  // Check if this is any type of fragment (shorthand <> or named <Fragment>)
+  // If so, children stay at root; otherwise children are not root
+  const firstOpeningElement = openingElements[0] as Babel.NodePath;
+  const isAnyFragment = jsxNode.isJSXFragment() ||
+    (firstOpeningElement && isReactFragment(context.t, firstOpeningElement, context.fragmentContext));
+  const isChildRoot = isAnyFragment && isRoot;
+
   openingElements.forEach((openingElement) => {
     applyAttributes(
       context,
       openingElement as Babel.NodePath<Babel.types.JSXOpeningElement>,
-      currentComponentName
+      currentComponentName,
+      isRoot
     );
   });
 
@@ -288,7 +302,6 @@ function processJSX(
       return;
     }
 
-    // Children don't receive the data-component attribute so we pass null for componentName unless it's the first child of a Fragment with a node and `annotateFragments` is true
     const openingElement = child.get("openingElement");
     // TODO: Improve this. We never expect to have multiple opening elements
     // but if it's possible, this should work
@@ -298,9 +311,10 @@ function processJSX(
 
     if (shouldSetComponentName && openingElement && openingElement.node) {
       shouldSetComponentName = false;
-      processJSX(context, child, currentComponentName);
+      processJSX(context, child, isChildRoot, currentComponentName);
     } else {
-      processJSX(context, child, "");
+      // For fragments, children stay at root level; otherwise not root
+      processJSX(context, child, isChildRoot);
     }
   });
 }
@@ -309,11 +323,13 @@ function processJSX(
  * Applies Sentry tracking attributes to a JSX opening element.
  * Adds component name, element name, and source file attributes while
  * respecting ignore lists and fragment detection.
+ * Only annotates HTML elements, not React components.
  */
 function applyAttributes(
   context: JSXProcessingContext,
   openingElement: Babel.NodePath<Babel.types.JSXOpeningElement>,
-  componentName: string
+  componentName: string,
+  isRoot: boolean
 ): void {
   const { t, attributeNames, ignoredComponents, fragmentContext, sourceFileName } = context;
   const [componentAttributeName, elementAttributeName, sourceFileAttributeName] = attributeNames;
@@ -336,10 +352,18 @@ function applyAttributes(
     (ignoredComponent) => ignoredComponent === componentName || ignoredComponent === elementName
   );
 
+  // Check if this is an HTML element (vs a React component)
+  const isHtml = isHtmlElement(elementName);
+
+  // Skip annotation for React components - only annotate HTML elements
+  if (!isHtml) {
+    return;
+  }
+
   // Add a stable attribute for the element name but only for non-DOM names
   let isAnIgnoredElement = false;
   if (!isAnIgnoredComponent && !hasAttributeWithName(openingElement, elementAttributeName)) {
-    if (DEFAULT_IGNORED_ELEMENTS.includes(elementName)) {
+    if (DEFAULT_HTML_ELEMENTS.includes(elementName)) {
       isAnIgnoredElement = true;
     } else {
       // Always add element attribute for non-ignored elements
@@ -351,10 +375,11 @@ function applyAttributes(
     }
   }
 
-  // Add a stable attribute for the component name (absent for non-root elements)
+  // Add component name to all root-level HTML elements
   if (
     componentName &&
     !isAnIgnoredComponent &&
+    isRoot &&
     !hasAttributeWithName(openingElement, componentAttributeName)
   ) {
     if (componentAttributeName) {
@@ -366,12 +391,12 @@ function applyAttributes(
 
   // Add a stable attribute for the source file name
   // Updated condition: add source file for elements that have either:
-  // 1. A component name (root elements), OR
+  // 1. At root level, OR
   // 2. An element name that's not ignored (child elements)
   if (
     sourceFileName &&
     !isAnIgnoredComponent &&
-    (componentName || !isAnIgnoredElement) &&
+    (isRoot || !isAnIgnoredElement) &&
     !hasAttributeWithName(openingElement, sourceFileAttributeName)
   ) {
     if (sourceFileAttributeName) {
@@ -593,6 +618,31 @@ function isReactFragment(
   return false;
 }
 
+/**
+ * Determines if an element is an HTML element (vs a React component)
+ * HTML elements start with lowercase letters or are known React Native elements
+ */
+function isHtmlElement(elementName: string): boolean {
+  // Unknown elements are not HTML elements
+  if (elementName === UNKNOWN_ELEMENT_NAME) {
+    return false;
+  }
+
+  // Check for lowercase first letter (standard HTML elements)
+  if (elementName.length > 0 && elementName.charAt(0) === elementName.charAt(0).toLowerCase()) {
+    return true;
+  }
+
+  // React Native elements typically start with uppercase but are still "native" elements
+  // We consider them HTML-like elements for annotation purposes
+  if (REACT_NATIVE_ELEMENTS.includes(elementName)) {
+    return true;
+  }
+
+  // Otherwise, assume it's a React component (PascalCase)
+  return false;
+}
+
 function hasAttributeWithName(
   openingElement: Babel.NodePath<Babel.types.JSXOpeningElement>,
   name: string | undefined | null