How to get the current Elastic APM instance in Vue.js?

Question

I have integrated Elastic APM to my Vue.js App accordingly to the documentation (https://www.elastic.co/guide/en/apm/agent/rum-js/current/vue-integration.html)

In addition to the default events page-load and route-change I want to add custom transactions/spans for some button clicks.

I am stucked with checking if there is already an existing transaction start which I could use to add a custom span:

const transaction = this.$apm.currentTransaction()
transaction.startSpan('custom_span', 'type_name');
transaction.end();

However getting the current transaction fails (first line).

Answer 1

The Elastic RUM agent has support for click user interactions, therefore you shouldn't need to manually start these type of transactions.

Regarding the failure in your code the correct API call is getCurrentTransaction and not currentTransaction.

Hope this helps.