前端监控(出错场景还原)

evenboy

​所谓web,即使你我素未谋面,便知志趣相投;足不出户,亦知世界之大。

最近收到一个用户提的需求场景,当JavaScript发生异常错误时,如果我们能记录出错前鼠标点击、页面跳转、网络请求,控制台打印等信息,这样我们便能更快速的带您重返"失事"现场。我觉得这个想法挺好的,那就加入我们的前端监控试试呢?我实现了一套目前的解决方案:一键还原出错代码和出错场景还原。如果你们有更好的解决方案,一定要联系我哦!

一键还原出错代码

现在开发的大部分前端项目,都会采用前端工程化打包工具,比如gulp、grunt、webpack等等,最终编译出的代码,都会对源码进行混淆压缩,在真实线上项目,js抛出的出错信息往往是压缩后的位置和变量信息,这样导致的问题便是我们需要花更多的时间来找到问题的实际位置,那如何解决这个问题呢?
我们在使用各种压缩工具的时候,都可以生成*.map文件。简单说,source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,很多工具将直接显示原始代码,而不是转换后的代码。
下面看看我们前端监控的实现:
1.入口
图片描述

2.堆栈信息,在右侧输入左侧出错文件的行列号,上传*.map文件,点击开始解析,解析成功后,在下面的表中会显示问错文件原始名称,行列号等,下面的编辑器可以去查看对应的出错位置,方便你快速定位错误。
图片描述

出错场景还原

通过一键还原出错代码,我们能找到出错的位置,可是有些错误我们可能还需要知道当初用户正在做些什么,出错前发生的一些事情,这样我们能更迅速的判断错误是怎样产生的,下面继续来看看如何实现:
在用户上报了错误信息之后,我们可以追溯到当前时间点之前的这个用户页面跳转、HTTP请求相关信息,然后根据时间排序,生成一条完整的访问请求链,将这些信息串联起来,这就是当前用户的“失事现场”。
最终呈现:
图片描述

喜欢请点个赞呗

或者去https://github.com/kisslove/w... Star一下

或者打赏一下

再或者……

哈哈,想法有点多了。

阅读 2.2k

前端
做一个有趣的web开发者

全栈工程师

164 声望
2 粉丝
0 条评论

全栈工程师

164 声望
2 粉丝
文章目录
宣传栏