search

PostHog / posthog-js-lite

Reimplementation of posthog-js to be as light and modular as possible.
https://posthog.com/docs/libraries
MIT License
69 stars 36 forks source link

posthog-react-native 3.3.9: customLabelProp doesn't change prop name #301

Closed tyrauber closed 2 weeks ago

tyrauber commented 3 weeks ago

Bug description

Perhaps I am missing something, but my expectation is that customLabelProp would allow me to change the PostHog ph-label prop to anything of my choosing. For example, I'd like to change it to be camelcase phLabel to make it easier to pass as a prop to components.

Unfortunately, doing so makes the label values no longer be applied to touch events, even after app rebuild.

I get the default label names instead like pressed Text with text "Show more"

Code looks fine at first glance, so I am not entirely sure what's going on there.

How to reproduce

  1. Change the customLabelProp to "phLabel"
  2. Instrument a TouchableOpacity with a phLabel prop and a custom value
  3. Rebuild the app
  4. Click the TouchableOpacity
  5. See the default label instead of the custom prop value

Related sub-libraries

Additional context

Thank you for your bug report – we love squashing them!

marandaneto commented 2 weeks ago

@tyrauber thanks for raising this issue. I think it might be because of https://github.com/PostHog/posthog-js-lite/blob/b853833c126ba713eb25696c96a3f0a6193ea2f0/posthog-react-native/src/autocapture.tsx#L48 Since you set a custom customLabelProp, this label prop isn't added to propsToCapture, if you do:

customLabelProp = 'phLabel',
propsToCapture = ['style', 'testID', 'accessibilityLabel', 'phLabel', 'children'],

Maybe that should work, can you give it a try? if that's the case, I can either fix the SDK or the docs.

marandaneto commented 2 weeks ago

I think this should help.

tyrauber commented 2 weeks ago

Thanks @marandaneto, I didn't realize propsToCapture needed to be used in combination with customLabelProp. Based on the documentation, it looked like propsToCapture was something I didn't want to mess with. 

propsToCapture: ["testID"], // Limit which props are captured. By default, identifiers and text content are captured.

I didn't want to disable any default functionality, I just wanted to change the label used. More details on how propsToCapture works in the documentation might suffice as a solution.

marandaneto commented 2 weeks ago

@tyrauber I fixed the SDK instead, you should not need to mess with propsToCapture anymore. https://github.com/PostHog/posthog-js-lite/releases/tag/posthog-react-native-v3.3.10