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

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

Я уже интегрировал APM в маршрутизатор, чтобы видеть route-change транзакции в Kibana.

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

Мои вопросы:

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

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

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

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


reactjs apm elastic-apm rum
person baruchiro    schedule 17.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

Например:

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

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

person baruchiro    schedule 17.02.2021