2020.4.25 前端如何搞监控

1. 场景

在前端开发中，你是否存在一下以下困惑？例如：

1. 产品上线后，有没有人用，用的怎么样？

2. PC/H5/小程序/App的线上产品异常到底如何？

3.用户的报错在本地很难还原场景，有什么好的定位方法，怎么去跟踪？

4.如何分析解决线上问题，并提供相应的决策呢？

2. 监控步骤

根据业务，监控可分为两种场景：

1.营销类，分析用户行为，简称为行为监控

2.系统错误监控，简称为异常监控

3.性能监控

2.1 行为监控

为什么要做用户行为监控？通过用户行为监控，可以提高产品转化率,在营销服务可以

量化营销数据，精准运营策略，细分用户人群，量化用户收益

在客户服务可以平台迭代数据抓手，降低咨询量，解决高频问题，提升用户满意度

2.1.1行为监控分为以下步骤

1.埋点：

埋点是数据分析的准备工作，只有埋点了才会采集对应的数据用来分析

2.采集

采集是将埋点产生的日记统一采集到服务器，包括用户行为和各种属性数据

3.计算

计算是将采集到的数据进行统一的加工、汇总按照各种维度产出对应的指标供分析使用

4.分析

了解大盘，发现问题，定位原因，制定策略

2.1.2采集

用户行为数据主要包含用户页面操作，页面跳转，网络请求，自定义事件，控制台输出

采集数据可以分为以下几类：

进入：

进入页面时，自动触发

离开：离开页面时，自动触发

点击：用户在页面手动触发的操作，例如点击按钮

滚屏：滚动网页屏幕

自定义

2.1.3 计算

2.1.4分析

3.异常监控

3.1错误异常

1.后台接口错误

2.前端js错误

3.App Native错误

RN SDK

微信小程序SDK

网络请求：代理全局wx的wx.request对象

页面跳转：覆写page对象，代理生命周期的方法

微信小程序SDK实现

React端：监听componentDidCatch,当React的项目发生错误时，将错误捕获上报

3.2流程实现

3.2.1 SDK如何实现

错误捕获机制

window.onerror：

运⾏时错误捕获,当发⽣JavaScript运⾏时错误（包括处理程序中引发的语法错误和异常）时，使⽤接⼝，

ErrorEvent的error事件将在window被触发，并被window.onerror()调⽤

window.addEventListener(‘error’)：

资源加载错误

window.addEventListener(‘unhandledrejection’)：

promise没有catch错误，当Promise被reject

并且没有得到处理的时候，会触发unhandledrejection事件。所以可以对此事件进⾏监听，将错误信息捕获上报。

try/catch

处理跨域脚本错误

其他技术栈中（Vue、React）的错误捕获

环境收集

行为收集

用户行为：点击行为

使⽤addEventListener全局监听点击事件，将⽤户⾏为（click、input）和dom元素名字收集。捕获到啦~当错误发⽣将错误和⾏为⼀起上报。

浏览器行为：

1.发起请求

监听XMLHttpRequest对象的onreadystatechange回调函数，在回调函数执⾏时收集数据。

2.页面跳转

监听window.onpopstate，⻚⾯跳转的时会触发此⽅法，将信息收集。

控制台打印行为

改写console对象的info、warn、error⽅法，在console执⾏时将信息收集。

数据上报

Q：为什么⽤1x1像素的gif图？

1、没有跨域问题

2、发GET请求之后不需要获取和处理数据、服务器也不需要发送数据

3、不会携带当前域名cookie！

4、不会阻塞⻚⾯加载，影响⽤户的体验，只需new Image对象

5、相⽐于BMP/PNG体积最⼩，可以节约41% / 35%的⽹络资源⼩

数据清洗

数据特征：

1.数据量⼤、体积⼤

2.没有分类、聚合

3.没有对⾮法数据进⾏过滤

清洗流程：

获取数据：

1.通过GET请求从ES获取近⼀分钟的错误信息（右图）

2.设置阈值（削峰机制）：每分钟数据获取上限10000条，超过就采样⼊库同类型错误数量⼤于200，只统计数量

数据预处理：

1. String格式数据需要JSON.parse()

2.去除原始数据⾥⽆⽤信息，减⼩存储体积

数据聚合：

1.存储性能：存储⼩

2.查询性能：查询快

监控：

告警模式：⾃定义告警⽅式可拓展钉钉、邮箱?、电话☎、短信等

总结：通过监听/劫持这些原始方法，获取需要上报的数据，在错误触发函数使用GIF上报，从而实现数据的上报。

1.可视化展示

2.构建SDK

3.两种脚本：

清洗脚本（从ES拉取数据清洗）、告警任务

4.数据持久化Mysql

5.对SDK不断拓展，实现跨平台/跨端监控

4. 总结

今天的直播收获满满的，之前一直没有怎么接触过前端监控方面的知识点，从这次的直播中，我深刻的认识到了监控的重要性，监控的三大业务场景用户行为、错误监控、性能监控，其中错误监控这一块我是比较关注的，因为之前接触的开发的小程序中，腾讯那里是有提供错误监控的，每当小程序有报错都会提交到小程序管理端，这个对于开发人员是很方便的追踪错误的，从而提升用户的体验。当时就想尝试下为现有的项目做一套错误监控，但由于不知从何下手，便选择了放弃。经过这次的直播，心里有了个方向。

从监控的埋点、采集、数据分析以及监控方案的设计等一系列的过程，这过程中都感觉收益匪浅。特别是贝贝集团的Allan讲师，讲的非常的详细，每一步都分析的很透，当然，其他讲师也讲得特别好，并且分析得很透切，解决方案方案都很出色，由于内容过多，我就不说那么多了。后面我还需自己去深入的了解监控方面的知识，同时针对用户行为、性能这些方面，我也会全方面的去考虑，去尝试讲师对应的方案。将所学到的知识点融合到项目当中。只有通过不断的学习，才能提高自己。

5. 关于前端早早聊大会

关于前端早早聊大会：前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会，计划

2020年办>= 15期，由前端早早聊与掘金联合举办，前端早早聊大会行程动态、录播视频

/PPT/讲稿资料下载请关注「前端早早聊」公众号跟进。5月16日举办第六届-前端到底怎么玩

Serverless(Paas|Faas)，报名请戳：huodongxing.com/go/tl6，海报及讲师行程如下：

第五期 | 前端监控怎样做？