对于大多数开发者来说，监控应用的性能并不是一个陌生的概念。在某些情况下，我们不得不自己进行一些性能调优。通常，当存在影响用户体验或影响成本的重大问题时，需要监控应用程序性能。同时，我们也需要时间来检验应用在不同场景下的表现。通常，应用程序监控以不同的方式进行。通常，应用程序由前端和后端组成。因此，监控通常是根据前端和后端的不同来处理的。前后端的监控方式不同，监控指标相同。它们是有区别的。本文将重点介绍前端性能监控和流行的监控工具。对于需要开发相关工具的小伙伴，可以借鉴这些工具的实现。什么是前端应用监控？前端监控是开发人员用来跟踪和维护应用程序表示层健康状况的过程和工具。它基本上是用户将与之交互的一切，从内容和菜单到API和其他面向前端的组件。应用程序性能监控（简称APM）关注的是用户体验，而不是服务器与前端之间的通信。虽然两者都值得关注，但了解用户如何与您的应用程序交互对于提供出色的体验至关重要。前端监控重要吗？答案是肯定的，我们使用很多不同的监控工具和技术来监控后端、数据库、内存、CPU等基础设施，前端监控也不例外。随着前端网站和应用程序的复杂性增加，监控的需求也随之增加。以前的监控只需要一天ping服务器几次就可以保证正常了。如今，这已经不够了，任何会降低网站和应用程序性能的停机、缓慢的请求等都会产生严重的后果。同时，用户对应用体验的要求也比以往更高，任何不好的体验都会给用户带来负面影响。这些性能问题可以解决吗？在衡量应用性能时，建议关注三个部分：速度在如今优越的网络环境下，速度是一个更为重要的指标。缓慢加载资源会导致瓶颈和糟糕的用户体验，因此尽快解决这些问题至关重要。那么一个好的网站应该有多快呢？用户不能接受多慢？您可以使用PageSpeed来测试您网站的加载速度。加载缓慢的页面会让用户非常沮丧，即使多一秒钟也会导致跳出率飙升，请到别处寻找解决方案。网站和应用程序应该有多快？以下是可参考的关键指标说明：小于100毫秒为瞬时；可感知100毫秒到300毫秒的延迟；一秒是用户不被打扰的极限；用户希望网站在2秒内加载；3秒后，40%的访问者会放弃你的网站；10秒是留住用户注意力的极限。客户端性能工具由于大多数新应用程序都使用JavaScript框架，例如Vue、React和AngularJS，因此如今大多数前端应用程序在浏览器上花费的时间比在服务器上花费的时间更多。这些功能丰富的前端添加了一个需要测量的新层。因此，测量在客户端本地计算机上运行的应用程序的渲染时间变得至关重要。GooglePageSpeedInsights：分析网页内容并生成建议，使您的页面加载速度更快。减少页面加载时间可降低跳出率并增加转化率。GoogleLighthouse：是一种用于提高网页质量的开源自动化工具。您的前端开发人员至少应使用GoogleChrome工具中提供的Lighthouse指标。Sitespeed.io：一种开源工具，可根据性能最佳实践和计时指标分析网站速度和性能。可以分析一个站点，也可以分析比较多个站点。团队并不总是能够修改应用程序以优化客户端性能。幸运的是，Google提供了ngx_pagespeed和mod_pagespeed作为Web服务器扩展，可以在不修改代码的情况下自动提高性能。下面是谷歌对这两个扩展的使用：谷歌ngx_pagespeed可以加快网站速度并减少页面加载时间。这个开源nginx服务器模块自动将Web性能最佳实践应用于Pagespeed工具的页面和相关资产（CSS、JavaScript、图像），而无需修改现有内容或工作流程。Googlemod_pagespeed可加快您的网站速度并减少页面加载时间。这个开源ApacheHTTP服务器模块自动将Web性能最佳实践应用于页面和相关资产（CSS、JavaScript、图像），无需您修改现有内容或工作流程。WebPagetest.org提供了对各种真实世界浏览器中客户端性能的深入洞察。这个工具可以在任何浏览器、任何地方、任何网络条件下测试网页，而且是免费的。错误和功能我们在这里讨论的不是像404或503这样的明显错误。这是一种不太明显的错误，例如第三方API在应该发送HTTPS请求时拒绝连接或发送HTTP请求。这些问题可能会导致严重的服务中断，从而破坏用户体验。当你的网站或应用遇到问题时，无论是JavaScript错误、网络故障，还是特定的框架问题，有一个工具会提醒你，让你更好地优化网站或应用。使用能够进行日志管理的工具，例如SematextLogs，会发现更容易识别和修复遇到的问题。虽然有些问题可以使用控制台日志中提供的信息来解决，但有些问题并不那么容易解决。在某些情况下，日志只会有一个位置，但更多的时候，日志会在不同的位置，具有不同的时间戳，并且可能具有不同的冗余度，这会使调试变得非常复杂。拥有一个可以存储、存档和控制日志质量的工具对于了解全局至关重要。可以使用单独的解决方案，但在单个平台上进行日志记录和监控可以更快、更轻松地解决关键问题。易用性在这里不是说的很明显，而是网站要上线，要为用户提供正常的功能，易用性是非常重要的，尤其是当平台已经发展到足够大的层次，在全球范围内拥有更多用户的时候。深入了解用户如何体验网站非常有帮助，这需要工具来监控真实用户的体验。一个真正的用户监控工具将跟踪用户在应用程序中的进度，提供有关他们如何与应用程序交互以及他们将获得什么样的响应的信息。基于这些UX指标，它将能够决定是否需要更快的机器、更好的可扩展性或必须优化业务逻辑。监控应用程序和网站性能的最佳工具1.AppSignalAppSignal提供对前端和后台作业性能的洞察、主机监控??、错误跟踪以及允许从应用程序收集指标的工具。通过可轻松自定义的仪表板密切关注负载大小、数据库查询、收入等。使用轻量级Rust驱动的代理，AppSignal易于安装。它监视应用程序的性能并显示它记录的操作的简单分解以及与之相关的指标。您可以查看有关CPU使用率、内存分配和网络信息的详细信息，以及显示有关您的代码实际执行的详细信息的事件时间线。这有助于了解应用程序的哪个部分正在影响性能以及哪些区域需要改进。它还有一个异常检测系统，能够预先构建警报，当事情没有按预期工作时触发。当您刚开始并不确定要寻找什么时，或者当您负载很重并且有太多事情需要跟踪时，这很有用。虽然AppSignal易于使用和实施，但它缺乏高级日志记录和基础设施监控，这会产生一些大问题。能够看到所有前端性能细节，但其中一半是空白的。AppSignal有30天的试用期和简单的定价，根据250,000次请求，每月19美元起，如果25亿次请求，每月2,500美元，最高可达2,249美元。特点：异常检测开箱即用的警报易于安装简单定价2.SentrySentry为项目团队提供工具来检测和解决影响用户体验的错误和其他问题。它是开源且完全免费的，具有与付费版本相同的优势。它已在《浅谈前端异常监控平台实现方案》中介绍过。Sentry会在您的应用程序崩溃或运行太慢时告诉您，以及您的应用程序的性能如何，让您深入了解需要注意的区域。除了修复错误之外，您还可以修复最终导致错误的问题。特点：易于安装利用Google的Web元素提供有关性能的详细信息交易跟踪3.Site24x7Site24x7是查看应用程序或项目在现实世界中的表现的另一种方式。作为可用性和用户体验监控解决方案，Site24x7提供了许多简洁的功能，如服务器监控、云管理、RUM等。在前端性能监控方面，Site24x7有一个Web部分，可以在其中创建网站或API的监控器。这些监视器将对您所需的资源执行ping操作，以收集可用性、响应时间、停机时间等数据。Site24x7还将在RESTAPI部分跟踪SLA合规性，这将派上用场。该视图按位置显示可用性和响应的细分、过去24小时内发生的所有故障的历史记录，以及吞吐量和响应时间的详细信息。除此之外，Site24x7还监控SSL和TLS证书以及域过期，并在其中一个证书过期或出现问题时通知您。Site24x7提供30天试用期，无需信用卡，还有四种计划，起价为10美元，最高可达每月499美元。特点：一体化监控解决方案全面的API交易监控真实用户监控工具4.PingdomPingdom是一个正常运行时间监控服务，具有多种功能，包括SSL监控、正常运行时间监控和真实用户监控等。借助灵活的警报系统，Pingdom会在服务中断或降级时通知您。正常运行时间监控视图将深入了解页面或资源完全加载所需的时间。如果发生错误，将有可能使用他们的事件报告管理器深入研究事务以找到问题的根本原因。在这种情况下，traceroute非常有用。关于性能报告，只要您需要网站的详细信息（例如加载时间、页面大小、请求ID和性能分数），请使用“页面速度”部分，它简单地描绘了整体性能的图片。最有用的功能之一是瀑布图，它在时间轴上显示所有资产，因此很容易看出需要优化的地方和内容。Pingdom有14天的试用期，其Pro计划起价为每月15美元的ComprehensiveMonitoring，其中包括10个正常运行时间监视器、1个高级监视器和50条SMS通知，而其真实用户监控服务为每月15美元（每100K页）意见）。特点：简单定价真实用户监控工具SMS和电子邮件通知可自定义的警报结论重要的是要承认，在构建网站或应用程序时，性能不是一次性检查清单上的事情。把它做好需要时间和努力，而且这是一个持续的过程。监控前端性能需要特殊工具来确保用户获得24×7的最佳体验。
