Strange behvaviour, phantom button presses and scrolling on it's own

[HannahCarney]

Thanks for taking the time for reporting an issue!

Describe what happened
Include any error message or stack trace if available.

We are having very strange behaviour since integrating Datadog into our app. Buttons are seemingly being pressed and views being navigated to with absolutely no human interaction.

We have only had this issues since integrating DataDog into our app
We upgraded from 1.0.0-rc5 after reading this issue: #138
We are now on 1.0.0 as it sounded very similar to our issues. The buttons being pressed on their own are all either being passed to children or are callbacks to parent views. Some of the buttons fire navigation events.
"@datadog/mobile-react-native": "1.0.0",
"@datadog/mobile-react-navigation": "1.0.0",
I've completely disabled RUM from datadog, but we are still getting reports and commented out navigation tracking. We noticed that there are onPress handler overrides from the old 1.0.0-rc5 version in the mobile-react-navigation 1.0.0 code also. Unsure if this is related.

Steps to reproduce the issue:

We are unable to reproduce since 99% of the time the buttons and navigation work as expected, but have plenty of videos /reports of random buttons being pressed without interaction throughout the entire app. We are wondering if this is something you have seen or heard of? It is impacting our business heavily, and is not something I've seen prior to integration with Datadog.

Describe what you expected:

[louiszawadzki]

Hi @HannahCarney, thanks for reaching out!

We did not have any report of a similar issue so far.
It could be that the way you pass onPress to your components does not work well with our onPress interceptor (see its code at version 1.0.0 here: https://github.com/DataDog/dd-sdk-reactnative/blob/862d527a93e927774ecc2f3859848aa8422aa6dc/packages/core/src/rum/instrumentation/DdRumUserInteractionTracking.tsx).
Does the issue disappear if you disable User Interaction Tracking?

Could you share the code for one of the button that gets triggered unexpectedly to help us troubleshoot?

Thank you!

[HannahCarney]

We have disabled interaction tracking completely but are still seeing the issue but we have noticed you have EventInterceptor code and DdRumUserInteractionTracking files in both the mobile-react-native library and the mobile-react-navigation library? We have noticed the code is different between the two, and are not sure if by importing DdRumReactNavigationTracking we have still pulled in the event tracking there. We are using typescript. We have noticed we are still getting RUM reports of ApplicationStart, and we get the same report twice for every session (even though we disabled RUM)

Here is the most heavily affected button because it's triggering random printouts (print button gets pressed randomly). It seems to be a standard build custom component with a onPress prop...This code has not changed since we integrated Datadog, and we have only gotten reports since the integration.

const config = new DdSdkReactNativeConfiguration(
    [REDACTED],
    resolveEnv(),
    [REDACTED],
    false, // track User interactions (e.g.: Tap on buttons) 
    // DO NOT PUT THIS BACK IN UNTIL UPDATE DD https://github.com/DataDog/dd-sdk-reactnative/issues/138
    true, // track XHR Resources
    true // track Errors
  );

useEffect(() => {
   return () => { setPrinting(false), clearTimeout(timer.current) };
 }, []);

 const printReceipt = () => {
   if (printing === false) {
     setPrinting(true);
     Log.d(`[PRINT] PRINT_BUTTON_PRESSED ${orderId} `)
     orderActions.printOrder({
       OrderId: orderId,
       onFinish: () => {
         if (isMounted) {
           Log.d(`[PRINT] PRINT_BUTTON_STOP_CALLBACK ${orderId} `)
           //give it time to print
           timer.current = setTimeout(() => {
             setPrinting(false);
           }, 1500);
         }
       }
     })
   }
 }

 return (
   <View style={styles.root}>
     {!isFullyRefunded && (
       <StyledButton
         fdKey="refund-btn"
         big
         inverted
         negative
         onPress={() => {
           navigation.navigate("RefundOrder", { OrderId: orderId });
         }}
         children="REFUND"
       />
     )}
     <StyledButton
       fdKey="print-receipt-btn"
       big
       disabled={printing}
       onPress={printReceipt}
       children="PRINT"
     />
   </View>
 );
};

export default React.memo(AcceptedOrderActions);


import React from "react";
import {
 TouchableOpacity,
 ActivityIndicator,
 StyleSheet,
 View
} from "react-native";
import StyledText from "./StyledText";

