前端异常监控解决方案研究

前端监控包括行为监控、 异常监控 、性能监控等，本文主要讨论异常监控。对于前端而言，和后端处于同一个监控系统中，前端有自己的监控方案，后端也有自己等监控方案，但两者并不分离，因为一个用户在操作应用过程中如果出现异常，有可能是前端引起，也有可能是后端引起，需要有一个机制，将前后端串联起来，使监控本身统一于监控系统。因此，即使只讨论前端异常监控，其实也不能严格区分前后端界限，而要根据实际系统的设计，在最终的报表中体现出监控对开发和业务的帮助。

一般而言，一个监控系统，大致可以分为四个阶段：日志采集、日志存储、统计与分析、报告和警告。

采集阶段：收集异常日志，先在本地做一定的处理，采取一定的方案上报到服务器。

存储阶段：后端接收前端上报的异常日志，经过一定处理，按照一定的存储方案存储。

分析阶段：分为机器自动分析和人工分析。机器自动分析，通过预设的条件和算法，对存储的日志信息进行统计和筛选，发现问题，触发报警。人工分析，通过提供一个可视化的数据面板，让系统用户可以看到具体的日志数据，根据信息，发现异常问题根源。

报警阶段：分为告警和预警。告警按照一定的级别自动报警，通过设定的渠道，按照一定的触发规则进行。预警则在异常发生前，提前预判，给出警告。

前端异常是指在用户使用Web应用时无法快速得到符合预期结果的情况，不同的异常带来的后果程度不同，轻则引起用户使用不悦，重则导致产品无法使用，使用户丧失对产品的认可。

1.1 前端异常分类

根据异常代码的后果的程度，对前端异常的表现分为如下几类

a. 出错

界面呈现的内容与用户预期的内容不符，例如点击进入非目标界面，数据不准确，出现的错误提示不可理解，界面错位，提交后跳转到错误界面等情况。这类异常出现时，虽然产品本身功能还能正常使用，但用户无法达成自己目标。

b. 呆滞

界面出现操作后没有反应的现象，例如点击按钮无法提交，提示成功后无法继续操作。这类异常出现时，产品已经存在界面级局部不可用现象。

c. 损坏

界面出现无法实现操作目的的现象，例如点击无法进入目标界面，点击无法查看详情内容等。这类异常出现时，应用部分功能无法被正常使用。

d. 假死

界面出现卡顿，无法对任何功能进行使用的现象。例如用户无法登陆导致无法使用应用内功能，由于某个遮罩层阻挡且不可关闭导致无法进行任何后续操作。这类异常出现时，用户很可能杀死应用。

e. 崩溃

应用出现经常性自动退出或无法操作的现象。例如间歇性crash，网页无法正常加载或加载后无法进行任何操作。这类异常持续出现，将直接导致用户流失，影响产品生命力。

1.2 异常错误原因分类

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

2.1 采集内容

当异常出现的时候，我们需要知道异常的具体信息，根据异常的具体信息来决定采用什么样的解决方案。在采集异常信息时，可以遵循4W原则：

WHO   did WHAT  and  get WHICH exception   in WHICH environment ?

a. 用户信息

出现异常时该用户的信息，例如该用户在当前时刻的状态、权限等，以及需要区分用户可多终端登录时，异常对应的是哪一个终端。

b. 行为信息

用户进行什么操作时产生了异常：所在的界面路径；执行了什么操作；操作时使用了哪些数据；当时的API吐了什么数据给客户端；如果是提交操作，提交了什么数据；上一个路径；上一个行为日志记录ID等。

c. 异常信息

产生异常的代码信息：用户操作的DOM元素节点；异常级别；异常类型；异常描述；代码stack信息等。

d. 环境信息

网络环境；设备型号和标识码；操作系统版本；客户端版本；API接口版本等。

这是一份非常庞大的日志字段表，它几乎囊括了一个异常发生时，能够对异常周遭环境进行详细描述的所有信息。不同情况下，这些字段并不一定都会收集，由于我们会采用文档数据库存储日志，因此，并不影响它的实际存储结果。

2.2 异常捕获

前端捕获异常分为全局捕获和单点捕获。全局捕获代码集中，易于管理；单点捕获作为补充，对某些特殊情况进行捕获，但分散，不利于管理。

a、全局捕获

通过全局的接口，将捕获代码集中写在一个地方，可以利用的接口有：

• window.addEventListener(‘error’) / window.addEventListener(“unhandledrejection”) / document.addEventListener(‘click’) 等
• 框架级别的全局监听，例如aixos中使用interceptor进行拦截，vue、react都有自己的错误采集接口
• 通过对全局函数进行封装包裹，实现在在调用该函数时自动捕获异常
• 对实例方法重写（Patch），在原有功能基础上包裹一层，例如对console.error进行重写，在使用方法不变的情况下也可以异常捕获

b、单点捕获

在业务代码中对单个代码块进行包裹，或在逻辑流程中打点，实现有针对性的异常捕获：

• try…catch
• 专门写一个函数来收集异常信息，在异常发生时，调用该函数
• 专门写一个函数来包裹其他函数，得到一个新函数，该新函数运行结果和原函数一模一样，只是在发生异常时可以捕获异常

2.3 跨域脚本异常

由于浏览器安全策略限制，跨域脚本报错时，无法直接获取错误的详细信息，只能得到一个Script Error。例如，我们会引入第三方依赖，或者将自己的脚本放在CDN时。

解决Script Error的方法：

方案一：

• 将js内联到HTML中
• 将js文件与HTML放在同域下

（编辑：吕梁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!