第五期|前端搞监控：开发的角度去理解监控和埋点，多端错误监控实现

自述

先说一下此次大会很长，我最后两场没听了。不过比较劲爆的是知道了阿里的钉钉是用的c++的框架开发的。果真前端作客户端方面仍是有所欠缺啊。前端

此次大会是8场，从早上10点到下午6点。分别有node

我我的听的迷迷糊糊，其中我记得贝贝集团讲的很是干货。几乎是纯技术角度分享了本身遇到的问题。我我的对此次大会主要是一个我的总结。mysql

记得比较惨痛的是公里网面试的时候问我埋点。唉，那会仍是太年轻react

这个大哥的文章很不错，比我有看法：https://juejin.im/post/5ea4dc1ee51d4546c72e2eceios

1、为何须要监控和埋点

首先为何咱们须要埋点和监控？能带来什么好处？解决什么业务痛点？c++

一、技术不难

首先我必须声明一下，初级的监控这块其实你们都会写。说的简单点，无非就是全局监控error和代码侵入式的监控。因此从技术难点上，监控的技术难点不大。面试

二、请思考大家的业务

首先C端这块其实在代码监控上也许不是很是迫切，可是埋点应该是比较须要的。sql

好处：监控用户行为，进行数据分析，加速卖货，引导客户等等，等等数据库

B端：对于用户的行为分析意义也许不大，可是B端更追求稳定，因此错误监控方面更加须要redux

这些都是我我的比较片面的一些理解

三、ppt实例参考

我的看法有限，我放点截图让你们发散下思惟

2、该如何设计监控，你须要什么数据

在明确业务场景以后，那么就该开始设计你的数据结构和须要的数据了

首先我我的其实在C端经历了三年，从软件实施到前端开发，C端是我比较熟悉的

一、设计举例

我须要什么数据，从常规的C端需求出发。设想我是一个产品，我如今须要一个数据分析收集系统，获得数据进行后期的分析使用

从常规出发，页面点击量，停留时间，访问人次，用户的操做流程，谁访问了，用户地区等等。我发一张截图

对你的数据进行分级

二、数据结构体

这里我仍是偷懒用一下政采云上面的ppt图片

感受他们的格式很是好

2、你该怎么上报你的数据（埋点）

一、请求用img的src进行请求数据上报

为什么用 1x1 像素的 gif 图

一、没有跨域问题

二、发 GET 请求以后不须要获取和处理数据、服务器也不须要发送数据

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

四、不会阻塞页面加载，影响用户的体验，只需 new Image 对象

五、相比于 BMP/PNG 体积最⼩小，能够节约 41% / 35% 的网络资源大小

注意：埋点也许是有差别的，可是从错误监控等等方面，这样是没什么问题的

二、事件拦截和代理

事件拦截：委托到dom上面，利用img进行上报数据，navigator.sendBeacon方法

mousedown，touch，scroll，keydown

页面进入离开：onload，berorOnLoad

这块是埋点部分，一般能收集到用户的操做行为，页面停留时间，离开等等

navigator.sendBeacon会有兼容问题，因此是作兼容性处理，具体我忘了。你们百度吧

3、错误监控（SDK）宋小菜

写到这里我感受有点能力不足了，实在是埋点和错误监控方面不仅是纯粹的技术，和业务是很是紧密相关的。下面我会对ppt里面的各路大神提供的错误监控代码进行copy总结

一、RNSDK（reactNative）（宋小菜：Jimmy）

JS 端

• 错误捕获

• ErrorUtils.setGlobalHandler 相似于 window.onerror

• Promise.rejectionTracking 相似于 Unhandledrejection

• ⽹网络请求：替换 XMLHttpRequest，代理理其 send/open/onload 等方法

• ⻚页⾯面跳转：react-navigation 的 onStateChange 或者在 redux 集成方式中使用 screenTracking

• Native 端

• iOS 使⽤用 KSCrash 进⾏行行⽇日志采集，能够本地进⾏行行符号化
• 存储捕获到的数据（包括 JS 端和 native 端）统⼀一上报

const tracking = require("promise/setimmediate/rejection-tracking");
tracking.disable();
tracking.enable({
allRejections: true,
onHandled: () => {
// We do nothing
},
onUnhandled: (id: any, error: any) => {
const stack = computeStackTrace(error);
stack.mechanism = 'unhandledrejection';
stack.data = {
id
}
// tslint:disable-next-line: strict-type-predicates
if (!stack.stack) {
stack.stack = [];
}
Col.trackError(stringifyMsg(stack))
}
});复制代码

二、小程序（宋小菜）

• 网络请求: 代理全局对象 wx 的 wx.request ⽅方法

