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

编程问答 2022-05-25

问题描述

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

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

现在我想跟踪用户点击特定按钮，例如，查看有多少用户点击它。 （在APM React docs中，我只能看到如何跟踪组件，但在这里我需要跟踪点击。）

我的问题是：

  1. 我是否需要为此创建交易或跨度？
  2. 如何手动创建此事务/跨度，而不为此包装组件？

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，因为它不是。

apmelastic-apmelasticsearchelasticsearchreactjsreactjsreactjsreactjsrum