React: User Interaction only returns "Click - div" #969
Comments
|
same issue ... |
|
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 I would add this check to the PR and it should be good to go. |
Sounds good, I'll give that a test with @clyfish's latest updates to that PR and report back here. Cheers for the update! |
|
With the latest updates by @clyfish, still seeing a similar output as to what is described in this issue. When clicking the button, I continue to see
Updating this part of let target = task.target
if (
target === window ||
target === document ||
(typeof target.contains === 'function' &&
target.contains(document.activeElement))
) {
target = document.activeElement
console.log('[test] target redefined to', target);
}
else {
console.log('[test] target is not window, document or have activeElement', target);
} |
|
In order to get the expected functionality of document.addEventListener(
'click',
(e) => {
// Get our clicked element
const target = (e.target as HTMLElement) || null;
if (!target) return;
// Check if we have a valid element
if (typeof target.getAttribute !== 'function') return;
// Generate a Transaction Name from the attributes
const type = target.tagName;
const name = target.getAttribute('name') || '';
const transactionName = `Click - ${type}["${name}"]`;
// Set activeElement
console.log('[redef]: custom evt click', transactionName);
target.focus();
},
true
);Which result in the following logs:
This looks like what I'm expecting (except the last log), however the final thing on my list is capturing network traffic. I'm not sure how this works in its entirety, as I cannot get it to record the API calls it is making. The logic of my
Is there a way to force this network activity to be logged, instead of the transaction being discarded? |
|
@reecebenson I've tested without your workaround, and it works on Chrome 89. What browser did you test on? If there is an |
@clyfish I'm testing using Firefox 86, but still seeing Regarding the network activity, in my use case 100ms isn't enough buffer time to track network activity, as I have state changes to apply before firing something to the API. There doesn't look like there is a way to override this value either. I don't want to propose an increase in this value as it's probably a single use-case, but an override to this value would be beneficial for some. Is that something we could introduce here, possibly a new issue for tracking?
@StefanoSega Please create a new issue as your question is irrelevant to this issue. It makes these issues difficult to follow if conversation starts becoming off-topic. |
|
I've tested on Firefox 86, and it still works without your workaround. Are there any https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
Why does a state change take more than 100ms? Normally, the request is initiated immediately after clicking. |
Having a look through, I haven't got any additional <div class="root">
<div class="ui attached segment">
<div>(some filtering content, dropdowns, inputs, etc.)</div>
<button name="applyFiltersBtn" class="ui icon primary left labeled button">
<i aria-hidden="true" class="check icon"></i>
Apply
</button>
</div>
<div>(the rest of the app, tables, etc.)</div>
</div>Regarding the |
|
I've been able to get this to work how I expect it to work, however can't seem to get it functioning exactly how I'd like due to some UI library restrictions (for example, some out of the box components don't expose the First Step (Apply Filters)
Second Step (Narrow Search)The below table represents the second action, for the purpose of this example this button is an
The snippet mentioned above, and previously in this ticket has been slightly updated and now looks like the below. As we aren't able to override the import { apm } from '@elastic/apm-rum';
// Elastic APM Services
const apmServices = apm.serviceFactory;
const trService = apmServices.getService('TransactionService');
document.addEventListener(
'click',
(e) => {
// Get our clicked element
const target = (e.target as HTMLElement) || null;
if (!target) return;
// Check if we have a valid element
if (typeof target.getAttribute !== 'function') return;
// Check if we have the "data-rum" attribute
const type = target.tagName;
const attr = target.getAttribute('data-rum');
if (!attr) return;
// Generate a Transaction Name from the attributes
let transactionName = `Click - ${type}`;
if (attr) transactionName += `.${attr}`;
// Set activeElement
target.focus();
// Kick start our APM transaction so that Elastic can redefine it
// Let the transaction be reused by APM so that we can monitor traffic
trService.startTransaction(transactionName, 'user-interaction', {
managed: true,
canReuse: true,
reuseThreshold: 1000
} as ActualTransactionOptions) as Transaction;
},
true
);The interface ActualTransactionOptions extends TransactionOptions {
managed?: boolean;
startTime?: number;
canReuse?: boolean;
reuseThreshold?: number;
}All of the above gives me the results I'm expecting, but due to Elastic renaming the transaction name when I attempt to get in the middle of it causes it to be too generic for logging purposes (
|
|
Hi @clyfish / @vigneshshanmugam, would the two aforementioned overrides be something you'd consider? I'd be happy to raise a PR if that is the case - maybe even just the |
|
@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 As a result, I can see your test producing redefining transactions with no changes and also 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
So if we can fix it using eventtarget, it would be a better solution. |
I can't reproduce it. <!doctype html>
<div><a href="javascript:">test1</a></div>
<p>test2</p>
<div><button>test3</button></div>
<script>
window.addEventListener('click', () => {
console.log(document.activeElement)
}, true)
</script>click test1: document.activeElement is the
Because I think I've solved my problem by using
We can listen on window with useCapture flag before react-dom's |
|
Re. capturing the network event for the user-interaction transaction, I believe there's an async operation that we're not capturing between the time the click happens and the time the network event is fired. I think having a small reproduction code would be useful (maybe in a separate issue as well), @reecebenson would you be able to push a simplified version of your code so we can reproduce this? @vigneshshanmugam , Have you been able to reproduce the element attribute issue locally? If so I think sharing your code would be helpful to debug this. |
@jahtalab I'll see if I can get some time authorised and put aside to produce a reproducable codebase for you. It may not be authorised until this time next week, however, so apologies in advance. |
|
No worries @reecebenson , I think even a very simple piece of code (could be a single html file with some JS) that essentially demonstrates your problem is very helpful. There's no need for the actual code. |
Updating our react-* packages to 17 and running our E2E application for React would showcase the problem. Also play a bit with this PR once you are done updating - #951. You will notice how the attribute changes. |
|
@vigneshshanmugam , to post the examples he has generated in a PR so we can come up with solutions for this one. |
|
Hi @vigneshshanmugam / @jahtalab, apologies for not getting back to you with a snippet, but has there been any work on this that I could potentially test with? |
|
Hi, any updates with this Issue? I'm using I'm created a React app using |
I have the same problem with Vuetify. Not very meaningful name |
|
Hi, any updates with this Issue? |
This issue is possibly related to the intended fix from PR #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:
This then fires the following log:
As you can see, the name of this transaction is titled
Click - div, even though the (what looks like) intended behaviour ofperformance-monitoring.js:189is to grab thenameattribute from the element, in this caseapplyFiltersBtn. I'd expect this transaction to be namedClick - 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 #951, I have this applied change, along with the other changes from the PR). When logging thetargetvariable from theshouldInstrumentEventfunction and also logging thetargetfrom 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?
The text was updated successfully, but these errors were encountered: