从无到有 <前端异常监控系统 > 落地

导火索

有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了。 我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才发现问题: 是他账户下面有个对话的消息数据有问题导致页面报错了。 一般遇到这种情况只有用他的手机或者账户调试能很快查到问题,如果是外部的用户怎么办,我没法拿他的手机去测试。623144-20171221195539240-1716346664

 

其实这个问题很常见,但是这次我觉得这个问题如果不是我们自己同事发现的,那就很恐怖,可能废很大精力才能查出问题,甚至会导致很严重的线上bug,细思极恐,刚好前不久成都FCC的大前端交流会上叶小钗谈到了监控这块,也让我有所启发,这些公共服务才是公司的核心财富,目前公司业务发展处在上升阶段,未来用户肯定会越来越多,对系统的稳定性要求也会越来越高,那既然我们还缺乏这块的服务,现在做正合适。

前期准备

从提出这个想法的一开始就知道,落地才是关键,否则一切空谈。 刚好半个多月以后,我们前端组需要在公司做一次分享,我现在做个题材就挺适合分享的,其他后端和测试同事也容易听进去一点。 最开始我考虑了后端存储和可视化的情况,想找个现成后端集成工具帮我处理后端的工作。 就找后端同事问了一下,同事推荐了 Elasticsearch+Fluentd+Kibana 。 然后稍微研究了一下,总觉得哪里不对,反正研究了之后发现可能还是需要做一些定制开发才能解决需求,后端同事听了我的需求也是这么说的。 一人之力有限,并且公司业务上的事情也多,找一个后端同事配合极好,利用各自的优势可以更快落地,这样我也可以专注前端的工作和把控整个项目落地。 就这样,我和后端同事商量了一下,他也答应抽空和我一起搞了。 抛开后端的事情,我开始思考前端的工作,去调研一下别人的方案和这块的知识。 有一些三方库或者开源项目提供类似的功能的,做了很简单的了解。 最后想着自己开发更容易去适应自身的业务,并且目前第一版的需求功能也并没有那么大的开发量,那就自己做吧。 前期遇见了一些需要解决和实现的功能点: 生成sourcemap,监听js报错和信息上报,压缩的js代码上报后sourcemap解析问题,如何更平滑的应用在业务项目中,数据存储优化等。

基本实现

前端

  •   js报错事件监听+处理上报
  •   构建工具生成sourcemap文件
  •   sourcemap文件上传

后端

  •   提供接口收集报错
  •   读取sourcemap文件,解析上传的报错(解析发生时间:接口收集到后马上处理,后期提取的时候处理)
  •   存储数据

监听js报错和信息上报

通过onerror我们能监听和拿到js的报错信息, 可以拿到如下代码的五个参数。 columnNo, error这两个参数在一些老版本的IE8-9浏览器和opera低版本等浏览器上可能拿不到,但是没有关系,我们在代码上兼容拿不到参数的情况,如果缺少后两个参数,传空值就行了。 也可以通过其他方式拿到这些老版本浏览器的columnNo和error参数,目前监控主要是针对移动端,也没太大必要去兼容老版本的浏览器。