type Props = {
 fdKey: string;
 disabled?: boolean;
 onPress: () => void;
 children?: string;
 inverted?: boolean;
 loading?: boolean;
 big?: boolean;
 negative?: boolean;
};

StyledButton.tsx

const StyledButton: React.FC<Props> = (props: Props) => {
 const {
   children,
   disabled,
   onPress,
   fdKey,
   inverted,
   loading,
   big,
   negative
 } = props;

 if (negative) {
   return (
     <TouchableOpacity
       testID={fdKey}
       accessibilityLabel={fdKey}
       style={{
         marginVertical: 8,
         marginHorizontal: 16,
         paddingLeft: 10,
         paddingRight: 10,
         backgroundColor: inverted ? "#ffffff" : "#ff426a",
         flex: 1,
         height: big ? 48 : 32,
         borderRadius: 24,
         justifyContent: "center",
         alignItems: "center",
         borderTopWidth: 0.25,
         borderLeftWidth: 0.5,
         borderRightWidth: 0.5,
         borderBottomWidth: 2,
         borderColor: "rgba(37, 65, 244, 0.1)",
         opacity: disabled ? 0.2 : 1
       }}
       disabled={disabled}
       onPress={onPress}
     >
       <StyledText
         variant={big ? "title" : "subtitle"}
         color={inverted ? "#ff426a" : "#ffffff"}
         weight="medium"
         numberOfLines={1}
         text={children}
       />
       {loading && (
         <View style={[StyleSheet.absoluteFill, { justifyContent: "center" }]}>
           <ActivityIndicator size="small" color="#ff426a" />
         </View>
       )}
     </TouchableOpacity>
   );
 }
 return (
   <TouchableOpacity
     testID={fdKey}
     accessibilityLabel={fdKey}
     style={{
       marginVertical: 8,
       marginHorizontal: 16,
       backgroundColor: inverted ? "#ffffff" : "#203af2",
       flex: 1,
       height: big ? 48 : 32,
       borderRadius: 24,
       justifyContent: "center",
       alignItems: "center",
       opacity: disabled ? 0.2 : 1
     }}
     disabled={disabled}
     onPress={onPress}
   >
     <StyledText
       numberOfLines={1}
       variant={big ? "title" : "subtitle"}
       color={inverted ? "#203af2" : "#ffffff"}
       weight="bold"
       text={children}
     />
     {loading && (
       <View style={[StyleSheet.absoluteFill, { justifyContent: "center" }]}>
         <ActivityIndicator size="small" color="#203af2" />
       </View>
     )}
   </TouchableOpacity>
 );
};

StyledButton.defaultProps = {
 disabled: false
};

export default StyledButton;

[louiszawadzki]

Hi @HannahCarney,

In the mobile-react-navigation we include the types for mobile-react-native as well as it depends on this package, so that's not something that could potentially create an issue as no code is actually there. Can you confirm this is the case for you as well?

Could you send the list of dependencies from your package.json to see if any one of them could interact with our SDK and create this issue?
Also I've seen reports of this bug happening when the Touchable component is inside a ScrollView, or other scrollable components from librairies:

• [V3] Random onPress handle in FlatList items while swiping tabs  satya164/react-native-tab-view#1241
• Random onPress handle in FlatList items while swiping pages callstack/react-native-pager-view#424

Could you specify if this is the case for this button?

Also if this is possible, can you share one video showing the issue?
If you don't want to share it here, you can also reach out to our support mentioning this issue and they will forward it to us.

Thanks a lot!

[HannahCarney]

We just updated to 1.1.3 to try it out. Sadly we already found that bug and changed it to the gesture handler, but this didn't work, and it's not related because our button here is outside of scroll view. We get phantom presses on ones in scrollview and ones outside of it too. We have also now removed the navigation library to try to narrow it down.