• ⻚面跳转: 覆写 Page 对象，代理其生命周期方法

import "miniprogram-api-typings"
export const wrapRequest = () => {
const originRequest = wx.request;
wx.request = function(...args: any[]): WechatMiniprogram.RequestTask {
// get request data
return originRequest.apply(this, ...args);
//
}
}复制代码

三、小程序SDK实现（宋小菜）

/* global Page Component */
function captureOnLoad(args) {
console.log('do what you want to do', args)
}
function captureOnShow(args) {
console.log('do what you want to do', args)
}
function colProxy(target, method, customMethod) {
const originMethod = target[method]
if(target[method]){
target[method] = function() {
customMethod(…arguments)
originMethod.apply(this, arguments)
}
}
}复制代码

// Page
const originalPage = Page
Page = function (opt) {
colProxy(opt.methods, 'onLoad', captureOnLoad)
colProxy(opt.methods, 'onShow', captureOnShow)
originalPage.apply(this, arguments)
}
// Component
const originalComponent = Component
Component = function (opt) {
colProxy(opt.methods, 'onLoad', captureOnLoad)
colProxy(opt.methods, 'onShow', captureOnShow)
originalComponent.apply(this, arguments)
}复制代码

4、错误监控：贝贝集团：Allan：《React+Redux前端开发实战》做者

贝贝集团很是的干货，这里贴一下，所面临的的环境是具备很是多的端，80+工程项目。

下面都是我ppt里面原本来本摘抄下来，而且加上我的部分我的理解。主要是贝贝集团的分享太干货了。

直接从错误捕获说吧

一、错误捕获机制

• window.onerror：运行时错误捕获

• window.addEventListener(‘unhandledrejection’)：promise 没有 catch 错误

• try/catch 处理跨域脚本错误

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

• window.addEventListener(‘error’)：资源加载错误

• … …

二、监听window.onerror

当发⽣生 JavaScript 运行时错误（包括处理程序中引起的语法错误和异常）时，使⽤接口 ErrorEvent 的 error 事件将在 window 被触发，并被 window.onerror() 调用

三、监听 unhandledrejection 事件

当 Promise 被 reject 而且没有获得处理的时候，会触发 unhandledrejection 事件。因此能够对此事件进行监听，将错误信息捕获上报。

四、跨域脚本错误：Script error.

【方案1】：后端配置 Access-Control-Allow-origin、前端在 script 标签配置 crossorigin 【方案2】：劫持原⽣方法，使⽤用 try/catch 绕过，将错误抛出

使用的是方案2：好处是不会直接报错，能够经过try/catch方式捕获错误，而且不会影响js的运行。我我的在代码编辑处理的时候也很是推荐。这个方式仍是写eggjs的时候学过来的。配合primose方式能大大简化代码

五、其它技术栈——Vue.js

劫持 Vue.config.errorHandler （errorCaptured），当 Vue 的项目中发生错误时，将错误捕获上报

六、其它技术栈——React.js

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

七、用户行为收集

这里其实很简单，不少时候错误的产品是须要复现方式的。就像咱们开发的时候测试会给你复现方式。若是你不知道什么缘由产品的bug，那么你也没法正对性的去修复问题。也许修复了bug，反而致使系统崩溃了呢？

用户行为方面咱们能够分为：用户行为，浏览器行为，控制台打印行为

针对的咱们能够下面这样作

【1】点击行为（用户行为）

使用 addEventListener 全局监听点击事件，将用户行为（click、input）和 dom 元素名字收集。当错误发生将错误和行为一块儿上报。

【2】发送请求行为（浏览器器行为）

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

【3】页面跳转（浏览器器行为）

监听 window.onpopstate，页面跳转的时会触发此方法，将信息收集

【4】控制台打印（控制台行为）

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

5、错误或者埋点数据的处理

这里比较关键，就不怎么贴ppt了。并且仍是有一点我的理解的

一、埋点

埋点属于业务分析行为，更多的是基于业务自己方向进行数据分析。

埋点的关键是保证你的数据是一个连贯额闭环，可以充分的分析出用户从进入到离开页面所产生的一系列用户行为。

政采云团队在作的时候基本上作到了每一个按钮都会进行埋点。

最后会生成一个热力分析图。（至关牛逼）来标识页面中高频操做的地方

二、错误监控存储

这块是重点讲解部分

首先我在参与视频学习的过程当中了解到几个点

一、ES（elasticsearch）

下面说明来自简书：elasticsearch简写es，es是一个高扩展、开源的全文检索和分析引擎，它能够准实时地快速存储、搜索、分析海量的数据。

