前端监控出错场景还原

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

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

一键还原出错代码

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

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

出错场景还原

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

喜欢请点个赞呗

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

或者打赏一下

再或者……

哈哈，想法有点多了。