"workspaces": {
   "packages": [
     "apps/*",
     "packages/*"
   ]
 },
 "dependencies": {
   "@datadog/mobile-react-native": "1.1.3",
   "@date-fns": "*",
   "@logger": "*",
   "@formatjs/intl-datetimeformat": "^5.0.0",
   "@formatjs/intl-getcanonicallocales": "^1.9.0",
   "@formatjs/intl-locale": "^2.4.45",
   "@formatjs/intl-numberformat": "^7.4.2",
   "@formatjs/intl-pluralrules": "^4.3.2",
   "@react-native-async-storage/async-storage": "~1.15.0",
   "@react-native-community/datetimepicker": "4.0.0",
   "@react-native-community/netinfo": "6.0.0",
   "@react-native-community/slider": "4.1.12",
   "@react-native-picker/picker": "2.2.1",
   "@react-navigation/drawer": "6.4.1",
   "@react-navigation/native": "6.0.10",
   "@react-navigation/native-stack": "6.6.2",
   "axios": "0.26.0",
   "expo": "44.0.6",
   "expo-application": "4.0.2",
   "expo-av": "~10.2.0",
   "expo-constants": "~13.0.1",
   "expo-splash-screen": "~0.14.1",
   "expo-status-bar": "~1.2.0",
   "expo-updates": "~0.11.7",
   "immer": "^9.0.12",
   "moment": "^2.24.0",
   "moment-timezone": "^0.5.27",
   "react": "17.0.2",
   "react-dom": "17.0.2",
   "react-native": "0.64.3",
   "react-native-android-open-settings": "^1.3.0",
   "react-native-device-info": "~8.5.0",
   "react-native-dotenv": "^3.3.1",
   "react-native-elements": "3.4.2",
   "react-native-gesture-handler": "~2.1.0",
   "react-native-launch-arguments": "^2.0.1",
   "react-native-modal": "13.0.1",
   "react-native-notification-sounds": "0.5.4",
   "react-native-reanimated": "~2.3.1",
   "react-native-safe-area-context": "3.3.2",
   "react-native-screens": "~3.10.1",
   "react-native-signalr": "^1.0.6",
   "react-redux": "8.0.1",
   "redux": "4.2.0",
   "redux-act": "1.8.0",
   "redux-saga": "1.1.3",
   "redux-thunk": "2.4.1",
   "reselect": "4.1.5",
   "rn-escpos": "*",
   "rn-sunmi": "*",
   "rn-runtime": "*"
 },
 "devDependencies": {
   "@babel/core": "^7.12.9",
   "@testing-library/react-native": "^10.1.1",
   "@types/jest": "27.5.1",
   "@types/lodash": "4.14.182",
   "@types/react": "17.0.21",
   "@types/react-dom": "17.0.2",
   "@types/react-native": "0.67.7",
   "@types/react-redux": "7.1.24",
   "@types/react-test-renderer": "18.0.0",
   "@types/signalr": "2.2.37",
   "babel-plugin-transform-remove-console": "6.9.4",
   "jest": "^28.1.2",
   "jest-expo": "^44.0.0",
   "prettier": "2.5.1",
   "react-native-flipper": "^0.137.0",
   "react-test-renderer": "17.0.2",
   "redux-devtools-extension": "^2.13.8",
   "redux-flipper": "^2.0.1",
   "redux-saga-test-plan": "4.0.5",
   "typescript": "4.6.4"
 },
 "resolutions": {
   "react": "17.0.2",
   "typescript": "4.6.4"
 }
}

[louiszawadzki]

@HannahCarney thanks for sharing this, nothing looks suspicious to me in this package.json.

Could you share more information to try to narrow the bug:

• does it happen only for components that are wrapped in React.memo?
• does it happen only for onPress that dispatch a Redux action?
• does it happen on Android only?
  • If so can you try to close the app pressing the hardware back button until the app exits, then reopen it and see if the bug is triggered?

Thanks a lot

[HannahCarney]

Hi this happens for all components regardless of if we memo them or not (or it did in 1.0.0-rc5), the app is currently only Android so I wouldn't know about that. Was unable to reproduce it with the android back button. All I can say that is similar between all the buttons where it happens is that they are all callbacks to a parent view. We have useCallback on some of them, and others have no useCallback, two of the buttons we see happening the most, have actions in them, but one just has a navigation route.

Update: There is a possibility it's no longer happening on the buttons that have useCallback on them, but still happening with those that do not (in 1.0.0). We can say with certainty it was happening on all buttons previous to 1.0.0.

Sorry I cant be of much help, it happens so rarely we cannot reproduce in any attempted scenario, but when it does it often happens 6-10 in a row (constant phantom button pressing). Could be potentially related to when the view gets re-rendered.

Thank you for your help!

[louiszawadzki]

Hi @HannahCarney!

As there has been no activity on this issue for a while I'm going to close it.

Feel free to reopen it with more details if you still encounter the issue!