feat(react-native): autocapture touches and clicks on React Native Web

.changeset/brave-moons-shake.md

@@ -0,0 +1,5 @@
+---
+'posthog-react-native': minor
+---
+
+Autocapture touches and clicks on React Native Web (including expo-router on web). Touch events there carry no `_targetInst` and every touch was silently dropped, so the element chain is now resolved by walking up from `e.target` to the nearest node carrying a React fiber. `captureTouches` also registers a capture-phase `click` listener on the document on web, emitted with `$event_type: 'click'`, since browsers fire `touchend` only for touch input (react-native-web's `Pressable` stops propagation, and `Modal` renders outside the provider's subtree). Autocapture no longer lets an exception escape into the host app's event dispatch.

packages/react-native/references/posthog-react-native-references-latest.json

@@ -3046,7 +3046,7 @@
       "name": "PostHogAutocaptureOptions",
       "properties": [
         {
-          "description": "Enable autocapture of touch events",
+          "description": "Enable autocapture of touch events.\n\nOn React Native Web this also captures `click` events from mouse and trackpad input,\nemitted with `$event_type: 'click'`, since browsers fire `touchend` only for touch input.",
           "type": "boolean",
           "name": "captureTouches"
         },

packages/react-native/src/PostHogProvider.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { GestureResponderEvent, StyleProp, View, ViewStyle } from 'react-native'
 import { PostHog, PostHogOptions } from './posthog-rn'
 import { autocaptureFromTouchEvent } from './autocapture'
 import { useNavigationTracker } from './hooks/useNavigationTracker'
 import { PostHogContext } from './PostHogContext'
 import { PostHogAutocaptureOptions } from './types'
+import { isWeb } from './utils'
 import { defaultPostHogLabelProp } from './autocapture'
 
 /**
@@ -173,11 +174,38 @@ export const PostHogProvider = ({
     [captureTouches, posthog, autocaptureOptions]
   )
 
+  // Browsers fire touchend only for touch input, so a mouse never reaches onTouchEndCapture.
+  // On web listen for click on the document in the CAPTURE phase, matching the browser SDK:
+  // RNW's Pressable calls stopPropagation so a bubble-phase handler never sees presses on a
+  // button, and RNW's Modal portals its content to document.body, outside this provider's subtree.
+  // Read through a ref so an inline `autocapture` object prop doesn't re-attach on every render.
+  const optionsRef = useRef(autocaptureOptions)
+  useEffect(() => {
+    optionsRef.current = autocaptureOptions
+  }, [autocaptureOptions])
+
+  useEffect(() => {
+    // The package targets ESNext without the DOM lib, so reach the document off the global.
+    const doc = (globalThis as any)?.document
+    if (!isWeb() || !captureTouches || !doc?.addEventListener) {
+      return
+    }
+    const handler = (e: any): void => {
+      autocaptureFromTouchEvent({ target: e.target, nativeEvent: e }, posthog, optionsRef.current, 'click')
+    }
+    doc.addEventListener('click', handler, true)
+    return () => doc.removeEventListener('click', handler, true)
+  }, [captureTouches, posthog])
+
+  const captureProps = isWeb()
+    ? {}
+    : { onTouchEndCapture: captureTouches ? (e: GestureResponderEvent) => onTouch('end', e) : undefined }
+
   return (
     <View
       {...{ [phLabelProp]: 'PostHogProvider' }} // Dynamically setting customLabelProp (default: ph-label)
       style={style || { flex: 1 }}
-      onTouchEndCapture={captureTouches ? (e) => onTouch('end', e) : undefined}
+      {...captureProps}
     >
       <PostHogContext.Provider value={{ client: posthog }}>
         {captureScreens && <PostHogNavigationHook options={autocaptureOptions} client={posthog} />}

packages/react-native/src/autocapture.tsx

@@ -61,7 +61,58 @@ export const defaultPostHogLabelProp = 'ph-label'
 
 const captureAttributePrefix = 'data-ph-capture-attribute-'
 
-export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: PostHogAutocaptureOptions = {}): void => {
+// react-native-web internals; skipped only where RNW puts them, so a same-named app component is kept.
+const frameworkInternalLabels = ['LocaleProvider']
+
+const reactFiberKeyPattern = /^__react(Fiber|InternalInstance)\$/
+
+// Cycle guard, not a depth policy: real DOM chains null-terminate, a malformed parentNode may not.
+const maxFallbackAncestors = 100
+
+// Fires per interaction, so warn once: a persistent failure here silently disables autocapture.
+let warnedCaptureFailure = false
+
+// react-dom (RN Web) events have no _targetInst; the fiber sits on e.target under a randomised
+// __reactFiber$ key. The clicked node may be a non-React node inside a React subtree, so walk up.
+const getFallbackTargetInstance = (e: any): Element | undefined => {
+  let node = e.target
+
+  for (let depth = 0; node && typeof node === 'object' && depth < maxFallbackAncestors; depth++) {
+    const key = Object.getOwnPropertyNames(node).find((name) => reactFiberKeyPattern.test(name))
+    if (key) {
+      return node[key]
+    }
+    node = node.parentNode
+  }
+
+  return undefined
+}
+
+// Autocapture must never break the host app: a throw would escape into RN's touch dispatch on
+// native, or the DOM click handler on web. Matches the browser SDK, which guards its equivalent
+// document-level handler (packages/browser/src/autocapture.ts).
+export const autocaptureFromTouchEvent = (
+  e: any,
+  posthog: PostHog,
+  options: PostHogAutocaptureOptions = {},
+  eventType: 'touch' | 'click' = 'touch'
+): void => {
+  try {
+    captureFromEvent(e, posthog, options, eventType)
+  } catch (error) {
+    if (!warnedCaptureFailure) {
+      warnedCaptureFailure = true
+      console.warn('PostHog autocapture: capturing the interaction threw:', error)
+    }
+  }
+}
+
+const captureFromEvent = (
+  e: any,
+  posthog: PostHog,
+  options: PostHogAutocaptureOptions,
+  eventType: 'touch' | 'click'
+): void => {
   const {
     noCaptureProp = 'ph-no-capture',
     customLabelProp = defaultPostHogLabelProp,
@@ -70,13 +121,15 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
     propsToCapture = ['style', 'testID', 'accessibilityLabel', customLabelProp, 'children'],
   } = options
 
-  if (!e._targetInst) {
+  const nativeInst = e._targetInst
+  const targetInst: Element | undefined = nativeInst || getFallbackTargetInstance(e)
+  if (!targetInst) {
     return
   }
   const elements: PostHogAutocaptureElement[] = []
   const autocaptureProperties: Record<string, JsonType> = {}
 
-  let currentInst: Element | undefined = e._targetInst
+  let currentInst: Element | undefined = targetInst
 
   while (
     currentInst &&
@@ -130,14 +183,19 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
     }
 
     // Try and find a sensible label
-    const label =
-      typeof props?.[customLabelProp] !== 'undefined'
-        ? `${props[customLabelProp]}`
-        : currentInst.elementType?.displayName || currentInst.elementType?.name
+    const hasCustomLabel = typeof props?.[customLabelProp] !== 'undefined'
+    const label = hasCustomLabel
+      ? `${props?.[customLabelProp]}`
+      : currentInst.elementType?.displayName || currentInst.elementType?.name
 
     Object.assign(autocaptureProperties, elAutocaptureProperties)
 
-    if (label && !ignoreLabels.includes(label)) {
+    // RNW wraps the touched host node directly, so its internals only ever head the chain; a match
+    // further up is the app's own component. A user-set label is never a framework internal.
+    const isFrameworkWrapper =
+      !nativeInst && !hasCustomLabel && elements.length === 0 && frameworkInternalLabels.includes(label as string)
+
+    if (label && !isFrameworkWrapper && !ignoreLabels.includes(label)) {
       el.tag_name = sanitiseLabel(label)
       elements.push(el)
     }
@@ -164,10 +222,10 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
         element['tag_name'] = lastLabel
       }
     }
-    posthog.autocapture('touch', elements, {
+    posthog.autocapture(eventType, elements, {
       ...autocaptureProperties,
-      $touch_x: e.nativeEvent.pageX,
-      $touch_y: e.nativeEvent.pageY,
+      $touch_x: e.nativeEvent?.pageX,
+      $touch_y: e.nativeEvent?.pageY,
     })
   }
 }

packages/react-native/src/types.ts

@@ -14,7 +14,10 @@ export type PostHogNavigationRef = {
 
 export type PostHogAutocaptureOptions = {
   /**
-   * Enable autocapture of touch events
+   * Enable autocapture of touch events.
+   *
+   * On React Native Web this also captures `click` events from mouse and trackpad input,
+   * emitted with `$event_type: 'click'`, since browsers fire `touchend` only for touch input.
    *
    * @default false
    */

packages/react-native/test/PostHogProvider.spec.ts

@@ -1,7 +1,8 @@
 /** @jest-environment jsdom */
 import React, { useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { render, cleanup } from '@testing-library/react'
-import { AppState, Linking } from 'react-native'
+import { AppState, Linking, Platform } from 'react-native'
 
 import { PostHogProvider } from '../src/PostHogProvider'
 import { usePostHog } from '../src/hooks/usePostHog'
@@ -20,6 +21,132 @@ const CaptureClient = ({ onClient }: { onClient: (client: PostHog) => void }) =>
   return null
 }
 
+const createClient = (): any => ({ debug: jest.fn(), autocapture: jest.fn() })
+
+const renderOnWeb = (
+  client: any,
+  children: React.ReactNode = React.createElement('button', { type: 'button' }, 'press me')
+): ReturnType<typeof render> => {
+  Platform.OS = 'web'
+  return render(
+    React.createElement(
+      PostHogProvider,
+      { client, autocapture: { captureTouches: true, captureScreens: false } },
+      children
+    )
+  )
+}
+
+describe('PostHogProvider web click capture', () => {
+  const nativePlatform = Platform.OS
+
+  afterEach(() => {
+    Platform.OS = nativePlatform
+    cleanup()
+  })
+
+  it('should capture a click as $event_type click', () => {
+    const client = createClient()
+    const { getByText } = renderOnWeb(client)
+
+    getByText('press me').click()
+
+    expect(client.autocapture).toHaveBeenCalledTimes(1)
+    expect(client.autocapture.mock.calls[0][0]).toEqual('click')
+  })
+
+  it('should listen in the capture phase, since RNW Pressable stops propagation', () => {
+    const addEventListener = jest.spyOn(document, 'addEventListener')
+
+    renderOnWeb(createClient())
+
+    const click = addEventListener.mock.calls.find(([type]) => type === 'click')
+    expect(click).toBeDefined()
+    expect(click?.[2]).toEqual(true)
+    addEventListener.mockRestore()
+  })
+
+  it('should capture a click inside portalled content, as RNW Modal renders outside the provider', () => {
+    const client = createClient()
+    const { getByText } = renderOnWeb(
+      client,
+      createPortal(React.createElement('button', { type: 'button' }, 'in a modal'), document.body)
+    )
+
+    getByText('in a modal').click()
+
+    expect(client.autocapture).toHaveBeenCalledTimes(1)
+    expect(client.autocapture.mock.calls[0][0]).toEqual('click')
+  })
+
+  it('should keep the same listener across re-renders when autocapture options are inline', () => {
+    const client = createClient()
+    const addEventListener = jest.spyOn(document, 'addEventListener')
+    const element = React.createElement(
+      PostHogProvider,
+      { client, autocapture: { captureTouches: true, captureScreens: false } },
+      React.createElement('button', { type: 'button' }, 'press me')
+    )
+
+    Platform.OS = 'web'
+    const { rerender } = render(element)
+    rerender(element)
+    rerender(element)
+
+    expect(addEventListener.mock.calls.filter(([type]) => type === 'click')).toHaveLength(1)
+    addEventListener.mockRestore()
+  })
+
+  it('should remove the click listener on unmount', () => {
+    const removeEventListener = jest.spyOn(document, 'removeEventListener')
+    const client = createClient()
+    const { unmount, container } = renderOnWeb(client)
+    const button = container.querySelector('button') as HTMLButtonElement
+
+    unmount()
+    button.click()
+
+    expect(removeEventListener.mock.calls.some(([type, , capture]) => type === 'click' && capture === true)).toEqual(
+      true
+    )
+    expect(client.autocapture).not.toHaveBeenCalled()
+    removeEventListener.mockRestore()
+  })
+
+  it('should not listen for clicks on native, where onTouchEndCapture already fires', () => {
+    const addEventListener = jest.spyOn(document, 'addEventListener')
+    const client = createClient()
+
+    render(
+      React.createElement(
+        PostHogProvider,
+        { client, autocapture: { captureTouches: true, captureScreens: false } },
+        React.createElement('button', { type: 'button' }, 'press me')
+      )
+    )
+
+    expect(addEventListener.mock.calls.filter(([type]) => type === 'click')).toHaveLength(0)
+    expect(client.autocapture).not.toHaveBeenCalled()
+    addEventListener.mockRestore()
+  })
+
+  it('should not listen for clicks when captureTouches is off', () => {
+    const addEventListener = jest.spyOn(document, 'addEventListener')
+
+    Platform.OS = 'web'
+    render(
+      React.createElement(
+        PostHogProvider,
+        { client: createClient(), autocapture: { captureScreens: false } },
+        React.createElement('button', { type: 'button' }, 'press me')
+      )
+    )
+
+    expect(addEventListener.mock.calls.filter(([type]) => type === 'click')).toHaveLength(0)
+    addEventListener.mockRestore()
+  })
+})
+
 describe('PostHogProvider', () => {
   beforeEach(() => {
     ;(globalThis as any).window.fetch = jest.fn(async () => ({