简单来讲就像是一个百度搜索引擎，快速准确

主要理解点：

为何要用ES，由于他是全文索引的，效率很是快，可是mysql差了不少。

ES用来作数据一次处理，不做为长期存储，通常只会存留一个月的数据

二、数据库存储（MySQl）

当前期数据处理完成以后再进行存入数据库，后续进行分析处理

三、存储流程

错误上报——数据清洗——数据持久化——数据可视化——监控告警

四、关于数据清洗

关键在于分析数据，提取聚合重复错误，整理为更小的数据，而后存储

同时也是为了减少服务器压力，提供中转站。

好比：贝贝和阿里钉钉都提到了须要对数据进行削峰处理，这个你们字面意思应该就能理解

贝贝集团的处理方式是：

一、每分钟处理一次

二、每分钟获取数据10000条：超过就采样入库

三、同类型错误大于200条只记录数量

四、处理无用的信息等等（上传的数据由于是须要进行string处理，会出现乱码或者无心义的字符）

核心就是：剔除重复，留下惟一

五、告警

告警的目的是可以快速通知负责人，对系统进行修复处理。同时告警，你们须要根据错误的状况进行分析，归类。如：通常错误，功能错误，页面错误，系统错误等等的一个升级过程

好比：通常错误，功能错误能够发送工做群，邮件

可是系统级别错误那么就是发短信了

6、其余端的一个错误捕获处理

这里主要是摘抄自贝贝集团的ppt，基本上是截图

一、node错误监控

一、初始化

node启动的时候，须要获取当前node一个初始id等信息。若是是集群化处理那么好比贝贝集团的状况ZooKeeper里面去获取对应的业务 id 实现天网的初始化

二、错误捕获机制

Node 端使⽤用 process 对象监听 uncaughtException、unhandledRejection 事件，捕获未处理理的 JS 异常和 Promise 异常

三、错误信息收集

捕获到错误对象后，使⽤了第三方库 stack- trace 进行解析，该库会将错误堆栈解析成数组并获取堆栈调用链路路中应用内文件的源码。

主要是用第三方库实现错误信息的一个可视化展现

二、weex错误监控

一、多端兼容

1）Weex 工程打包有两套 Webpack 配置，但业务中统一引用的是 @weex/skynet

2）针对 Web 端打包的时候使用 replace-loader 这个 loader 将包替换为 @fe-base/skynet

二、错误捕获

1）前端为客户端提供业务的模块名

2）经过 hybrid 接口将模块名传给客户端

3）客户端在捕获到 weex 的错误发生时上报

三、小程序监控

小程序监控我不截图了。写太多了。我直接总结

首先小程序的app启动的时候有一个错误捕获函数：onError，经过这个能捕获全局存在的错误

而后由于是C端，你须要获取当前启动的小程序的一个惟一id，除了appid以外就是和用户信息有关的id，做为记录，而后上报为本次的一个错误记录起始。

四、客户端监控

一、Android错误上报机制

使用系统提供的机制，实现 Thread.UncaughtExceptionHandler 接口，经过 uncaughtException 方法获取崩溃错误信息，在应用初始化时替换掉默认的崩溃回调

为⽅方便便前端开发理理解：

• uncaughtException：可类比为前端的 window.onerror

• Thread.UncaughtExceptionHandler: 回调函数

二、ios错误监控

使用系统提供的错误捕获机制，注册了了 Objective-C 异常和 POSIX signal 的处理理钩子，在发生崩溃的时候能够经过钩子函数记录崩溃的信息。在下次 App 启动时将错误上报。

五、吐槽

贝贝集团的我就差直接把ppt发出来了。感受太多能够学习的了。知识面设计很是广。你们能理解，就多理解下吧

七、总结自述

其实我以为最重要的是错误的分析，和总结部分。

由于那都是别人踩过的坑。可是我我的自己没有作过这块。只能以技术角度去怎么实现监控这块入手。

当之后我本身作了那么我想我会回过来翻翻。

这里致歉下：本次文章基本是抄袭为主，我的理解有限。

一方面是我的知识面不够，还有一方面也是各位老师对于而已高了点。就像好高骛远，可是基础不牢，望而却步

弄个小目标：写一个自动监控函数，实现前端这块的基本数据监控方式，就像那些非侵入式的代码方式

致谢

前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会，计划 2020 年办 >= 15 期，由前端早早聊与掘金联合举办，前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注「前端早早聊」公众号跟进。

5 月 16 日举办第六届 - 前端到底怎么玩 Serverless(Paas|Faas)，报名请戳：huodongxing.com/go/tl6，海报及讲师行程以下：

看完如有启发，点个赞吧