前端监控包括行为监控、异常监控、性能监控等，本文主要讨论异常监控。对于【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。前端而言，和后端处于同一个监控系统中，前未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。端有自己的监控方案，后端也有自己等监控方著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net案，但两者并不分离，因为一个用户在操作应【本文受版权保护】转载请注明出处：www.tangshuang.net用过程中如果出现异常，有可能是前端引起，【作者：唐霜】本文版权归作者所有，未经授权不得转载。也有可能是后端引起，需要有一个机制，将前未经授权，禁止复制转载。【版权所有，侵权必究】后端串联起来，使监控本身统一于监控系统。原创内容，盗版必究。转载请注明出处：www.tangshuang.net因此，即使只讨论前端异常监控，其实也不能【转载请注明来源】【版权所有】唐霜 www.tangshuang.net严格区分前后端界限，而要根据实际系统的设【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net计，在最终的报表中体现出监控对开发和业务原创内容，盗版必究。【版权所有，侵权必究】的帮助。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

一般而言，一个监控系统，大致可以分为四个【本文受版权保护】转载请注明出处：www.tangshuang.net阶段：日志采集、日志存储、统计与分析、报【原创内容，转载请注明出处】【未经授权禁止转载】告和警告。

本文版权归作者所有，未经授权不得转载。【作者：唐霜】

【转载请注明来源】【本文首发于唐霜的博客】

采集阶段：收集异常日志，先在本地做一定的原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】处理，采取一定的方案上报到服务器。

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

存储阶段：后端接收前端上报的异常日志，经本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。过一定处理，按照一定的存储方案存储。

原创内容，盗版必究。【本文受版权保护】

分析阶段：分为机器自动分析和人工分析。机著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。器自动分析，通过预设的条件和算法，对存储【版权所有，侵权必究】原创内容，盗版必究。的日志信息进行统计和筛选，发现问题，触发本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】报警。人工分析，通过提供一个可视化的数据【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。面板，让系统用户可以看到具体的日志数据，【未经授权禁止转载】【版权所有，侵权必究】根据信息，发现异常问题根源。

未经授权，禁止复制转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

报警阶段：分为告警和预警。告警按照一定的本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】级别自动报警，通过设定的渠道，按照一定的【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】触发规则进行。预警则在异常发生前，提前预未经授权，禁止复制转载。【原创不易，请尊重版权】判，给出警告。

【本文首发于唐霜的博客】【原创不易，请尊重版权】【转载请注明来源】【作者：唐霜】

1 前端异常

前端异常是指在用户使用Web应用时无法快【本文受版权保护】【原创内容，转载请注明出处】速得到符合预期结果的情况，不同的异常带来本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】的后果程度不同，轻则引起用户使用不悦，重【关注微信公众号：wwwtangshuangnet】【本文受版权保护】则导致产品无法使用，使用户丧失对产品的认【作者：唐霜】【原创不易，请尊重版权】可。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

1.1 前端异常分类

根据异常代码的后果的程度，对前端异常的表本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】现分为如下几类

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

a. 出错

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

界面呈现的内容与用户预期的内容不符，例如转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。点击进入非目标界面，数据不准确，出现的错【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。误提示不可理解，界面错位，提交后跳转到错【作者：唐霜】【转载请注明来源】误界面等情况。这类异常出现时，虽然产品本【原创内容，转载请注明出处】原创内容，盗版必究。身功能还能正常使用，但用户无法达成自己目未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】标。

【本文受版权保护】【版权所有，侵权必究】未经授权，禁止复制转载。

b. 呆滞

著作权归作者所有，禁止商业用途转载。【作者：唐霜】

界面出现操作后没有反应的现象，例如点击按【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。钮无法提交，提示成功后无法继续操作。这类本文作者：唐霜，转载请注明出处。【本文受版权保护】异常出现时，产品已经存在界面级局部不可用本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】现象。

【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】未经授权，禁止复制转载。

c. 损坏

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

界面出现无法实现操作目的的现象，例如点击【未经授权禁止转载】未经授权，禁止复制转载。无法进入目标界面，点击无法查看详情内容等著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。。这类异常出现时，应用部分功能无法被正常本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net使用。

【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

d. 假死

【本文受版权保护】本文版权归作者所有，未经授权不得转载。

界面出现卡顿，无法对任何功能进行使用的现著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】象。例如用户无法登陆导致无法使用应用内功【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。能，由于某个遮罩层阻挡且不可关闭导致无法【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。进行任何后续操作。这类异常出现时，用户很【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net可能杀死应用。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

e. 崩溃

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【转载请注明来源】

应用出现经常性自动退出或无法操作的现象。【转载请注明来源】【作者：唐霜】例如间歇性crash，网页无法正常加载或【本文首发于唐霜的博客】未经授权，禁止复制转载。加载后无法进行任何操作。这类异常持续出现【本文首发于唐霜的博客】原创内容，盗版必究。，将直接导致用户流失，影响产品生命力。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

1.2 异常错误原因分类

前端产生异常的原因主要分5类：

【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

原因	案例	频率
逻辑错误	1)    业务逻辑判断条件错误 2)    事件绑定顺序错误 3)    调用栈时序错误 4)    错误的操作js对象	经常
数据类型错误	1)    将null视作对象读取property 2)    将undefined视作数组进行遍历 3)    将字符串形式的数字直接用于加运算 4)    函数参数未传	经常
语法句法错误		较少
网络错误	1)    慢 2)    服务端未返回数据但仍200，前端按正常进行数据遍历 3)    提交数据时网络中断 4)    服务端500错误时前端未做任何错误处理	偶尔
系统错误	1)    内存不够用 2)    磁盘塞满 3)    壳不支持API 4)    不兼容	较少

2 异常采集

2.1 采集内容

当异常出现的时候，我们需要知道异常的具体原创内容，盗版必究。【原创不易，请尊重版权】信息，根据异常的具体信息来决定采用什么样【原创内容，转载请注明出处】【版权所有，侵权必究】的解决方案。在采集异常信息时，可以遵循4著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。W原则：

本文作者：唐霜，转载请注明出处。【转载请注明来源】【作者：唐霜】

WHO did WHAT and get WHICH exception in WHICH environment?

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

a. 用户信息

【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

出现异常时该用户的信息，例如该用户在当前本文作者：唐霜，转载请注明出处。【转载请注明来源】时刻的状态、权限等，以及需要区分用户可多原创内容，盗版必究。原创内容，盗版必究。终端登录时，异常对应的是哪一个终端。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

b. 行为信息

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

用户进行什么操作时产生了异常：所在的界面转载请注明出处：www.tangshuang.net【作者：唐霜】路径；执行了什么操作；操作时使用了哪些数【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net据；当时的API吐了什么数据给客户端；如未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。果是提交操作，提交了什么数据；上一个路径未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net；上一个行为日志记录ID等。

原创内容，盗版必究。【未经授权禁止转载】【转载请注明来源】

c. 异常信息

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

产生异常的代码信息：用户操作的DOM元素【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。节点；异常级别；异常类型；异常描述；代码【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】stack信息等。

【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net

d. 环境信息

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

网络环境；设备型号和标识码；操作系统版本【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】；客户端版本；API接口版本等。

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【本文受版权保护】转载请注明出处：www.tangshuang.net

字段	类型	解释
requestId	String	一个界面产生一个requestId
traceId	String	一个阶段产生一个traceId，用于追踪和一个异常相关的所有日志记录
hash	String	这条log的唯一标识码，相当于logId，但它是根据当前日志记录的具体内容而生成的
time	Number	当前日志产生的时间（保存时刻）
userId	String
userStatus	Number	当时，用户状态信息（是否可用/禁用）
userRoles	Array	当时，前用户的角色列表
userGroups	Array	当时，用户当前所在组，组别权限可能影响结果
userLicenses	Array	当时，许可证，可能过期
path	String	所在路径，URL
action	String	进行了什么操作
referer	String	上一个路径，来源URL
prevAction	String	上一个操作
data	Object	当前界面的state、data
dataSources	Array<Object>	上游api给了什么数据
dataSend	Object	提交了什么数据
targetElement	HTMLElement	用户操作的DOM元素
targetDOMPath	Array<HTMLElement>	该DOM元素的节点路径
targetCSS	Object	该元素的自定义样式表
targetAttrs	Object	该元素当前的属性及值
errorType	String	错误类型
errorLevel	String	异常级别
errorStack	String	错误stack信息
errorFilename	String	出错文件
errorLineNo	Number	出错行
errorColNo	Number	出错列位置
errorMessage	String	错误描述（开发者定义）
errorTimeStamp	Number	时间戳
eventType	String	事件类型
pageX	Number	事件x轴坐标
pageY	Number	事件y轴坐标
screenX	Number	事件x轴坐标
screenY	Number	事件y轴坐标
pageW	Number	页面宽度
pageH	Number	页面高度
screenW	Number	屏幕宽度
screenH	Number	屏幕高度
eventKey	String	触发事件的键
network	String	网络环境描述
userAgent	String	客户端描述
device	String	设备描述
system	String	操作系统描述
appVersion	String	应用版本
apiVersion	String	接口版本

这是一份非常庞大的日志字段表，它几乎囊括本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。了一个异常发生时，能够对异常周遭环境进行【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】详细描述的所有信息。不同情况下，这些字段【版权所有】唐霜 www.tangshuang.net【转载请注明来源】并不一定都会收集，由于我们会采用文档数据【原创内容，转载请注明出处】原创内容，盗版必究。库存储日志，因此，并不影响它的实际存储结转载请注明出处：www.tangshuang.net【作者：唐霜】果。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

2.2 异常捕获

前端捕获异常分为全局捕获和单点捕获。全局【本文受版权保护】本文版权归作者所有，未经授权不得转载。捕获代码集中，易于管理；单点捕获作为补充转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】，对某些特殊情况进行捕获，但分散，不利于【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。管理。

【转载请注明来源】【版权所有】唐霜 www.tangshuang.net

a、全局捕获

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

通过全局的接口，将捕获代码集中写在一个地【作者：唐霜】【关注微信公众号：wwwtangshuangnet】方，可以利用的接口有：

【转载请注明来源】【本文受版权保护】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

• window.addEventListe本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ner(‘error’) / windo【原创不易，请尊重版权】【原创内容，转载请注明出处】w.addEventListener(“转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。unhandledrejection”)转载请注明出处：www.tangshuang.net【转载请注明来源】 / document.addEvent【未经授权禁止转载】【原创不易，请尊重版权】Listener(‘click’) 等
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】
• 框架级别的全局监听，例如aixos中使用【本文受版权保护】【作者：唐霜】interceptor进行拦截，vue、【转载请注明来源】著作权归作者所有，禁止商业用途转载。react都有自己的错误采集接口
【本文首发于唐霜的博客】【原创内容，转载请注明出处】
• 通过对全局函数进行封装包裹，实现在在调用【未经授权禁止转载】【原创不易，请尊重版权】该函数时自动捕获异常
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。
• 对实例方法重写（Patch），在原有功能【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。基础上包裹一层，例如对console.e【版权所有，侵权必究】【转载请注明来源】rror进行重写，在使用方法不变的情况下【未经授权禁止转载】未经授权，禁止复制转载。也可以异常捕获
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。原创内容，盗版必究。

b、单点捕获

【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

在业务代码中对单个代码块进行包裹，或在逻【版权所有，侵权必究】【原创不易，请尊重版权】辑流程中打点，实现有针对性的异常捕获：

【本文首发于唐霜的博客】【本文受版权保护】【原创内容，转载请注明出处】

• try…catch
【本文受版权保护】【本文受版权保护】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net
• 专门写一个函数来收集异常信息，在异常发生【转载请注明来源】原创内容，盗版必究。时，调用该函数
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】
• 专门写一个函数来包裹其他函数，得到一个新【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。函数，该新函数运行结果和原函数一模一样，【原创不易，请尊重版权】【未经授权禁止转载】只是在发生异常时可以捕获异常
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

2.3 跨域脚本异常

由于浏览器安全策略限制，跨域脚本报错时，本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】无法直接获取错误的详细信息，只能得到一个著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】Script Error。例如，我们会引【本文受版权保护】【未经授权禁止转载】入第三方依赖，或者将自己的脚本放在CDN【本文受版权保护】本文版权归作者所有，未经授权不得转载。时。

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

解决Script Error的方法：

原创内容，盗版必究。【本文首发于唐霜的博客】

方案一：

未经授权，禁止复制转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

• 将js内联到HTML中
未经授权，禁止复制转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】
• 将js文件与HTML放在同域下
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

方案二：

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

1. 为页面上script标签添加crosso【版权所有，侵权必究】【本文受版权保护】rigin属性
【原创不易，请尊重版权】原创内容，盗版必究。【原创不易，请尊重版权】
2. 被引入脚本所在服务端响应头中，增加 Ac【原创内容，转载请注明出处】原创内容，盗版必究。cess-Control-Allow-O【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。rigin 来支持跨域资源共享
【转载请注明来源】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

2.4 异常录制

对于一个异常，仅仅拥有该异常的信息还不足本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。以完全抓住问题的本质，因为异常发生的位置原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。，并不一定是异常根源所在的位置。我们需要未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。对异常现场进行还原，才能复原问题全貌，甚著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。至避免类似问题在其他界面中发生。这里需要【未经授权禁止转载】【作者：唐霜】引进一个概念，就是“异常录制”。录制通过【转载请注明来源】原创内容，盗版必究。“时间”“空间”两个维度记录异常发生前到【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。发生的整个过程，对于找到异常根源更有帮助【原创内容，转载请注明出处】【转载请注明来源】。

【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】

【本文受版权保护】【版权所有，侵权必究】

上图表示，当异常发生时，异常的根源可能离【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】我们很远，我们需要回到异常发生的现场，找【原创内容，转载请注明出处】【本文受版权保护】到异常根源。就像现实生活中破案一样，如果转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】有监控摄影机对案发过程的录影，对破案来说【原创内容，转载请注明出处】【转载请注明来源】更加容易。如果仅仅关注异常本身，要找到异【作者：唐霜】【原创不易，请尊重版权】常的根源，需要凭借运气，但有了异常录制的本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】帮助，找到根源就更加容易。

转载请注明出处：www.tangshuang.net【本文受版权保护】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

所谓的“异常录制”，实际上就是通过技术手原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】段，收集用户的操作过程，对用户的每一个操原创内容，盗版必究。【未经授权禁止转载】作都进行记录，在发生异常时，把一定时间区著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net间内的记录重新运行，形成影像进行播放，让【本文首发于唐霜的博客】【转载请注明来源】调试者无需向用户询问，就能看到用户当时的本文版权归作者所有，未经授权不得转载。【作者：唐霜】操作过程。

【原创内容，转载请注明出处】未经授权，禁止复制转载。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】未经授权，禁止复制转载。

上图是来自阿里的一套异常录制还原方案示意本文版权归作者所有，未经授权不得转载。【作者：唐霜】图，用户在界面上的操作产生的events未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】和mutation被产品收集起来，上传到【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】服务器，经过队列处理按顺序存放到数据库中【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。。当需要进行异常重现的时候，将这些记录从著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net数据库中取出，采用一定的技术方案，顺序播原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。放这些记录，即可实现异常还原。

【版权所有，侵权必究】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

2.5 异常级别

一般而言，我们会将收集信息的级别分为in【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】fo，warn，error等，并在此基础原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net上进行扩展。

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

当我们监控到异常发生时，可以将该异常划分【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】到“重要——紧急”模型中分为A、B、C、未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netD四个等级。有些异常，虽然发生了，但是并著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net不影响用户的正常使用，用户其实并没有感知【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。到，虽然理论上应该修复，但是实际上相对于本文作者：唐霜，转载请注明出处。【本文受版权保护】其他异常而言，可以放在后面进行处理。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】【原创不易，请尊重版权】

下文会讨论告警策略，一般而言，越靠近右上未经授权，禁止复制转载。原创内容，盗版必究。角的异常会越快通知，保证相关人员能最快接【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net收到信息，并进行处理。A级异常需要快速响【作者：唐霜】本文版权归作者所有，未经授权不得转载。应，甚至需要相关负责人知悉。

转载请注明出处：www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】

在收集异常阶段，可根据第一节划分的异常后转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。果来判断异常的严重程度，在发生异常时选择未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。对应的上报方案进行上报。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

3 整理与上报方案

前文已经提到，除了异常报错信息本身，我们【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net还需要记录用户操作日志，以实现场景复原。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。这就涉及到上报的量和频率问题。如果任何日本文作者：唐霜，转载请注明出处。【转载请注明来源】志都立即上报，这无异于自造的DDOS攻击未经授权，禁止复制转载。【原创内容，转载请注明出处】。因此，我们需要合理的上报方案。下文会介【版权所有】唐霜 www.tangshuang.net【转载请注明来源】绍4种上报方案，但实际我们不会仅限于其中本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net一种，而是经常同时使用，对不同级别的日志【原创不易，请尊重版权】【转载请注明来源】选择不同的上报方案。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net原创内容，盗版必究。

