include component names for react hooks

Author: skarim

src/analyze/javascript/utils/function-finder.js

@@ -12,16 +12,74 @@ const { NODE_TYPES } = require('../constants');
  * @returns {string} The function name or 'global' if not in a function
  */
 function findWrappingFunction(node, ancestors) {
+  const REACT_HOOKS = new Set([
+    'useEffect',
+    'useLayoutEffect',
+    'useInsertionEffect',
+    'useCallback',
+    'useMemo',
+    'useReducer',
+    'useState',
+    'useImperativeHandle',
+    'useDeferredValue',
+    'useTransition'
+  ]);
+
+  let hookName = null; // e.g. "useEffect" or "useCallback(handleFoo)"
+  let componentName = null;
+  let firstNonHookFunction = null;
+
   // Traverse ancestors from closest to furthest
   for (let i = ancestors.length - 1; i >= 0; i--) {
     const current = ancestors[i];
-    const functionName = extractFunctionName(current, node, ancestors[i - 1]);
-    
-    if (functionName) {
-      return functionName;
+
+    // Detect React hook call (CallExpression with Identifier callee)
+    if (!hookName && current.type === NODE_TYPES.CALL_EXPRESSION && current.callee && current.callee.type === NODE_TYPES.IDENTIFIER && REACT_HOOKS.has(current.callee.name)) {
+      hookName = current.callee.name; // store plain hook name; we'll format later if needed
+    }
+
+    // Existing logic to extract named function contexts
+    const fnName = extractFunctionName(current, node, ancestors[i - 1]);
+    if (fnName) {
+      if (REACT_HOOKS.has(stripParens(fnName.split('.')[0]))) {
+        // fnName itself is a hook signature like "useCallback(handleFoo)" or "useEffect()"
+        if (!hookName) hookName = fnName;
+        continue;
+      }
+
+      // First non-hook function up the tree is treated as component/container name
+      if (!componentName) {
+        componentName = fnName;
+      }
+
+      // Early exit when we already have both pieces
+      if (hookName && componentName) {
+        break;
+      }
+
+      // Save first non-hook function for fallback when no hook detected
+      if (!firstNonHookFunction) {
+        firstNonHookFunction = fnName;
+      }
     }
   }
-  
+
+  // If we detected hook + component, compose them
+  if (hookName && componentName) {
+    const formattedHook = typeof hookName === 'string' && hookName.endsWith('()') ? hookName.slice(0, -2) : hookName;
+    return `${componentName}.${formattedHook}`;
+  }
+
+  // If only hook signature found (no component) – return the hook signature itself
+  if (hookName) {
+    return hookName;
+  }
+
+  // Fallbacks to previous behaviour
+  if (firstNonHookFunction) {
+    return firstNonHookFunction;
+  }
+
   return 'global';
 }
 
@@ -118,6 +176,13 @@ function isFunctionNode(node) {
   );
 }
 
+/**
+ * Utility to strip trailing parens from simple hook signatures
+ */
+function stripParens(name) {
+  return name.endsWith('()') ? name.slice(0, -2) : name;
+}
+
 module.exports = {
   findWrappingFunction
 };

src/analyze/typescript/utils/function-finder.js

