摘要: 异常监控不复杂也不简单啊...
- 原文:前端异常监控解决方案研究
- 作者:frustigor
前端监控包括行为监控、异常监控、性能监控等,本文主要讨论异常监控。对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统。因此,即使只讨论前端异常监控,其实也不能严格区分前后端界限,而要根据实际系统的设计,在最终的报表中体现出监控对开发和业务的帮助。
一般而言,一个监控系统,大致可以分为四个阶段:日志采集、日志存储、统计与分析、报告和警告。
采集阶段:收集异常日志,先在本地做一定的处理,采取一定的方案上报到服务器。
存储阶段:后端接收前端上报的异常日志,经过一定处理,按照一定的存储方案存储。
分析阶段:分为机器自动分析和人工分析。机器自动分析,通过预设的条件和算法,对存储的日志信息进行统计和筛选,发现问题,触发报警。人工分析,通过提供一个可视化的数据面板,让系统用户可以看到具体的日志数据,根据信息,发现异常问题根源。
报警阶段:分为告警和预警。告警按照一定的级别自动报警,通过设定的渠道,按照一定的触发规则进行。预警则在异常发生前,提前预判,给出警告。
1 前端异常
前端异常是指在用户使用Web应用时无法快速得到符合预期结果的情况,不同的异常带来的后果程度不同,轻则引起用户使用不悦,重则导致产品无法使用,使用户丧失对产品的认可。
1.1 前端异常分类
根据异常代码的后果的程度,对前端异常的表现分为如下几类
a. 出错
界面呈现的内容与用户预期的内容不符,例如点击进入非目标界面,数据不准确,出现的错误提示不可理解,界面错位,提交后跳转到错误界面等情况。这类异常出现时,虽然产品本身功能还能正常使用,但用户无法达成自己目标。
b. 呆滞
界面出现操作后没有反应的现象,例如点击按钮无法提交,提示成功后无法继续操作。这类异常出现时,产品已经存在界面级局部不可用现象。
c. 损坏
界面出现无法实现操作目的的现象,例如点击无法进入目标界面,点击无法查看详情内容等。这类异常出现时,应用部分功能无法被正常使用。
d. 假死
界面出现卡顿,无法对任何功能进行使用的现象。例如用户无法登陆导致无法使用应用内功能,由于某个遮罩层阻挡且不可关闭导致无法进行任何后续操作。这类异常出现时,用户很可能杀死应用。
e. 崩溃
应用出现经常性自动退出或无法操作的现象。例如间歇性crash,网页无法正常加载或加载后无法进行任何操作。这类异常持续出现,将直接导致用户流失,影响产品生命力。
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 采集内容
当异常出现的时候,我们需要知道异常的具体信息,根据异常的具体信息来决定采用什么样的解决方案。在采集异常信息时,可以遵循4W原则:
WHO did WHAT and get WHICH exception in WHICH environment?
a. 用户信息
出现异常时该用户的信息,例如该用户在当前时刻的状态、权限等,以及需要区分用户可多终端登录时,异常对应的是哪一个终端。
b. 行为信息
用户进行什么操作时产生了异常:所在的界面路径;执行了什么操作;操作时使用了哪些数据;当时的API吐了什么数据给客户端;如果是提交操作,提交了什么数据;上一个路径;上一个行为日志记录ID等。
c. 异常信息
产生异常的代码信息:用户操作的DOM元素节点;异常级别;异常类型;异常描述;代码stack信息等。
d. 环境信息
网络环境;设备型号和标识码;操作系统版本;客户端版本;API接口版本等。
字段类型解释requestIdString一个界面产生一个requestIdtraceIdString一个阶段产生一个traceId,用于追踪和一个异常相关的所有日志记录hashString这条log的唯一标识码,相当于logId,但它是根据当前日志记录的具体内容而生成的timeNumber当前日志产生的时间(保存时刻)userIdStringuserStatusNumber当时,用户状态信息(是否可用/禁用)userRolesArray当时,前用户的角色列表userGroupsArray当时,用户当前所在组,组别权限可能影响结果userLicensesArray当时,许可证,可能过期pathString所在路径,URLactionString进行了什么操作refererString上一个路径,来源URLprevActionString上一个操作dataObject当前界面的state、datadataSourcesArray<Object>上游api给了什么数据dataSendObject提交了什么数据targetElementHTMLElement用户操作的DOM元素targetDOMPathArray<HTMLElement>该DOM元素的节点路径targetCSSObjec