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

Question

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

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

现在我想跟踪用户在特定按钮上的点击，以查看有多少用户点击它。(在APM React文档中，我只能看到如何在组件上跟踪，但是这里我需要跟踪，点击)

我的问题是

1. 我需要创建一个事务吗跨度或呢?
2. 如何创建事务跨度/手动，不包装组件吗?

---

这个问题有帮助，但没有回答我的问题，因为根据文档:

然而，为了避免向服务器发送过多的用户交互事务，代理丢弃没有跨度的事务(例如，没有网络活动)

我的例子是点击改变UI

Answer 1

首先，我认为您需要创建一个事务因为Transaction是一个"流"用户的。如果你想跟踪它为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事务中，你不能。因为用户在点击页面之前可能会等待一段时间查看页面。实际上，您可以将其称为route-change，因为它不是。