`@datadog/mobile-react-native-babel-plugin` overwrites event handler props with noops

[vhfmag]

Describe the bug

When @datadog/mobile-react-native-babel-plugin finds a JSX element called TextInput that doesn't come from react-native, it injects onFocus at the end of the list of JSX attributes, overwriting any existing onFocus attributes.

Reproduction steps

1. Clone https://github.com/vhfmag/datadog-babel-plugin-bug-repro
2. Run pnpm i && pnpm run build
3. Compare dist/WithBug.js and dist/WithoutBug.js

Or just check the screenshots below:

SDK logs

No response

Expected behavior

ensureMandatoryAttributes should receive state and check if componentName is included in state.trackedComponents. The root cause of the issue seems to be that getJSXElementActionPaths doesn't include onFocus on actionPathNames because TextInput isn't tracked (presumably because it's not imported from react-native), which ensureMandatoryAttributes interprets as if the component was actually tracked but onFocus was missing, leading it to add one.

Affected SDK versions

I tested with @datadog/mobile-react-native-babel-plugin on both 2.13.1 and 2.13.2

Latest working SDK version

N/A

Did you confirm if the latest SDK version fixes the bug?

Yes

Integration Methods

NPM

React Native Version

No response

Package.json Contents

{
  "name": "datadog-babel-plugin-bug-repro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src --out-dir dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.18.0",
  "devDependencies": {
    "@babel/cli": "^7.28.3",
    "@babel/core": "^7.28.5",
    "@babel/preset-react": "^7.28.5",
    "@datadog/mobile-react-native-babel-plugin": "^2.13.2"
  },
  "dependencies": {
    "react": "^19.2.1"
  }
}

iOS Setup

No response

Android Setup

No response

Device Information

No response

Other relevant information

No response

[cdn34dd]

Hey @vhfmag, thanks for reporting the issue, we'll look into it as soon as we can. In the meantime, can you check if the fix below works for you ? This changes the plugin configuration options, so you can specify which handlers the Datadog sdk should hook into.

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      '@datadog/mobile-react-native-babel-plugin',
      {
        components: {
          useContent: true,
          useNamePrefix: true,
          tracked: [
            // This should prevent the bug for custom TextInput components
            {
              name: 'TextInput',
              handlers: [
                { event: 'onFocus', action: 'TAP' }
              ]
            },
            // You can also add other custom components here so they are also tracked
            {
              name: 'CustomButton',
              handlers: [
                { event: 'onPress', action: 'TAP' }
              ]
            },
          ],
        },
      },
    ],
  ],
};

[vhfmag]

For the time being, we've fixed it by patching this line to use .unshift instead of .push so that it doesn't overwrite our own event handlers (the output changes from <TextInput onFocus={ourOwn} onFocus={() => {}} /> to <TextInput onFocus={() => {}} onFocus={ourOwn} />)

We can look into the suggested config once a fix lands, but for now I feel like it's safer to make sure the plugin will never overwrite anything

[cdn34dd]

Hey @vhfmag, at the end of the day it's your call to create a patch file for this, instead of trying the configuration workaround I gave you. However I must warn you, your patch is not safer, and is in fact breaking functionality in the code, even though things are seemingly working for you.

This will be fixed next version, until then I strongly recommend you try the solution I gave you. If the solution I gave you does not work, I will provide you with a patch file you can use instead.

[vhfmag]

Gotcha, I've shared this with the team to look into replacing the patch workaround with the config change you shared

That said, out of curiosity: with broken functionality, do you mean Datadog tracking? Because if that's the case, I suspect it might not be breaking anything — our custom TextInput uses RN's own TextInput and so even if we don't add tracking code in places where our custom TextInput is used, it will still be tracked because its implementation will include the tracking logic on RN's TextInput onFocus prop (hopefully that wasn't too confusing).

That led me to another question: if I make the proposed change, I'm assuming we'd effectively duplicate tracking for all usages of our custom TextInput: the plugin will add the tracking logic to onFocus handlers passed to our custom TextInput, which are then passed to RN's TextInput's onFocus, which would also be modified by the plugin to include the tracking logic. Is my understanding correct? If so, would that be deduped somehow?

[vhfmag]

I just tested in my reproduction repo and it seems like we don't duplicate anything because we're looking for TextInput by name, so assuming we rename the RN import (e.g. import { TextInput as RNTextInput } from "react-native"), RN's TextInput won't be touched by the babel plugin at all.

[vhfmag]

I did run into another unexpected behavior, though: we don't seem to look into spread props. So for the snippet below, doSomething will never be called:

// src/CustomTextInput.js
export function CustomTextInput(props) {
  return <TextInput {...props} />;
}

// src/MyComponent.js
export function MyComponent() {
  return <TextInput onFocus={() => doSomething()} />;
}

[vhfmag]

I can imagine how tricky this is to implement, but I'll be blunt: the fact that this plugin, Datadog's officially recommended way to set up interaction tracking (as per #1007 (comment)), might override event handlers in multiple cases greatly undermines my trust on the company's tooling. Overriding event handlers can cause very severe bugs, and it's very hard to debug because it won't show up at all if you're looking into source code (e.g. through source maps)