2022-11-29【监控】前端性能监控
1、什么是前端监控
可以对应用运行状态监听、异常收集、性能监控、甚至对用户行为进行分析。
2、前端监控能做什么
- 页面性能分析
- 项目质量（异常上报，技术债务治理）
- 用户行为分析（主动日志上报，埋点）
3、监控产品选择
由于应用部署在腾讯云上，这里首选腾讯云产品”前端性能监控”作为前端监控工具；RUM
具有的功能
- 日志上报
前端性能监控支持开发者上报任意数据到前端监控平台，包括一般性日志、自定义事件、自定义测速等。用来满足前端开发者日志收集的诉求。 - 错误收集
前端性能监控针对浏览器执行 JS 代码报错、接口信息报错、资源加载异常、Promise 异常等报错都有 SDK 进行主动收集，开发者只需接入 SDK 就可以实现所有错误收集的功能。 - 性能数据
前端性能监控包括众多页面性能数据，其中包括首屏耗时、建立 TCP 连接耗时、TTFB 耗时和 SSL 耗时等。除此之外，最新的 webvitals（谷歌针对网页加载速度和体验所提出的一套指标） 标准已支持页面性能三大核心指标等数据，也可进行数据采集和上报。 - 页面访问
前端性能监控支持查看页面访问 PV（页面访问量）和 UV（页面独立访问量），通过运营商、访问来源和访问地域等维度，实时了解并分析用户访问情况。 - 资源测速
前端性能监控支持资源测速，包括图片加载耗时和 CDN 资源耗时等。开发者可以查看某个页面下具体使用了哪些资源，每个资源的耗时情况等信息。同时前端性能监控支持对地域信息统计，ISP 信息统计等功能。 - 接口测速
前端性能监控可通过接口测速统计页面上所有调用接口的信息，包括接口耗时和状态码统计等信息。同时前端性能监控支持对地域信息统计和 ISP 信息统计等功能。 - 智能告警
前端性能监控支持错误告警、页面耗时告警和性能数据告警等功能。
优势
多平台
前端性能监控目前支持 Web、Hippy、小程序（微信、QQ）和 React Native 等平台的数据上报，支持无打点首屏测速、资源测速、API 测速、白名单机制和离线日志等功能特性。无侵入
前端性能监控 SDK 无需在业务代码中打点或者做任何其他操作，可以做到与业务代码充分解耦。 SDK 将会自动监控前端错误，在错误发生时上报错误的具体情况，帮助您快速定位问题。当您开启资源测速时，SDK 将会自动监听页面资源加载情况（耗费时长、成功率等），并在不影响前端性能的前提下收集前端的性能数据，帮助您快速定位性能短板，提升用户体验。低成本
前端性能监控支持 Web 和小程序的前端真实体验监控服务，学习成本较低，只要您有过基础的前端知识，就可以放心的使用。
4、腾讯云前端性能监控接入
步骤 1：创建业务系统
- 登录 前端性能监控控制台。
- 在左侧菜单栏点击 应用管理>业务系统。
- 在业务系统管理页单击创建业务系统，在弹框中填写业务名称并勾选相关协议即可。
注：每日可免费上报 50 万条数据
步骤 2：接入应用
- 登录 前端性能监控控制台。
- 在左侧菜单栏中单击数据总览。
- 在数据总览页单击应用接入，配置应用信息。
- 配置完后单击下一步，参考下列说明选择一种方式安装 SDK 。
方式 1 npm 方式安装 SDK（所有应用类型均可使用该方式接入）。下列 Web 应用为例说明如何通过 npm 方式接入 SDK。
i. 在接入指引页面中复制提供的首行命令，引入 npm 包。
ii. 在接入指引页面中复制提供的代码初始化 SDK。
方式 2 cdn 引入
1 | |