3.1 前端存储日志

我们前面提到，我们并不单单采集异常本身日【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】志，而且还会采集与异常相关的用户行为日志【本文受版权保护】【本文首发于唐霜的博客】。单纯一条异常日志并不能帮助我们快速定位【原创不易，请尊重版权】【未经授权禁止转载】问题根源，找到解决方案。但如果要收集用户【关注微信公众号：wwwtangshuangnet】【作者：唐霜】的行为日志，又要采取一定的技巧，而不能用著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】户每一个操作后，就立即将该行为日志传到服【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。务器，对于具有大量用户同时在线的应用，如未经授权，禁止复制转载。【原创不易，请尊重版权】果用户一操作就立即上传日志，无异于对日志本文版权归作者所有，未经授权不得转载。【转载请注明来源】服务器进行DDOS攻击。因此，我们先将这著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】些日志存储在用户客户端本地，达到一定条件【本文首发于唐霜的博客】【版权所有，侵权必究】之后，再同时打包上传一组日志。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【未经授权禁止转载】

那么，如何进行前端日志存储呢？我们不可能本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。直接将这些日志用一个变量保存起来，这样会本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。挤爆内存，而且一旦用户进行刷新操作，这些本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net日志就丢失了，因此，我们自然而然想到前端原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。数据持久化方案。

【转载请注明来源】【本文首发于唐霜的博客】

目前，可用的持久化方案可选项也比较多了，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。主要有：Cookie、localStor【原创不易，请尊重版权】【未经授权禁止转载】age、sessionStorage、I【未经授权禁止转载】【原创内容，转载请注明出处】ndexedDB、webSQL 、Fil【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】eSystem 等等。那么该如何选择呢？本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net我们通过一个表来进行对比：

【版权所有，侵权必究】【未经授权禁止转载】未经授权，禁止复制转载。【原创内容，转载请注明出处】

存储方式	cookie	localStorage	sessionStorage	IndexedDB	webSQL	FileSystem
类型		key-value	key-value	NoSQL	SQL
数据格式	string	string	string	object
容量	4k	5M	5M	500M	60M
进程	同步	同步	同步	异步	异步
检索		key	key	key, index	field
性能		读快写慢		读慢写快

综合之后，IndexedDB是最好的选择本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，它具有容量大、异步的优势，异步的特性保原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】证它不会对界面的渲染产生阻塞。而且Ind【本文受版权保护】原创内容，盗版必究。exedDB是分库的，每个库又分stor【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】e，还能按照索引进行查询，具有完整的数据著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。库管理思维，比localStorage更【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。适合做结构化数据管理。但是它有一个缺点，【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】就是api非常复杂，不像localSto【转载请注明来源】本文版权归作者所有，未经授权不得转载。rage那么简单直接。针对这一点，我们可【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net以使用hello-indexeddb这个转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】工具，它用Promise对复杂api进行转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】来封装，简化操作，使IndexedDB的【未经授权禁止转载】【版权所有，侵权必究】使用也能做到localStorage一样转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】便捷。另外，IndexedDB是被广泛支本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】持的HTML5标准，兼容大部分浏览器，因本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。此不用担心它的发展前景。

【作者：唐霜】【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】

接下来，我们究竟应该怎么合理使用Inde著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】xedDB，保证我们前端存储的合理性呢？

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

【原创不易，请尊重版权】【本文首发于唐霜的博客】

上图展示了前端存储日志的流程和数据库布局转载请注明出处：www.tangshuang.net原创内容，盗版必究。。当一个事件、变动、异常被捕获之后，形成本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】一条初始日志，被立即放入暂存区（inde【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。xedDB的一个store），之后主程序【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】就结束了收集过程，后续的事只在webwo【作者：唐霜】未经授权，禁止复制转载。rker中发生。在一个webworker原创内容，盗版必究。未经授权，禁止复制转载。中，一个循环任务不断从暂存区中取出日志，【作者：唐霜】【版权所有，侵权必究】对日志进行分类，将分类结果存储到索引区中【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，并对日志记录的信息进行丰富，将最终将会本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】上报到服务端的日志记录转存到归档区。而当【作者：唐霜】未经授权，禁止复制转载。一条日志在归档区中存在的时间超过一定天数原创内容，盗版必究。转载请注明出处：www.tangshuang.net之后，它就已经没有价值了，但是为了防止特【本文首发于唐霜的博客】【本文受版权保护】殊情况，它被转存到回收区，再经历一段时间【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】后，就会被从回收区中清除。

【版权所有，侵权必究】【未经授权禁止转载】【转载请注明来源】

3.2 前端整理日志

上文讲到，在一个webworker中对日转载请注明出处：www.tangshuang.net【版权所有，侵权必究】志进行整理后存到索引区和归档区，那么这个未经授权，禁止复制转载。【未经授权禁止转载】整理过程是怎样的呢？

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

由于我们下文要讲的上报，是按照索引进行的【本文受版权保护】未经授权，禁止复制转载。，因此，我们在前端的日志整理工作，主要就【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】是根据日志特征，整理出不同的索引。我们在未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。收集日志时，会给每一条日志打上一个typ本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】e，以此进行分类，并创建索引，同时通过o著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。bject-hashcode计算每个lo未经授权，禁止复制转载。未经授权，禁止复制转载。g对象的hash值，作为这个log的唯一【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net标志。

未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

• 将所有日志记录按时序存放在归档区，并将新【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】入库的日志加入索引
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
• BatchIndexes：批量上报索引（【本文首发于唐霜的博客】【本文受版权保护】包含性能等其他日志），可一次批量上报10本文作者：唐霜，转载请注明出处。【未经授权禁止转载】0条
【原创不易，请尊重版权】原创内容，盗版必究。未经授权，禁止复制转载。
• MomentIndexes：即时上报索引【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。，一次全部上报
【转载请注明来源】【版权所有，侵权必究】
• FeedbackIndexes：用户反馈原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。索引，一次上报一条
未经授权，禁止复制转载。【未经授权禁止转载】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net
• BlockIndexes：区块上报索引，【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。按异常/错误（traceId，reque转载请注明出处：www.tangshuang.net原创内容，盗版必究。stId）分块，一次上报一块
【作者：唐霜】【本文首发于唐霜的博客】【转载请注明来源】【原创不易，请尊重版权】
• 上报完成后，被上报过的日志对应的索引删除
【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】
• 3天以上日志进入回收区
著作权归作者所有，禁止商业用途转载。【作者：唐霜】
• 7天以上的日志从回收区清除
本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

【本文首发于唐霜的博客】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 原创内容，盗版必究。【转载请注明来源】

3.3 上报日志

上报日志也在webworker中进行，为【本文首发于唐霜的博客】【本文受版权保护】了和整理区分，可以分两个worker。上【转载请注明来源】【本文首发于唐霜的博客】报的流程大致为：在每一个循环中，从索引区【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】取出对应条数的索引，通过索引中的hash转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，到归档区取出完整的日志记录，再上传到服著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】务器。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。

按照上报的频率（重要紧急度）可将上报分为【作者：唐霜】【本文受版权保护】四种：

【本文受版权保护】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

a. 即时上报

收集到日志后，立即触发上报函数。仅用于A【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】类异常。而且由于受到网络不确定因素影响，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netA类日志上报需要有一个确认机制，只有确认【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】服务端已经成功接收到该上报信息之后，才算本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net完成。否则需要有一个循环机制，确保上报成【转载请注明来源】著作权归作者所有，禁止商业用途转载。功。

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

b. 批量上报

将收集到的日志存储在本地，当收集到一定数【本文受版权保护】【版权所有】唐霜 www.tangshuang.net量之后再打包一次性上报，或者按照一定的频【版权所有】唐霜 www.tangshuang.net【作者：唐霜】率（时间间隔）打包上传。这相当于把多次合著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。并为一次上报，以降低对服务器的压力。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

c. 区块上报

将一次异常的场景打包为一个区块后进行上报【转载请注明来源】本文作者：唐霜，转载请注明出处。。它和批量上报不同，批量上报保证了日志的【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。完整性，全面性，但会有无用信息。而区块上转载请注明出处：www.tangshuang.net【本文受版权保护】报则是针对异常本身的，确保单个异常相关的【本文受版权保护】【原创不易，请尊重版权】日志被全部上报。

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

d. 用户主动提交

在界面上提供一个按钮，用户主动反馈bug著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net。这有利于加强与用户的互动。

转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

或者当异常发生时，虽然对用户没有任何影响本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，但是应用监控到了，弹出一个提示框，让用【本文受版权保护】【转载请注明来源】户选择是否愿意上传日志。这种方案适合涉及【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net用户隐私数据时。

【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net

	即时上报	批量上报	区块上报	用户反馈
时效	立即	定时	稍延时	延时
条数	一次全部上报	一次100条	单次上报相关条目	一次1条
容量	小	中	–	–
紧急	紧急重要	不紧急	不紧急但重要	不紧急

即时上报虽然叫即时，但是其实也是通过类似本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net队列的循环任务去完成的，它主要是尽快把一【本文受版权保护】【版权所有】唐霜 www.tangshuang.net些重要的异常提交给监控系统，好让运维人员【本文受版权保护】转载请注明出处：www.tangshuang.net发现问题，因此，它对应的紧急程度比较高。

未经授权，禁止复制转载。【原创不易，请尊重版权】

批量上报和区块上报的区别：批量上报是一次原创内容，盗版必究。本文作者：唐霜，转载请注明出处。上报一定条数，比如每2分钟上报1000条著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】，直到上报完成。而区块上报是在异常发生之【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net后，马上收集和异常相关的所有日志，查询出【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。哪些日志已经由批量上报上报过了，剔除掉，【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】把其他相关日志上传，和异常相关的这些日志著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。相对而言更重要一些，它们可以帮助尽快复原【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net异常现场，找出发生异常的根源。

【作者：唐霜】【原创不易，请尊重版权】

用户提交的反馈信息，则可以慢悠悠上报上去【原创不易，请尊重版权】【本文受版权保护】。

原创内容，盗版必究。原创内容，盗版必究。原创内容，盗版必究。【转载请注明来源】

为了确保上报是成功的，在上报时需要有一个【原创不易，请尊重版权】【本文首发于唐霜的博客】确认机制，由于在服务端接收到上报日志之后【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】，并不会立即存入数据库，而是放到一个队列转载请注明出处：www.tangshuang.net【转载请注明来源】中，因此，前后端在确保日志确实已经记录进【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。数据库这一点上需要再做一些处理。

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】原创内容，盗版必究。

【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

上图展示了上报的一个大致流程，在上报时，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。先通过hash查询，让客户端知道准备要上转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。报的日志集合中，是否存在已经被服务端保存本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。好的日志，如果已经存在，就将这些日志去除【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net，避免重复上报，浪费流量。

著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】

3.4 压缩上报数据

一次性上传批量数据时，必然遇到数据量大，转载请注明出处：www.tangshuang.net【未经授权禁止转载】浪费流量，或者传输慢等情况，网络不好的状【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net态下，可能导致上报失败。因此，在上报之前【本文受版权保护】【关注微信公众号：wwwtangshuangnet】进行数据压缩也是一种方案。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【本文受版权保护】

