0

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

现在，我已经将APM集成到了路由器中，这样我就可以在Kibanaroute-change中看到交易了。

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

我的问题是：

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

这个问题有帮助，但不能回答我的问题，因为根据文档：

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

我的情况是单击更改 UI。

4

1 回答 1

0

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

现在，根据这个文档，您需要创建一个自定义事务，然后关闭它。

例如：

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

于 2021-02-17T16:42:18.790 回答