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

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))
}
});

2、小程序（宋小菜）

• 网络请求: 代理全局对象 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);
//
}
}

3、小程序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)
}

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

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

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

直接从错误捕获说吧

1、错误捕获机制

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

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

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

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

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

• … …

2、监听window.onerror

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

3、监听 unhandledrejection 事件

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

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

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

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

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

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

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

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

7、用户行为收集

这里其实很简单，很多时候错误的产品是需要复现方式的。就像我们开发的时候测试会给你复现方式。如果你不知道什么原因产品的bug，那么你也无法正对性的去修复问题。也许修复了bug，反而导致系统崩溃了呢？

用户行为方面我们可以分为：用户行为，浏览器行为，控制台打印行为

针对的我们可以下面这样做

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

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

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

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

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

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

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

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

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

这里比较关键，就不怎么贴ppt了。而且还是有一点个人理解的

1、埋点

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

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

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

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

2、错误监控存储

这块是重点讲解部分

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

1、ES（elasticsearch）

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

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

主要理解点：

为什么要用ES，因为他是全文索引的，效率非常快，但是mysql差了很多。

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

2、数据库存储（MySQl）

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

3、存储流程

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

4、关于数据清洗

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

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

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

贝贝集团的处理方式是：

1、每分钟处理一次

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

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

4、处理无用的信息等等（上传的数据因为是需要进行string处理，会出现乱码或者无意义的字符）

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

5、告警

告警的目的是能够快速通知负责人，对系统进行修复处理。同时告警，大家需要根据错误的情况进行分析，归类。如：一般错误，功能错误，页面错误，系统错误等等的一个升级过程

比如：一般错误，功能错误可以发送工作群，邮件

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

六、其他端的一个错误捕获处理

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

1、node错误监控

1、初始化

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

2、错误捕获机制

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

3、错误信息收集

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

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

2、weex错误监控

1、多端兼容

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

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

2、错误捕获

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

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

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

3、小程序监控

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

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

然后因为是C端，你需要获取当前启动的小程序的一个唯一id，除了appid之外就是和用户信息有关的id，作为记录，然后上报为本次的一个错误记录起始。

4、客户端监控

1、Android错误上报机制

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

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

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

• Thread.UncaughtExceptionHandler: 回调函数

2、ios错误监控

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

5、吐槽

贝贝集团的我就差直接把ppt发出来了。感觉太多可以学习的了。知识面设计非常广。大家能理解，就多理解下吧

7、总结自述

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

因为那都是别人踩过的坑。但是我个人本身没有做过这块。只能以技术角度去怎么实现监控这块入手。

当以后我自己做了那么我想我会回过来翻翻。

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

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

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

致谢

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

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

看完若有启发，点个赞吧