APM Vue plugin

[Vergara92 (Rafael Vergara)]

Hi everyone I'm new in the community (And in the use of APM RUM) I install APM vue plugin through yarn and I have this versions:

@elastic/apm-rum-core@^4.10.1
@elastic/apm-rum-vue@^0.4.1

And have the next code on my router.js:

Vue.use(ApmVuePlugin, {
  router,
  config: {
    serviceName: 'project-name',
    serverUrl: 'https://apm.my-project.com'
    logLevel: 'debug'
  }
})

I don't have any additional configuration. When I see the logs I see in page-load all the events name correct but my app is a SPA so I feel the tab 'route-change' give me more relevant information.

The problem is in the route-change tab I lose some information about the user navigation, I think the agent get the route change between the web pages, but when i change the page from the side bar of my web I get things like [Click - li] or [Click - a]

Anyone know why this can be?

Thank you for read my post!

[vigneshshanmugam]

Hi Rafael,

Thanks for using the RUM agent. To answer about the transactions with Click, We started instrumenting click events in the agent and when the agent figures out the click event is interesting ( network activity), creates a transaction with Click - <tagName> and captures all the network events as spans associated with the transaction.

Does that help? Also if you are missing some information on the transactions, can you enable the debug logs on the agent via logLevel: 'debug' config and paste the console logs from the browser.

Thanks,
Vignesh

[Vergara92 (Rafael Vergara)]

Hi! Thanks for the quick reply!!

{
  "name": "Click - li",
  "type": "route-change",
   "options": {
     "pageLoadTraceId": "",
     "pageLoadSampled": false,
     "pageLoadSpanId": "",
     "pageLoadTransactionName": "",
     "transactionSampleRate": 1,
     "managed": true,
     "canReuse": true,
     "reuseThreshold": 100
   },
[...]

The event throws much more information but I don't know if it usefull for what we are talking about.

The other thing I see strange is when I click on a button inside my page the event work well and I get something like this:

{
  "name": "/create-order",
  "type": "route-change",
  "options": {
    "pageLoadTraceId": "",
    "pageLoadSampled": false,
    "pageLoadSpanId": "",
    "pageLoadTransactionName": "",
    "transactionSampleRate": 1,
    "managed": true,
    "canReuse": true,
    "reuseThreshold": 100
 },
[...]

the only difference I see between the first event log and the second one is the last event is a programmatic $router.push and the first one is a router-link tag, both natives of vue.

I can try to change the first event log to a programmatic router.push and see what's going on, but do you think the default way of log the router change should be with the route and not with the event that triggers the change? I think the tag that trigger doesn't give too much information and when I see the logs in kibana the different views are grouped in the same tag.

Thanks for the response and greetings!!

Edit: I discover a way to get the information like I want, making on the vue-router beforeResolve and add this line
Vue.prototype.$apm.getCurrentTransaction().name = to.path
Now I have some problems with 'unknowns' metric