背景

之前写了一篇年终总结的文章，有些朋友对我们在做的监控比较感兴趣，特此写一篇文章来梳理我们的整体的一套思路给大家参考。

前端异常监控系统的开发其实并不复杂，开源实现方案也颇多，技术实现成本并不难，痛点有但是并不是都不能解决，根据我们的情况总结了一下：

• 前端SDK，主要是用户行为追踪，错误拦截，上报策略，API设计。
• 上报的日志实现实时查询。
• 分级分层预警。
• 日志分析策略。

前端SDK

用户行为追踪

捕获用户的操作路径，根据操作路径我们去还原用户的使用场景，来帮助我们快速定位问题的所在。

操作路径分为以下几个点：

• 事件触发。根据业务场景，只截取了用户的点击（click/change）和拉动滚动条。
• 浏览路径。这块分为2种情况，spa和多页面应用，多页面应用我们可以通过 referrer 来确认上一个页面的url。spa的页面我们是对路由进行函数进行监听来做到。

当然这块整体的数据我们会基于cookie和localstorage来存取数据。

异常

脚本通过window.onerror以及拦截angular和vue的handleError来获取。 ajax这块除了ajax报错信息之外，也会根据业务层面的需求拦截返回的错误（栗子：我们请求返回除200外都是错误，所以整体都会上报）。

异常这块其实坑还是蛮多的，不过市面上各位大大总结的够好了，大家可以看看各位大大的总结。

操作系统

这块就是整个系统的信息，以及浏览器的信息、ua等。