对于合并上报这种情况，一次的数据量可能要著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。十几k，对于日 pv 大的站点来说，产生【原创不易，请尊重版权】【版权所有，侵权必究】的流量还是很可观的。所以有必要对数据进行未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。压缩上报。lz-string是一个非常优【未经授权禁止转载】【原创不易，请尊重版权】秀的字符串压缩类库，兼容性好，代码量少，【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。压缩比高，压缩时间短，压缩率达到惊人的6原创内容，盗版必究。【本文首发于唐霜的博客】0%。但它基于LZ78压缩，如果后端不支【作者：唐霜】【转载请注明来源】持解压，可选择gzip压缩，一般而言后端【未经授权禁止转载】【作者：唐霜】会默认预装gzip，因此，选择gzip压本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。缩数据也可以，工具包pako中自带了gz【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ip压缩，可以尝试使用。

【原创内容，转载请注明出处】【版权所有，侵权必究】【原创不易，请尊重版权】【原创内容，转载请注明出处】

4 日志接收与存储

4.1 接入层与消息队列

一般通过提供独立的日志服务器接收客户端日未经授权，禁止复制转载。【版权所有，侵权必究】志，接收过程中，要对客户端日志内容的合法【作者：唐霜】【本文受版权保护】性、安全性等进行甄别，防止被人攻击。而且【本文受版权保护】【关注微信公众号：wwwtangshuangnet】由于日志提交一般都比较频繁，多客户端同时【作者：唐霜】【转载请注明来源】并发的情况也常见。通过消息队列将日志信息【转载请注明来源】【原创内容，转载请注明出处】逐一处理后写入到数据库进行保存也是比较常【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】用的方案。

【作者：唐霜】【本文首发于唐霜的博客】未经授权，禁止复制转载。

【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

上图为腾讯BetterJS的架构图，其中【本文首发于唐霜的博客】【原创内容，转载请注明出处】“接入层”和“推送中心”就是这里提到的接【本文首发于唐霜的博客】【原创不易，请尊重版权】入层和消息队列。BetterJS将整个前【本文首发于唐霜的博客】【转载请注明来源】端监控的各个模块进行拆分，推送中心承担了【关注微信公众号：wwwtangshuangnet】【本文受版权保护】将日志推送到存储中心进行存储和推送给其他著作权归作者所有，禁止商业用途转载。【转载请注明来源】系统（例如告警系统）的角色，但我们可以把本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】接收日志阶段的队列独立出来看，在接入层和【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。存储层之间做一个过渡。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

4.2 日志存储系统

存储日志是一个脏活累活，但是不得不做。对【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net于小应用，单库单表加优化就可以应付。一个原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】成规模的应用，如果要提供更标准高效的日志【版权所有】唐霜 www.tangshuang.net【作者：唐霜】监控服务，常常需要在日志存储架构上下一些未经授权，禁止复制转载。【原创不易，请尊重版权】功夫。目前业界已经有比较完备的日志存储方本文作者：唐霜，转载请注明出处。【转载请注明来源】案，主要有：Hbase系，Dremel系【本文受版权保护】【原创内容，转载请注明出处】，Lucene系等。总体而言，日志存储系著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】统主要面对的问题是数据量大，数据结构不规本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。律，写入并发高，查询需求大等。一般一套日转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】志存储系统，要解决上面这些问题，就要解决【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net写入的缓冲，存储介质按日志时间选择，为方【转载请注明来源】原创内容，盗版必究。便快速读取而设计合理的索引系统等等。

转载请注明出处：www.tangshuang.net【转载请注明来源】转载请注明出处：www.tangshuang.net

由于日志存储系统方案比较成熟，这里就不再转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】做更多讨论。

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】

4.3 搜索

日志的最终目的是要使用，由于一般日志的体【本文首发于唐霜的博客】【未经授权禁止转载】量都非常大，因此，要在庞大的数据中找到需【本文受版权保护】本文作者：唐霜，转载请注明出处。要的日志记录，需要依赖比较好的搜索引擎。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。Splunk是一套成熟的日志存储系统，但【原创内容，转载请注明出处】【未经授权禁止转载】它是付费使用的。按照Splunk的框架，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。Elk是Splunk的开源实现，Elk是【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ElasticSearch、Logsta本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】sh、Kibana的结合，ES基于Luc著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ene的存储、索引的搜索引擎；logst【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】ash是提供输入输出及转化处理插件的日志【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。标准化管道；Kibana提供可视化和查询【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。统计的用户界面。

原创内容，盗版必究。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【转载请注明来源】

5 日志统计与分析

一个完善的日志统计分析工具需要提供各方面【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】方便的面板，以可视化的方式给日志管理员和【本文首发于唐霜的博客】【作者：唐霜】开发者反馈信息。

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

5.1 用户纬度

同一个用户的不同请求实际上会形成不同的s【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。tory线，因此，针对用户的一系列操作设【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】计唯一的request id是有必要的。【本文受版权保护】原创内容，盗版必究。同一个用户在不同终端进行操作时，也能进行转载请注明出处：www.tangshuang.net【作者：唐霜】区分。用户在进行某个操作时的状态、权限等【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。信息，也需要在日志系统中予以反应。

【原创不易，请尊重版权】【未经授权禁止转载】【本文首发于唐霜的博客】【作者：唐霜】

5.2 时间维度

一个异常是怎么发生的，需要将异常操作的前【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】后story线串联起来观察。它不单单涉及原创内容，盗版必究。【转载请注明来源】一个用户的一次操作，甚至不限于某一个页面【未经授权禁止转载】原创内容，盗版必究。，而是一连串事件的最终结果。