@@ -12,19 +12,61 @@ const { isReactHookCall } = require('./type-resolver');
  * @returns {string} The function name or 'global' if not in a function
  */
 function findWrappingFunction(node) {
+  // ts is already required at module scope
+  const REACT_HOOKS = new Set([
+    'useEffect',
+    'useLayoutEffect',
+    'useInsertionEffect',
+    'useCallback',
+    'useMemo',
+    'useReducer',
+    'useState',
+    'useImperativeHandle',
+    'useDeferredValue',
+    'useTransition'
+  ]);
+
   let current = node;
+  let hookSignature = null; // e.g. useEffect(), useCallback(handleFoo)
+  let componentName = null;
+  let firstNonHookFunction = null;
 
   while (current) {
-    const functionName = extractFunctionName(current);
-
-    if (functionName) {
-      return functionName;
+    const fnName = extractFunctionName(current);
+
+    if (fnName) {
+      const baseName = fnName.split('(')[0].replace(/\s+/g, '');
+      const isHookSig = REACT_HOOKS.has(baseName);
+
+      if (isHookSig && !hookSignature) {
+        hookSignature = fnName; // capture complete signature (may include params)
+        // Continue searching upward for component
+      } else if (!isHookSig && !componentName) {
+        componentName = fnName;
+        if (hookSignature) {
+          break; // we have both
+        }
+      }
+
+      if (!firstNonHookFunction) {
+        firstNonHookFunction = fnName;
+      }
     }
 
     current = current.parent;
   }
 
-  return 'global';
+  if (hookSignature && componentName) {
+    // Remove trailing () for useEffect etc
+    const formattedHook = hookSignature.endsWith('()') ? hookSignature.slice(0, -2) : hookSignature;
+    return `${componentName}.${formattedHook}`;
+  }
+
+  if (hookSignature) {
+    return hookSignature;
+  }
+
+  return firstNonHookFunction || 'global';
 }
 
 /**

tests/analyzeJavaScript.test.js

@@ -409,4 +409,15 @@ test.describe('analyzeJsFile', () => {
     assert.ok(constantEvent);
     assert.deepStrictEqual(constantEvent.properties, {});
   });
+
+  test('should include component name for React hook functions', () => {
+    const hookFile = path.join(fixturesDir, 'javascript', 'react-hook.js');
+    const customFunctionSignatures = [parseCustomFunctionSignature('trackUserEvent(EVENT_NAME)')];
+    const events = analyzeJsFile(hookFile, customFunctionSignatures);
+
+    assert.strictEqual(events.length, 1);
+    const evt = events[0];
+    assert.strictEqual(evt.eventName, 'ViewedEligibilityResults');
+    assert.strictEqual(evt.functionName, 'PrePaymentDashboard.useEffect');
+  });
 });

tests/analyzeTypeScript.test.js

@@ -588,7 +588,7 @@ test.describe('analyzeTsFile', () => {
     const posthogEvent = events.find(e => e.source === 'posthog');
     assert.ok(posthogEvent);
     assert.strictEqual(posthogEvent.eventName, 'cart_viewed');
-    assert.strictEqual(posthogEvent.functionName, 'useEffect()');
+    assert.strictEqual(posthogEvent.functionName, 'ShoppingCart.useEffect');
     assert.strictEqual(posthogEvent.line, 89);
     assert.deepStrictEqual(posthogEvent.properties, {
       item_count: { type: 'number' },
@@ -599,7 +599,7 @@ test.describe('analyzeTsFile', () => {
     const segmentEvent = events.find(e => e.source === 'segment' && e.eventName === 'add_to_cart');
     assert.ok(segmentEvent);
     assert.strictEqual(segmentEvent.eventName, 'add_to_cart');
-    assert.strictEqual(segmentEvent.functionName, 'useCallback(handleAddToCart)');
+    assert.strictEqual(segmentEvent.functionName, 'ShoppingCart.useCallback(handleAddToCart)');
     assert.strictEqual(segmentEvent.line, 101);
     assert.deepStrictEqual(segmentEvent.properties, {
       product_id: { type: 'string' },
@@ -611,7 +611,7 @@ test.describe('analyzeTsFile', () => {
     const amplitudeEvent = events.find(e => e.source === 'amplitude');
     assert.ok(amplitudeEvent);
     assert.strictEqual(amplitudeEvent.eventName, 'item_added');
-    assert.strictEqual(amplitudeEvent.functionName, 'useCallback(handleAddToCart)');
+    assert.strictEqual(amplitudeEvent.functionName, 'ShoppingCart.useCallback(handleAddToCart)');
     assert.strictEqual(amplitudeEvent.line, 108);
     assert.deepStrictEqual(amplitudeEvent.properties, {
       item_details: {

tests/fixtures/javascript/react-hook.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+// Stub implementation to satisfy tests without bundler
+function trackUserEvent(eventName, props) {
+  // no-op
+}
+
+function PrePaymentDashboard() {
+  useEffect(() => {
+    trackUserEvent('ViewedEligibilityResults');
+  }, []);
+
+  return null;
+}
+
+export default PrePaymentDashboard;

tests/fixtures/tracking-schema-all.yaml

@@ -996,7 +996,7 @@ events:
     implementations:
       - path: typescript-react/main.tsx
         line: 89
-        function: useEffect()
+        function: ShoppingCart.useEffect
         destination: posthog
     properties:
       item_count:
@@ -1007,7 +1007,7 @@ events:
     implementations:
       - path: typescript-react/main.tsx
         line: 101
-        function: useCallback(handleAddToCart)
+        function: ShoppingCart.useCallback(handleAddToCart)
         destination: segment
     properties:
       product_id:
@@ -1020,7 +1020,7 @@ events:
     implementations:
       - path: typescript-react/main.tsx
         line: 108
-        function: useCallback(handleAddToCart)
+        function: ShoppingCart.useCallback(handleAddToCart)
         destination: amplitude
     properties:
       item_details: