fix: capture customLabelProp if set (#302)

Author: marandaneto

examples/example-expo-latest/App.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { StatusBar } from 'expo-status-bar'
 import { StyleSheet, Text, View } from 'react-native'
-import PostHog from 'posthog-react-native'
+import PostHog, { PostHogProvider } from 'posthog-react-native'
 
 export const posthog = new PostHog('phc_QFbR1y41s5sxnNTZoyKG2NJo2RlsCIWkUfdpawgb40D', {
   host: 'https://us.i.posthog.com',
@@ -10,6 +10,23 @@ export const posthog = new PostHog('phc_QFbR1y41s5sxnNTZoyKG2NJo2RlsCIWkUfdpawgb
 })
 posthog.debug(true)
 
+export const SharedPostHogProvider = (props: any) => {
+  return (
+    <PostHogProvider
+      client={posthog}
+      autocapture={{
+        captureLifecycleEvents: true,
+        captureScreens: true,
+        captureTouches: true,
+        customLabelProp: 'ph-my-label',
+      }}
+      debug
+    >
+      {props.children}
+    </PostHogProvider>
+  )
+}
+
 export default function App() {
   const [buttonText, setButtonText] = useState('Open up App.js to start working on your app!')
 
@@ -19,10 +36,14 @@ export default function App() {
   }
 
   return (
-    <View style={styles.container}>
-      <Text onPress={handleClick}>{buttonText}</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SharedPostHogProvider>
+      <View style={styles.container}>
+        <Text ph-my-label="special-text-changed" onPress={handleClick}>
+          {buttonText}
+        </Text>
+        <StatusBar style="auto" />
+      </View>
+    </SharedPostHogProvider>
   )
 }
 

posthog-react-native/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Next
 
+# 3.3.10 - 2024-11-04
+
+1. fix: capture customLabelProp if set
+
 # 3.3.9 - 2024-10-26
 
 1. fix: rollback module to ESNext

posthog-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "posthog-react-native",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "main": "lib/posthog-react-native/index.js",
   "files": [
     "lib/"

posthog-react-native/src/PostHogProvider.tsx

@@ -6,6 +6,7 @@ import { useNavigationTracker } from './hooks/useNavigationTracker'
 import { useLifecycleTracker } from './hooks/useLifecycleTracker'
 import { PostHogContext } from './PostHogContext'
 import { PostHogAutocaptureOptions } from './types'
+import { defaultPostHogLabelProp } from './autocapture'
 
 export interface PostHogProviderProps {
   children: React.ReactNode
@@ -70,6 +71,7 @@ export const PostHogProvider = ({
   const captureScreens = !captureNone && posthog && (captureAll || (autocaptureOptions?.captureScreens ?? true)) // Default to true if not set
   const captureLifecycle =
     !captureNone && posthog && (captureAll || (autocaptureOptions?.captureLifecycleEvents ?? true)) // Default to true if not set
+  const phLabelProp = autocaptureOptions?.customLabelProp || defaultPostHogLabelProp
 
   useEffect(() => {
     posthog.debug(debug)
@@ -91,7 +93,7 @@ export const PostHogProvider = ({
 
   return (
     <View
-      ph-label="PostHogProvider"
+      {...{ [phLabelProp]: 'PostHogProvider' }} // Dynamically setting customLabelProp (default: ph-label)
       style={style || { flex: 1 }}
       onTouchEndCapture={captureTouches ? (e) => onTouch('end', e) : undefined}
     >

posthog-react-native/src/autocapture.tsx

@@ -39,14 +39,16 @@ const sanitiseLabel = (label: string): string => {
   return label.replace(/[^a-z0-9]+/gi, '-')
 }
 
+export const defaultPostHogLabelProp = 'ph-label'
+
 export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: PostHogAutocaptureOptions = {}): void => {
   const {
     noCaptureProp = 'ph-no-capture',
-    customLabelProp = 'ph-label',
+    customLabelProp = defaultPostHogLabelProp,
     maxElementsCaptured = 20,
     ignoreLabels = [],
-    propsToCapture = ['style', 'testID', 'accessibilityLabel', 'ph-label', 'children'],
   } = options
+  const propsToCapture = ['style', 'testID', 'accessibilityLabel', customLabelProp, 'children']
 
   if (!e._targetInst) {
     return
@@ -105,16 +107,16 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
   }
 
   if (elements.length) {
-    // The element that was tapped, may be a child (or grandchild of an element with a ph-label)
-    // In this case, the current labels applied obscure the ph-label
-    // To correct this, loop over the elements in reverse, and promote the ph-label
+    // The element that was tapped, may be a child (or grandchild of an element with a customLabelProp (default: ph-label))
+    // In this case, the current labels applied obscure the customLabelProp (default: ph-label)
+    // To correct this, loop over the elements in reverse, and promote the customLabelProp (default: ph-label)
     const elAttrLabelKey = `attr__${customLabelProp}`
     let lastLabel: string | undefined = undefined
 
     for (let i = elements.length - 1; i >= 0; i--) {
       const element = elements[i]
       if (element[elAttrLabelKey]) {
-        // this element had a ph-label set, promote it to the lastLabel
+        // this element had a customLabelProp (default: ph-label) set, promote it to the lastLabel
         lastLabel = element[elAttrLabelKey]
       }