How to monitor user clicks with APM React

Question

I'm using ElasticSearch APM RUM in a React application.

Now, I already integrated the APM to the router, so that I can see the route-change transactions in Kibana.

Now I want to track user clicks on a specific button, to see, for example, how many users click on it. (In the APM React docs, I can see only how to track on component, but here I need to track on click.)

My questions are:

Do I need to create a Transaction or Span for that?
How can I create this Transaction/Span manually, without wrapping a component for that?

This question helps but not answering my question, because according to the docs:

However, to avoid sending too many user-interaction transactions to the server, the agent discards transactions with no spans (e.g. no network activity)

And my case is a click that changing the UI.

baruchiro baruchiro · Accepted Answer · 2021-02-17T16:42:18

First of all, I think you need to create a Transaction for that, because Transaction is a "flow" of the user. If you want to track it as Span, you need to be inside an active Transaction, and you don't have one*.

Now, according to this doc, you need to create a custom transaction, then close it.

For example:

const click = () => {
  const transaction = apm.startTransaction('UserClicked', 'custom')
  transaction.addLabels({ buttonText })

  originalClickAction()

  transaction.end()
}

Now you can use it with your JSX, <Button text={buttonText} click={click} />

Personally, I prefer to create wrapper for any code:

export const monitor = (eventName, action, labels) => {
  const transaction = apm.startTransaction(eventName, 'custom')
  if (labels) transaction.addLabels(labels)

  return Promise.resolve(action(transaction))
    .finally(() => transaction.end())

}

// Usage

const click = () => monitor('UserClicked', originalClickAction, { buttonText })

* If you want to say that you are in the page-load/route-change transaction, you can't. Because the user might wait a while, looking on the page, before clicking on it. Actually, you can call it route-change because it is not.

How to monitor user clicks with APM React

1 Answers