Interaction tracking does not work with custom onPress

[derekstavis]

Describe what happened

When enabling interaction tracking I'm getting this warning:

An action event was dropped because either the onPress method arguments [true] were undefined or they were missing the target information.

This seems to be happening because of the SDK hijacking the onPress prop to track interactions. As part of that heuristic, it is matching the custom Toggle component, as opposed to the TouchableOpacity component.

Steps to reproduce the issue:

Implement a custom Toggle component like this:

type ToggeProps = {
  onPress: (value: boolean) => void;
  value: boolean;
}

const Toggle = ({ onPress, value }) => {
  const handlePress = () => {
    onPress(!value);
  }
  return <TouchableOpacity onPress={handlePress} />
}

When enabling interaction tracking, this component is failing with the warning above.

Describe what you expected:

The warning should not happen, and interactions should be captured transparently.

Additional context

• Version of the SDK: 1.3.0
• Version of React Native: 0.71 (Expo SDK 48, managed workflow)

[louiszawadzki]

Hi @derekstavis, thanks for reaching out!

We're aware of this current limitation of the SDK, we're working to come up with a solution that would solve this in the next versions.

I will let you know when this is fixed.

In the meantime, we'll also decrease the severity of the log so you can still be warned by SDK issues while not seeing false positives.

[visormatt]

For anyone that comes across this issue in the meantime, using __DEV__ for the interaction tracking is a good workaround

  const config = new DatadogProviderConfiguration(
    DATADOG_TOKEN,
    ENVIRONMENT,
    DATADOG_APP_ID,

    /**
     * @description track User interactions (e.g.: Tap on buttons. You can use 'accessibilityLabel' element property to give tap action the name, otherwise element type will be reported)
     * @external https://github.com/DataDog/dd-sdk-reactnative/issues/455
     */
    __DEV__ ? false : true,

    true, // track XHR Resources
    true, // track Errors
  );

[louiszawadzki]

Hi @derekstavis,

After closer investigation, we actually don't drop any event with your custom Toggle component.

We track every component that has an onPress prop, and if the argument passed to it is not a press event, we discard it.
In your case, what happens is that you have 2 components with an onPress prop:

• Toggle, which onPress takes a boolean as argument
• TouchableOpacity, which onPress always takes a press event as argument

So we capture the event with the TouchableOpacity and then drop it for the Toggle component :)

You might be thinking that this could create duplicate events if you had reused the press event as argument for your Toggle component, but we have a debounce on the press detection to ensure that even in that case we would only report the TouchableOpacity.

Unfortunately we can't remove the logs that are triggered in this case, we prefer to keep them as false positives rather than missing real issues.

Hope this clarifies things for you!
I'll close the issue, feel free to answer back if you need more explanations :)