RUM agent for Vue not capturing every single click

Elastic Observability APM
,
1

Hi,

I'm trying to replace our Google Analytics with RUM. Specifically I want to capture clicks of the following

  1. Event click such as clicking on the button
  2. Route change

Sometimes I see it working. But sometimes it doesn't. There are times that I get a generic "click-div" even though I added a name attribute.

Am I using RUM wrongly?

Kibana version: 7.14

Elasticsearch version: 7.14

APM Server version: 7.14

2

Hi @confuseddeveloper

Could you please enable the debug logs by adding logLevel: "debug" to the configuration and send an example of when you are seeing the naming attribute not getting picked by the click transaction.

Config - Configuration | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic

Thanks,
Vignesh

3

Hi @vigneshshanmugam ,

Thanks for replying.

This is my Button tag. The important thing to look at here is the name attribute

<button data-v-36e619b0="" type="button" class="btn-primary-2 fs-14 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default" style="height: 38px; width: 200px;" name="accountsettings-btn"><span class="v-btn__content"> Change Password </span></button>

logLevel

[Elastic APM] redefining transaction(e128fd05d580e510, Click - button["accountsettings-btn}"], user-interaction) to (Click - div, user-interaction) 
{
  "name": "Click - div",
  "type": "user-interaction",
  "options": {
    "pageLoadTraceId": "",
    "pageLoadSampled": false,
    "pageLoadSpanId": "",
    "pageLoadTransactionName": "",
    "transactionSampleRate": 1,
    "managed": true,
    "canReuse": true,
    "reuseThreshold": 300
  },
  "id": "e128fd05d580e510",
  "traceId": "9e0dad4e7b1c3249eb677a4d4ee5f881",
  "sampled": true,
  "sampleRate": 1,
  "_start": 137792,
  "ended": false,
  "spans": [],
  "_activeSpans": {},
  "_activeTasks": {},
  "blocked": false,
  "captureTimings": true,
  "breakdownTimings": [],
  "context": {
    "custom": {
      "classes": "user-info-section v-card v-sheet theme--light"
    }
  }
}

Correct me if I'm wrong.
For certain user interaction that does not have route change or api request such as opening of a modal window, RUM doesn't log it?

4

Thanks for the details, Seems to be like a event delegation issue. The problem is similar to the issue mentioned here - React: User Interaction only returns "Click - div" · Issue #969 · elastic/apm-agent-rum-js · GitHub

Can you confirm the Vue library version? We would need to rewrite the user interaction logic to account for the event delegation issue. There is a suggested solution here - fix: click transactions supports window and document target by clyfish · Pull Request #951 · elastic/apm-agent-rum-js · GitHub

For certain user interaction that does not have route change or api request such as opening of a modal window, RUM doesn't log it?

It should log as long as the underlying browser event type is "click".

Thanks,
Vignesh

5

Hi @vigneshshanmugam,

This is the vue libary version that I'm using
"@elastic/apm-rum-vue": "^1.3.1"

I see, the solution makes sense.

Best

6

So I tried again to open a modal window but it's not logging back.

[Elastic APM] startTransaction(1f891243e6fc5d85, Click - button["accountsettings-btn"], user-interaction)
Ignoring unsupported entryTypes: longtask.

[Elastic APM] transaction(b2e6d4ec715797fa, Click - button["accountsettings-btn"]) was discarded! Transaction does not have any spans

[Elastic APM] end transaction(b2e6d4ec715797fa, Click - button["accountsettings-btn"], user-interaction) 

{
  "name": "Click - button[\"accountsettings-btn\"]",
  "type": "user-interaction",
  "options": {
    "pageLoadTraceId": "",
    "pageLoadSampled": false,
    "pageLoadSpanId": "",
    "pageLoadTransactionName": "",
    "transactionSampleRate": 1,
    "managed": true,
    "canReuse": true,
    "reuseThreshold": 100
  },
  "id": "b2e6d4ec715797fa",
  "traceId": "f5252c5aa559576282f08b4cf5c9aab0",
  "sampled": true,
  "sampleRate": 1,
  "_start": 326299,
  "_end": 329487,
  "ended": true,
  "spans": [],
  "_activeSpans": {},
  "_activeTasks": {},
  "blocked": false,
  "captureTimings": true,
  "breakdownTimings": [],
  "context": {
    "page": {
      "referer": "",
      "url": "http://localhost:8080/account-settings"
    }
  }
}

Actions done:

  1. Click on button
  2. Modal opens.
  3. Close modal.

Based on my observations, whenver the spans is empty array, it doesn't log anything.
But whenever there is some api/network request, then the spans has contents.

As such I'm still not sure if APM logs as long as there is an event type click

7

By default, All non interesting transactions like clicks that does not trigger any network requests or clicks that end up in SPA transition are not sent to the APM server to reduce the data consumption which is why you see the message in the logs as was discarded! Transaction does not have any spans.

Users can change the transactionSampleRate to send all transactions to the APM server

Thanks,
Vignesh

8

Thanks @vigneshshanmugam

I just have one last question.

In the link you sent,

    if (tr) {
      tr.addContext({ custom: { selector: getSelectorByElement(target) } })
    }

What exactly is getSelectorByElement?
I don't think this is a native JS selector?

9

Hi @confuseddeveloper ,

Yes its not a native Selector, its just for illustration purpose. The idea is that you can add extra context to the transaction by adding all associated className, Selector names and other attributes for these click events.

We currently only capture class names for these target - apm-agent-rum-js/performance-monitoring.js at 38a5db4e991043b6da2e55fb7087393420195170 · clyfish/apm-agent-rum-js · GitHub

Please do let me know if you any other help.

Thanks,
Vignesh

1 Like
10

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.