Button click-div versus regular cyclic heartbeat - unuseful transaction.custom.classes="selected-entry-container active"

[drgsr]

Hello everybody, We observe strange "Click-Div" user-interactions, which we cannot route to a button ...

In more detail:

On the timeline of the sample, we see a "Click-div" of 4266msec (the green line in kibana) - and in the last 18msec, we see one "Get" request (blue line in kibana) - which is typically generated by our JavaScript application as a cyclic heartbeat, which is generated roughly every 5 secs. The metadata does not provide useful clues, in transaction.custom.classes, the content is "selected-entry-container active".

Question: Does the agent assume, that all "Get" requests MUST be initiated by a user-interaction - and therefore "invents" (or associates old) user-interactions?

Question: Are there further (genereric) options in apm-agent or apm-server to dig deeper into understanding the button issuing the user interaction? (Since we are using VUE 2.1.2, we assume, that the correlating fix https://github.com/elastic/apm-agent-rum-js/pull/1155 is already in action)

Thanks for a super cool development and diagnosis tool, DrGSr

PS: My apology, if I don't know all vocabulary, since I am a newbe to apm-agent-rum-js, but we are very interested in those super cool features. PPS: We are using https://github.com/elastic/apm-agent-rum-js/tree/%40elastic/apm-rum-vue%402.1.2/ in Interplay to ELK 7.14. As browsers there are chromium (Linux) or MS Edge (Windows), where we observe similar behavior.

[devcorpio]

Hi @drgsr,

Thanks for reaching out!

On this case "Click-div" is the name which corresponds to a user-interaction transaction which are always related to a user's click.

The agent observes all the clicks that happen in a webpage. That behaviour can be deactivated via the disableInstrumentations config option if required. More info here

Question: Does the agent assume, that all "Get" requests MUST be initiated by a user-interaction - and therefore "invents" (or associates old) user-interactions?

The agent doesn't assume that. The agent is adding the blue line (span) because the http request has been triggered because of the click, that's why it put them together:

• user-interaction transaction (click-div on your case) - http request span (child of the transaction)

To give you another example, you can also find http requests on the page-load timeline if they happen while the page is loading.

Question: Are there further (genereric) options in apm-agent or apm-server to dig deeper into understanding the button issuing the user interaction? (Since we are using VUE 2.1.2, we assume, that the correlating fix https://github.com/elastic/apm-agent-rum-js/pull/1155 is already in action)

The "click" instrumentation the agent does gives you a way to customise the name of the transaction. Example:

<div>RUM agent</div> -> this will create a transaction with the name Click - div
<div name="rum-div">RUM agent</div> -> this will create a transaction with the name Click - div["rum-div"]
<div data-transaction-name="rum-div">RUM agent</div> -> this will create a transaction with the name Click - rum-div

To find the element containing the classes "selected-entry-container active", bear in mind that likely the class active and selected-entry-container might not be hardcoded on your element when trying to find it on the code.

Seeing their naming it seems that they might be added dynamically by your application at some point. Perhaps, you will find the element if you are able to pinpoint which part of the code adds selected-entry-container or active to that element.

Once you find the element you will need to modify the element as explained above.

If this doesn't help you we will need more information from you, if possible, such as:

• screenshots of your timeline to see it with more detail
• part of the code of your application that is related to this (I understand that this might not be possible for privacy reasons, so please, skip if inconvenient)

PS: My apology, if I don't know all vocabulary, since I am a newbe to apm-agent-rum-js, but we are very interested in those super cool features. PPS: We are using https://github.com/elastic/apm-agent-rum-js/tree/%40elastic/apm-rum-vue%402.1.2/ in Interplay to ELK 7.14. As browsers there are chromium (Linux) or MS Edge (Windows), where we observe similar behavior.

Don't worry at all!, thanks for taking the time to create this issue and providing all the details.

--

Let me know if this helps you.

Thanks, Alberto

[devcorpio]

Hi @drgsr

Have you been able to solve the issue?

Cheers, Alberto

[drgsr]

Not till now - but I was busy with other tasks...