Glad to see that now you are seeing the data property
--
However, note that only some transactions are being displayed in Elastic, others are not, the code for these that are not appearing is the same as shown above (the same as what is being displayed in Elastic).
What could this “anomaly” be?
PS: These are click events on li that do not have a RestFul request.
one of the requirements we have for transactions is that they should have at least one span.
In this particular case, it means that if the transaction corresponding to a click event doesn't have a span (for example one related to a restful request) it will be discarded. There are two main reasons for this:
-
For performance reasons we don't want to send every click on a page (unless there is a span related of course)
-
transactions have a start and an end, in certain scenarios that's something simple to handle, the page load is a clear example since the browser emits the onload event (which means, the end). In other scenarios like click events, things are different, we know when a click takes place (that's how we start the transaction), but there is no simple way to know when that transaction should end, the scenarios are endless. In that case, we decided to bind the end of a Restful request to the end of a click transaction. (the same thing happens with the route-change transaction). In fact, a click transaction without span will remain open until a new transaction starts, this is the process:
- Agent creates transaction after a click
- -- if there is no network request, it will remain idle --
- If there is another click:
- the previous transaction will end (without span, hence will be discarded)
- a new transaction will be created
- --same process as before again--
With custom transactions, you have total control of this (you can create the spans and end them as you wish).
But for the click transactions automatically created by the agent, you will need to "hook" the ongoing transaction and it's a bit tricky, you would need to do something like this:
// below the agent initalization
window.addEventListener("click", (e) => {
const tr = elasticApm.getCurrentTransaction()
if (tr) {
// Add the span that makes sense to you
// See more details here: https://www.elastic.co/guide/en/apm/agent/rum-js/current/agent-api.html#apm-start-span
const span = tr.startSpan("name", "type")
// span should also have a duration of more than 0 seconds
setTimeout(() => {
// end the span using span.end()
// you can also end the transaction if you want calling tr.end()
}, 100); // just an example
}
})
The problem with this is that as I said before, the click transaction will not end until there is another transaction (given that there is no network request). So you would need to end the transaction yourself, using a timeout for instance. Although it can increase the complexity of your code a bit, if not having click transactions without a Restful request in Elastic is not a big deal, then I wouldn't do this, if it's imperative, then I would recommend being careful since you would be "tampering" with the by default behaviour of the agent.
Hope this gives you the context of why things happen (you can see that it's not a bug but a design decision for particular reasons)
Thanks,
Alberto