本文版权归作者所有，未经授权不得转载。【本文受版权保护】

5.3 性能维度

应用运行过程中的性能情况，例如，界面加载【作者：唐霜】【版权所有】唐霜 www.tangshuang.net时间，api请求时长统计，单元计算的消耗【转载请注明来源】【未经授权禁止转载】，用户呆滞时间。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【原创不易，请尊重版权】

5.4 运行环境维度

应用及服务所运行的环境情况，例如应用所在著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。的网络环境，操作系统，设备硬件信息等，服本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。务器cpu、内存状况，网络、宽带使用情况著作权归作者所有，禁止商业用途转载。【作者：唐霜】等。

【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。

5.4 细粒度代码追踪

异常的代码stack信息，定位到发生异常【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】的代码位置和异常堆栈。

【版权所有，侵权必究】【本文受版权保护】【转载请注明来源】

5.6 场景回溯

通过将异常相关的用户日志连接起来，以动态本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】的效果输出发生异常的过程。

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【未经授权禁止转载】

6 监控与通知

对异常进行统计和分析只是基础，而在发现异【本文首发于唐霜的博客】原创内容，盗版必究。常时可以推送和告警，甚至做到自动处理，才本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】是一个异常监控系统应该具备的能力。

【转载请注明来源】【本文首发于唐霜的博客】

6.1 自定义触发条件的告警

a. 监控实现

【转载请注明来源】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net

当日志信息进入接入层时，就可以触发监控逻转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。辑。当日志信息中存在较为高级别的异常时，本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】也可以立即出发告警。告警消息队列和日志入转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net库队列可以分开来管理，实现并行。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

对入库日志信息进行统计，对异常信息进行告【未经授权禁止转载】【作者：唐霜】警。对监控异常进行响应。所谓监控异常，是著作权归作者所有，禁止商业用途转载。【转载请注明来源】指：有规律的异常一般而言都比较让人放心，【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】比较麻烦的是突然之间的异常。例如在某一时【本文首发于唐霜的博客】【作者：唐霜】段突然频繁接收到D级异常，虽然D级异常是【原创内容，转载请注明出处】【本文受版权保护】不紧急一般重要，但是当监控本身发生异常时未经授权，禁止复制转载。未经授权，禁止复制转载。，就要提高警惕。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】

b. 自定义触发条件

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

除了系统开发时配置的默认告警条件，还应该【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net提供给日志管理员可配置的自定义触发条件。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

• 日志内含有什么内容时
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】
• 日志统计达到什么度、量时
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。
• 向符合什么条件的用户告警
原创内容，盗版必究。【原创内容，转载请注明出处】【原创不易，请尊重版权】

6.2 推送渠道

可选择的途径有很多，例如邮件、短信、微信【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】、电话。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

6.3 推送频率

针对不同级别的告警，推送的频率也可以进行【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。设定。低风险告警可以以报告的形式一天推送本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。一次，高风险告警10分钟循环推送，直到处本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net理人手动关闭告警开关。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】

6.4 自动报表

对于日志统计信息的推送，可以做到自动生成【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】日报、周报、月报、年报并邮件发送给相关群本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net组。

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

6.5 自动产生bug工单

当异常发生时，系统可以调用工单系统API著作权归作者所有，禁止商业用途转载。【作者：唐霜】实现自动生成bug单，工单关闭后反馈给监【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net控系统，形成对异常处理的追踪信息进行记录本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，在报告中予以展示。

【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】

7 修复异常

7.1 sourcemap

前端代码大部分情况都是经过压缩后发布的，转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。上报的stack信息需要还原为源码信息，【原创内容，转载请注明出处】【原创内容，转载请注明出处】才能快速定位源码进行修改。

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【未经授权禁止转载】

发布时，只部署js脚本到服务器上，将so【原创内容，转载请注明出处】【原创内容，转载请注明出处】urcemap文件上传到监控系统，在监控著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net系统中展示stack信息时，利用sour本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】cemap文件对stack信息进行解码，【本文首发于唐霜的博客】【原创不易，请尊重版权】得到源码中的具体信息。

【本文受版权保护】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

但是这里有一个问题，就是sourcema转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。p必须和正式环境的版本对应，还必须和gi本文版权归作者所有，未经授权不得转载。【本文受版权保护】t中的某个commit节点对应，这样才能转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。保证在查异常的时候可以正确利用stack【未经授权禁止转载】未经授权，禁止复制转载。信息，找到出问题所在版本的代码。这些可以本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。通过建立CI任务，在集成化部署中增加一个【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。部署流程，以实现这一环节。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

7.2 从告警到预警

预警的本质是，预设可能出现异常的条件，当【原创内容，转载请注明出处】【本文首发于唐霜的博客】触发该条件时异常并没有真实发生，因此，可【作者：唐霜】本文作者：唐霜，转载请注明出处。以赶在异常发生之前对用户行为进行检查，及本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】时修复，避免异常或异常扩大。

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

怎么做呢？其实就是一个统计聚类的过程。将原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。历史中发生异常的情况进行统计，从时间、地【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。域、用户等不同维度加以统计，找出规律，并本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。将这些规律通过算法自动加入到预警条件中，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net当下次触发时，及时预警。

本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

7.3 智能修复

自动修复错误。例如，前端要求接口返回数值【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】，但接口返回了数值型的字符串，那么可以有原创内容，盗版必究。未经授权，禁止复制转载。一种机制，监控系统发送正确数据类型模型给【本文首发于唐霜的博客】【转载请注明来源】后端，后端在返回数据时，根据该模型控制每【作者：唐霜】【原创不易，请尊重版权】个字段的类型。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

8 异常测试

