Как отслеживать клики пользователей с помощью APM React

Question

Я использую ElasticSearch APM RUM в приложении React .

Теперь я уже интегрировал APM в маршрутизатор, так что я могу видеть route-changeсделки в Кибане .

Теперь я хочу отслеживать нажатия пользователей на определенную кнопку , например, чтобы увидеть, сколько пользователей нажимают на нее. (В документации APM React я вижу только то, как отслеживать компонент , но здесь мне нужно отслеживать щелчок .)

Мои вопросы:

1. Нужно ли мне для этого создавать транзакцию или интервал ?
2. Как я могу создать эту транзакцию / интервал вручную, не упаковывая для этого компонент?

---

Этот вопрос помогает, но не отвечает на мой вопрос, потому что, согласно документам :

Однако, чтобы избежать отправки на сервер слишком большого количества транзакций взаимодействия с пользователем, агент отбрасывает транзакции без промежутков (например, отсутствие сетевой активности).

И мой случай - это щелчок, который меняет пользовательский интерфейс.

Answer 1

Прежде всего, я думаю , вам нужно создать Сделку для этого, потому что сделка является «поток» от пользователя. Если вы хотите отслеживать его как Span , вам нужно находиться внутри активной транзакции , а у вас ее нет *.

Теперь, согласно этому документу , вам нужно создать настраиваемую транзакцию, а затем закрыть ее.

Например:

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

  originalClickAction()

  transaction.end()
}

Теперь вы можете использовать его со своим JSX, <Button text={buttonText} click={click} />

Лично я предпочитаю создавать обертку для любого кода:

      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 })

---

* Если вы хотите сказать, что находитесь в page-load/ транзакция, вы не можете. Потому что пользователь может подождать некоторое время, глядя на страницу, прежде чем щелкнуть по ней. Собственно, это можно назвать route-change потому что это не так.