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引入
<script> 标签引入方式接入 SDK（仅支持 Web 接入类型）。i. 在接入指引页面复制提供的
步骤3：查看监控数据
- 完成配置、部署应用后，刷新界面、调用接口或触发自定义的日志上报功能后，将在network 中可以看到上报接口的调用。如下：
- 通过一段时间的数据上报，可在腾讯云“前性能监控”页面中查看对应数据（日志、异常、页面访问）
5、数据如何分析
RUM 与 TAM
- TAM上未绑定RUM业务系统id的项目，每个小时限流日志上报约5w条，超过后会对全量上报进行限流，下个小时自动解除限流。https://km.woa.com/group/42893/articles/show/512416
目前TAM成本计算公式为 上报量/10000*0.0238 成本优化持续进行中
Q&A