被动记录生产中的 React 应用程序性能

Question

我想知道是否有任何实用程序/模式/范式/标准用于监控生产中的 React 应用程序。

我看过很多关于 React 性能调试的文档，推荐使用 Chrome 开发工具（这些工具很棒，但不是监控最终用户性能的被动方式）

我如何记录数据以了解用户等待组件挂载或渲染的时间？

到目前为止，我唯一想到的是创建一个扩展React.[Pure]Component 的Loggable[Pure]Component，其构造函数componentWillMount/Update 和componentDidMount/Update 方法将渲染/装载时间记录到服务器。然后，我要监控的组件可以扩展这些组件，如果需要，在生命周期方法中调用super()，然后再进行自己的工作。要具体了解这些指标属于哪些组件，我必须在 Loggable[Pure]Component 类中公开一个方法，该方法执行类似 setUniqueId 之类的愚蠢操作，然后每个派生类都必须在构造函数中调用它。

这一切看起来都很糟糕，我非常希望人们已经实现了一些东西，但到目前为止我还没有发现任何东西。

Answer 1

我会看看一些 APM 工具，它们处理前端监控和后端监控。他们都支持反应，人们一直在用这些用例。这真的取决于你在监控中的目标，你这样做是为了好玩吗？你有创业公司吗？您在为大型企业工作吗？这个市场有3个主要参与者。

AppDynamics - 企业 APM，处理最复杂的应用程序。统一的产品提供 SaaS 或本地交付。具有深度数据库、服务器和其他监控。 Dynatrace - 企业 APM，可以很好地处理复杂的应用程序。分散的产品组合，但 SaaS 产品很好。 SaaS 产品在某些方面的深度有限。很好地处理服务器和云基础设施监控。 New Relic - 简单且便宜（比其他选项），不像其他选项那么深入。往往受到小公司的欢迎。可以很好地监控云基础设施服务。

这些产品都能满足您的需求，但这取决于您对数据的目标以及您计划如何分析数据。

如果您想要一些免费且功能较少的东西，可以使用开源实现此目的，但您必须站起来管理一个相当复杂的堆栈。这是一种选择。

查看boomerang，它可以记录/提取您正在寻找的指标，它不会“理解”反应，但它应该可以工作。这些数据可以发布到许多不同的系统。最适合的可能是 ELK 堆栈（开源日志分析等）。这是将这两者结合在一起以提供浏览器性能分析的几个示例之一https://github.com/naukri-engineering/NewMonk