如何解决如何使用 APM React 监控用户点击
我在 React 应用程序中使用 ElasticSearch APM RUM。
现在,我已经将 APM 集成到路由器中,以便我可以在 Kibana 中看到 route-change
事务。
现在我想跟踪用户点击特定按钮,例如,查看有多少用户点击它。 (在APM React docs中,我只能看到如何跟踪组件,但在这里我需要跟踪点击。)
我的问题是:
- 我是否需要为此创建交易或跨度?
- 如何手动创建此事务/跨度,而不为此包装组件?
This question 帮助但没有回答我的问题,因为根据 docs:
然而,为了避免向服务器发送过多的用户交互交易,代理会丢弃没有跨度的交易(例如,没有网络活动)
我的例子是改变用户界面的点击。
解决方法
首先,我认为您需要为此创建一个交易,因为交易是用户的“流程”。如果您想将其作为跨度进行跟踪,您需要在活动交易中,并且您没有*。
现在,根据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
,因为它不是。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。