如何使用 APM React 监控用户点击

Question

我在 React 应用程序中使用 ElasticSearch APM RUM。

现在，我已经将 APM 集成到路由器中，这样我就可以在 Kibana 中看到 route-change 事务了。

现在我想跟踪用户对特定按钮的点击，例如查看有多少用户点击了该按钮。 （在APM React docs，我只能看到如何跟踪on component，但这里我需要跟踪on click。）

我的问题是：

1. 我需要为此创建 Transaction 或 Span 吗？
2. 如何手动创建此 Transaction/Span，而不为此包装组件？

---

This question 帮助但没有回答我的问题，因为根据docs：

但是，为了避免向服务器发送过多的用户交互事务，代理会丢弃没有跨度的事务（例如，没有网络活动）

而我的情况是点击更改 UI。

Answer 1

首先，我认为您需要为此创建一个Transaction，因为Transaction 是用户的“流”。如果您想将其跟踪为 Span，则需要处于 活动交易 中，而您没有*。

现在，根据this doc，你需要创建一个自定义事务，然后关闭它。

例如：

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 事务中，你不能。因为用户可能会等待一段时间，查看页面，然后单击它。其实你可以叫它route-change，因为它不是。