React: User Interaction only returns "Click - div"

This issue is possibly related to the intended fix from PR elastic/apm-agent-rum-js#951, however applying the changes there do not resolve the below issue for me.

Whenever a target is clicked, the USER_INTERACTION event is fired. As an example button:

<button name="applyFiltersBtn" class="ui icon primary left labeled button">
  <i aria-hidden="true" class="check icon"></i>
  Apply
</button>

This then fires the following log:

[Elastic APM] startTransaction(86115b370489ca7c, Click - div, user-interaction)

As you can see, the name of this transaction is titled Click - div, even though the (what looks like) intended behaviour of performance-monitoring.js:189 is to grab the name attribute from the element, in this case applyFiltersBtn. I’d expect this transaction to be named Click - button["applyFiltersBtn"] and for this to be recorded in the APM under a “user-interaction”, whilst capturing network traffic to include spans such as API requests, etc.

When doing some debugging, I logged out what was being passed to shouldInstrumentEvent (or from elastic/apm-agent-rum-js#951, I have this applied change, along with the other changes from the PR). When logging the target variable from the shouldInstrumentEvent function and also logging the target from the getEventTargetSub, in all cases both parts of the aforementioned give back one of the following:

• <div id="root">
• Window
• <react><react/>.

It never gives back the actual target of (in the example above) a Button. Is this intentional, if so, how would one implement a transaction to follow up on user interactions with buttons and log them correctly in APM, with React?

[vigneshshanmugam]

We can fix this today by using the technique described here - https://github.com/elastic/apm-agent-rum-js/pull/951/files#r588056071. the resulting value of transaction would be Click - button["applyFiltersBtn"]

I would add this check to the PR and it should be good to go.

[vigneshshanmugam]

@reecebenson Thanks for the extensive test. I did a quick look around the new React 17 event system. It seems like React is registering two click events on the application root where the react app is mounted One with useCapture flag set to true and other with false.

As a result, I can see your test producing redefining transactions with no changes and also document.activeElement also not having the correct focus.

I am still doing some testing to figure out what would be the best solution here.

@clyfish Not sure why you closed the PR. Using window.onclick is easier, but it does not guarantee that

• our listeners always fires before everyone elses
• We have to also account for events that have been explicity called with e.stopPropagation or e.preventDefault.

So if we can fix it using eventtarget, it would be a better solution.