Fix Babel plugin crash when handling unresolved component names

- Add support for JSXMemberExpression in getNodeName function

Author: cdn34dd

packages/react-native-babel-plugin/src/actions/rum/index.ts

@@ -237,8 +237,12 @@ function jsxChildToRuntimeCall(
                         : t.memberExpression(obj, t.identifier(prop)),
                 (null as unknown) as Babel.types.Expression
             );
+        } else if (elementName && t.isValidIdentifier(elementName)) {
+            nameNode = t.identifier(elementName);
+        } else if (elementName) {
+            nameNode = t.stringLiteral(elementName);
         } else {
-            nameNode = t.identifier(elementName || 'unknown');
+            nameNode = addNamed(programPath, 'Fragment', 'react/jsx-runtime');
         }
 
         // Convert props to an object

packages/react-native-babel-plugin/src/utils/nodeProcessing.ts

@@ -84,6 +84,28 @@ export function getNodeName(
         return node;
     }
 
+    if (t.isJSXMemberExpression(node)) {
+        if (t.isJSXIdentifier(node.object)) {
+            return `${node.object.name}.${node.property.name}`;
+        }
+
+        let nodeName = node.property.name;
+        let nodeTracker:
+            | Babel.types.JSXIdentifier
+            | Babel.types.JSXMemberExpression = node.object;
+
+        while (t.isJSXMemberExpression(nodeTracker)) {
+            nodeName = `${nodeTracker.property.name}.${nodeName}`;
+            nodeTracker = nodeTracker.object;
+        }
+
+        if (t.isJSXIdentifier(nodeTracker)) {
+            nodeName = `${nodeTracker.name}.${nodeName}`;
+        }
+
+        return nodeName;
+    }
+
     if (!('name' in node)) {
         return null;
     }

packages/react-native-babel-plugin/test/nodeProcessing.test.ts

@@ -0,0 +1,47 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0. This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import * as Babel from '@babel/core';
+
+import { getNodeName } from '../src/utils/nodeProcessing';
+
+const t = Babel.types;
+
+describe('getNodeName', () => {
+    it('should return the string as-is when given a string', () => {
+        expect(getNodeName(t, 'View')).toBe('View');
+    });
+
+    it('should return the name of a JSXIdentifier', () => {
+        const node = t.jsxIdentifier('Text');
+        expect(getNodeName(t, node)).toBe('Text');
+    });
+
+    it('should return dotted name for a JSXMemberExpression', () => {
+        const node = t.jsxMemberExpression(
+            t.jsxIdentifier('Card'),
+            t.jsxIdentifier('Title')
+        );
+        expect(getNodeName(t, node)).toBe('Card.Title');
+    });
+
+    it('should return dotted name for a deeply nested JSXMemberExpression', () => {
+        const node = t.jsxMemberExpression(
+            t.jsxMemberExpression(t.jsxIdentifier('A'), t.jsxIdentifier('B')),
+            t.jsxIdentifier('C')
+        );
+        expect(getNodeName(t, node)).toBe('A.B.C');
+    });
+
+    it('should return null for a node without a name property', () => {
+        const node = t.numericLiteral(42);
+        expect(getNodeName(t, node)).toBeNull();
+    });
+
+    it('should return null for an empty statement node', () => {
+        const node = t.emptyStatement();
+        expect(getNodeName(t, node)).toBeNull();
+    });
+});

packages/react-native-babel-plugin/test/plugin.test.ts

@@ -1643,4 +1643,39 @@ describe('Babel plugin: wrap interaction handlers for RUM ( with memoization )',
             }"
         `);
     });
+
+    it('should resolve member expression component names in getContent', () => {
+        const options: Partial<PluginOptions> = {
+            components: {
+                useContent: true,
+                useNamePrefix: true,
+                tracked: [
+                    {
+                        name: 'Card',
+                        handlers: [{ event: 'onPress', action: 'TAP' }]
+                    }
+                ]
+            }
+        };
+
+        const input = `
+            import { View, Text } from 'react-native';
+            function Card({ children, onPress }: any) {
+                return <View onPress={onPress}>{children}</View>;
+            }
+            Card.Title = ({ children }: any) => <Text>{children}</Text>;
+
+            function Screen() {
+                return (
+                    <Card onPress={() => {}}>
+                        <Card.Title>Welcome</Card.Title>
+                    </Card>
+                );
+            }
+        `;
+
+        const output = transformCode(input, options);
+        expect(output).not.toContain('(unknown,');
+        expect(output).toContain('Card.Title');
+    });
 });