8.1 主动异常测试

撰写异常用例，在自动化测试系统中，加入异【版权所有，侵权必究】【作者：唐霜】常测试用户。在测试或运行过程中，每发现一著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。个异常，就将它加入到原有的异常用例列表中转载请注明出处：www.tangshuang.net【转载请注明来源】。

本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

8.2 随机异常测试

模拟真实环境，在模拟器中模拟真实用户的随【本文受版权保护】原创内容，盗版必究。机操作，利用自动化脚本产生随机操作动作代【转载请注明来源】【本文受版权保护】码，并执行。

【未经授权禁止转载】【本文受版权保护】转载请注明出处：www.tangshuang.net

定义异常，例如弹出某个弹出框，包含特定内未经授权，禁止复制转载。【作者：唐霜】容时，就是异常。将这些测试结果记录下来，【本文受版权保护】【本文受版权保护】再聚类统计分析，对防御异常也很有帮助。

【本文受版权保护】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】

9 部署

9.1 多客户端

一个用户在不同终端上登录，或者一个用户在本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】登录前和登录后的状态。通过特定算法生成r转载请注明出处：www.tangshuang.net【本文受版权保护】equestID，通过该requestI【原创内容，转载请注明出处】【原创不易，请尊重版权】d可以确定某个用户在独立客户端上的一系列著作权归作者所有，禁止商业用途转载。【作者：唐霜】操作，根据日志时序，可以梳理出用户产生异原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。常的具体路径。

【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net【未经授权禁止转载】

9.2 集成便捷性

前端写成包，全局引用即可完成大部分日志记【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。录、存储和上报。在特殊逻辑里面，可以调用【转载请注明来源】本文作者：唐霜，转载请注明出处。特定方法记录日志。

【原创内容，转载请注明出处】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

后端与应用本身的业务代码解耦，可以做成独【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。立的服务，通过接口和第三方应用交互。利用本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】集成部署，可以将系统随时进行扩容、移植等原创内容，盗版必究。【本文首发于唐霜的博客】操作。

【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net

9.3 管理系统的可扩展

整套系统可扩展，不仅服务单应用，可支持多【转载请注明来源】【转载请注明来源】个应用同时运行。同一个团队下的所有应用都本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net可以利用同一个平台进行管理。

【转载请注明来源】【本文受版权保护】

9.4 日志系统权限

不同的人在访问日志系统时权限不同，一个访转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net问者只能查看自己相关的应用，有些统计数据【原创不易，请尊重版权】【本文首发于唐霜的博客】如果比较敏感，可以单独设置权限，敏感数据【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net可脱敏。

【本文受版权保护】本文作者：唐霜，转载请注明出处。

10 其他

10.1 性能监控

异常监控主要针对代码级别的报错，但也应该【本文受版权保护】本文版权归作者所有，未经授权不得转载。关注性能异常。性能监控主要包括：

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

• 运行时性能：文件级、模块级、函数级、算法未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】级
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net
• 网络请求速率
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【版权所有，侵权必究】
• 系统性能
原创内容，盗版必究。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net

10.2 API Monitor

后端API对前端的影响也非常大，虽然前端原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net代码也控制逻辑，但是后端返回的数据是基础【转载请注明来源】【未经授权禁止转载】，因此对API的监控可以分为：

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创不易，请尊重版权】【本文受版权保护】

• 稳定性监控
【本文受版权保护】本文作者：唐霜，转载请注明出处。
• 数据格式和类型
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【作者：唐霜】
• 报错监控
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。
• 数据准确性监控
【原创内容，转载请注明出处】【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

10.3 数据脱敏

敏感数据不被日志系统采集。由于日志系统的原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。保存是比较开放的，虽然里面的数据很重要，未经授权，禁止复制转载。【本文首发于唐霜的博客】但是在存储上大部分日志系统都不是保密级，未经授权，禁止复制转载。【转载请注明来源】因此，如果应用涉及了敏感数据，最好做到：

原创内容，盗版必究。原创内容，盗版必究。

• 独立部署，不和其他应用共享监控系统
【版权所有，侵权必究】【本文受版权保护】【版权所有，侵权必究】
• 不采集具体数据，只采集用户操作数据，在重转载请注明出处：www.tangshuang.net【未经授权禁止转载】现时，通过日志信息可以取出数据api结果本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】来展示
【未经授权禁止转载】转载请注明出处：www.tangshuang.net
• 日志加密，做到软硬件层面的加密防护
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
• 必要时，可采集具体数据的ID用于调试，场【版权所有，侵权必究】【未经授权禁止转载】景重现时，用mock数据替代，mock数本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net据可由后端采用假的数据源生成
原创内容，盗版必究。【版权所有，侵权必究】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】
• 对敏感数据进行混淆
【转载请注明来源】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

结语

本文主要是对前端异常监控的整体框架进行了著作权归作者所有，禁止商业用途转载。【作者：唐霜】研究，没有涉及到具体的技术实现，涉及前端转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】部分和后台部分以及与整个问题相关的一些知【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】识点，主要关注前端部分，它和后端的监控有著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。重叠部分也有分支部分，需要在一个项目中不【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net断实践，总结出项目本身的监控需求和策略。

【原创不易，请尊重版权】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

 

【原创不易，请尊重版权】【原创不易，请尊重版权】

这篇文章是我发在CDC博客上的公开文，为【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】了作为记录，也保存在自己的博客一份。
【本文受版权保护】 查看原文：https://cdc.te原创内容，盗版必究。【未经授权禁止转载】ncent.com/2018/09/13【作者：唐霜】未经授权，禁止复制转载。/frontend-exception-【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。monitor-research/

【原创内容，转载请注明出处】【版权所有，侵权必究】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

2018-10-02 7322