# RUM agent for Vue not capturing every single click

**URL:** <https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963>\
**Category:** APM\
**Tags:** rum, ui\
**Created:** [August 19, 2021, 12:50pm UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963 "2021-08-19T12:50:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![confuseddeveloper](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@confuseddeveloper](https://discuss.elastic.co/u/confuseddeveloper)\
**Post date:** [August 19, 2021, 12:50pm UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/1 "2021-08-19T12:50:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 19, 2021, 4:04pm UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/2 "2021-08-19T16:04:20Z")

</div>

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](https://www.elastic.co/guide/en/apm/agent/rum-js/current/configuration.html#log-level)

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![confuseddeveloper](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@confuseddeveloper](https://discuss.elastic.co/u/confuseddeveloper)\
**Post date:** [August 20, 2021, 2:55am UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/3 "2021-08-20T02:55:35Z")

</div>

Hi @vigneshshanmugam ,

Thanks for replying.

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

```auto
<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

```auto
[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?

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 20, 2021, 5:20am UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/4 "2021-08-20T05:20:38Z")

</div>

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](https://github.com/elastic/apm-agent-rum-js/issues/969)

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](https://github.com/elastic/apm-agent-rum-js/pull/951#issuecomment-800463878)

> 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

---

<div class="post-metadata">

**Author:** ![confuseddeveloper](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@confuseddeveloper](https://discuss.elastic.co/u/confuseddeveloper)\
**Post date:** [August 20, 2021, 5:34am UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/5 "2021-08-20T05:34:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![confuseddeveloper](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@confuseddeveloper](https://discuss.elastic.co/u/confuseddeveloper)\
**Post date:** [August 20, 2021, 11:31am UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/6 "2021-08-20T11:31:33Z")

</div>

> [@vigneshshanmugam](#):
>
> It should log as long as the underlying browser event type is "click".

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

```auto
[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

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 20, 2021, 3:19pm UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/7 "2021-08-20T15:19:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![confuseddeveloper](https://avatars.discourse-cdn.com/v4/letter/c/ecc23a/32.png) [@confuseddeveloper](https://discuss.elastic.co/u/confuseddeveloper)\
**Post date:** [August 23, 2021, 3:06am UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/8 "2021-08-23T03:06:25Z")

</div>

Thanks @vigneshshanmugam

I just have one last question.

In the link you sent,

> <https://github.com/elastic/apm-agent-rum-js/pull/951#issuecomment-800463878>
>
> React 16 binds click events on \`document\`, but \`shouldInstrumentEvent\` only supp…orts Element target.

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

```

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

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [August 24, 2021, 10:28pm UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/9 "2021-08-24T22:28:51Z")

</div>

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](https://github.com/clyfish/apm-agent-rum-js/blob/38a5db4e991043b6da2e55fb7087393420195170/packages/rum-core/src/performance-monitoring/performance-monitoring.js#L223-L229)

Please do let me know if you any other help.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 14, 2021, 6:29pm UTC](https://discuss.elastic.co/t/rum-agent-for-vue-not-capturing-every-single-click/281963/10 "2021-09-14T18:29:33Z")

</div>

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