我想知道是否有任何实用程序/模式/范式/标准来监视生产中的 React 应用程序。
我看过很多关于 React 性能调试的文档，这些文档推荐 Chrome 开发工具(这很棒，但不是监控最终用户性能的被动方式)
如何记录数据以了解用户等待组件挂载或渲染的时间？
到目前为止，我唯一想到的是创建一个扩展React.[Pure]ComponentLoggable[Pure]Component，其构造函数、componentWillMount/Update和componentDidMount/Update方法将渲染/挂载时间记录到服务器。然后，我要监视的组件可以扩展这些组件，如果需要，可以在执行自己的工作之前在生命周期方法中调用super()。为了具体知道这些指标转到哪些组件，我必须在Loggable[Pure]Component类中公开一个方法，该方法执行一些愚蠢的操作，例如setUniqueId然后每个派生类都必须在构造函数中调用它。
这一切看起来都很糟糕，我非常希望人们已经实现了一些东西，但到目前为止我还没有找到任何东西。
我会看看一些APM工具，它们处理前端监控，以及后端监控。它们都支持反应，人们一直在该用例中使用它们。这真的取决于您在监控中的目标，您这样做是为了好玩吗？你有创业公司吗？您是否在为大型企业工作？这个市场有3个主要参与者。
AppDynamics - Enterprise APM，处理最复杂的应用程序。 提供 SaaS 或本地交付的统一产品。具有深度的数据库、服务器和其他监控。 Dynatrace - Enterprise APM，可以很好地处理复杂的应用程序。分散的投资组合，但SaaS产品很好。SaaS产品在某些方面的深度有限。很好地处理服务器和云基础架构监控。 新遗物 - 简单且便宜(比其他选项更便宜)，不像其他一些选项那样深入。往往在小公司中很受欢迎。做好监控云基础设施服务的工作。
这些产品都可以满足您的需求，但这取决于您对数据的目标以及您计划如何分析数据。
如果你想要一些免费且功能较少的东西，有一些方法可以通过开源来做到这一点，但你必须站起来管理一个相当复杂的堆栈。这是一个选项。
查看回旋镖，它可以记录/提取您正在寻找的指标，它不会"理解"反应，但它应该可以工作。这些数据可以发布到许多不同的系统。最适合的可能是 ELK 堆栈(开源日志分析等)。以下是将这两者结合在一起以提供浏览器性能分析的几个示例之一 https://github.com/naukri-engineering/NewMonk