一个纯粹的聪明的前端异常日志系统诞生记--图多，请谨慎打开ps ：之前写笔记较多，但是从来没有写过完整的文章，所以很激动

介绍：

ps ：之前写笔记较多，但是从来没有写过完整的文章，所以很激动要把我的第一次奉献给这里，写的不好，还请见谅，如有雷同，纯属巧合。

初来乍到，先打个招呼。大家好，我是负责在线教育客户端的，客户端的架构形式是qt 的 webview 嵌套网页

接下来说一下问题背景：

ps：以下老师或者学生统一简称为用户

当用户在使用客户端的过程中遇到线上问题怎么办？比如：用户点击下课没反应。开发人员又如何定位问题呢？目前的处理方式是:客服或者技术支持人员找到测试人员，然后测试人员再拉上开发人员，然后再联系用户使用远程工具，打开客户端的调试模式，查看控制台的报错信息，最后关闭调试模式，结束远程，开发人员开始定位问题，此后省去1000个字…… 我只想陪媳妇

再想想其他场景：

如果错误是偶现的呢

如果用户不会安装远程工具呢

如果用户时间不方便远程呢

如果马上要到上课时间了呢

如果断网了呢……………………滚

心想：哪来那么多如果，可现实就是这样

况且

现在的前端代码都是工程化的，js都是压缩过的，就算看到报错信息，也是很难定位的问题，现实是这样的

可我想这样的

好的，带着这么多问题，咱们进入正题，是时候表演真正的技术了！

总结归纳上面的问题

异常上报
录像还原错误场景
能定位真正错误代码位置
要以最快的速度发现问题，通知肯定少不了，所以还需要一条：出现错误要能通知到相应人员赶紧处理（钉钉）

总结好之后，想想问题其实也挺简单的，既然问题已经捋顺了，那就开始制定解决方式吧

制定解决方式：

首先想到的肯定是目前有没有现成的或者开源的产品能满足我的需求呢，首先想到的是sentry，之前确实用过，但是感觉这个东西有点乱，有点杂，而且搜索不方便，自定义的话更是不方便，而且没有录像还原，舍弃

再者又搜索到bugsnag，Fundebug，这两个产品是商业收费的，花钱的就是不一样，完全能满足我的需求，而且很好用。作为一个程序猿，能用技术解决的问题，绝不花钱解决，好舍弃，自己来

既然决定自己做，得先看看能不能hold住呀

1，异常上报：

这个简单，通过复写相关的方法（window.onerror,如果是vue的话 vue.config.errorHandler，其他的错误类似），我就能抓到所有的控制台错误信息，然后通过接口上传到后台就好了，搞定

2，录像还原错误场景：

这个怎么弄呢，一开始就想到了dom快照序列化，然后我来个定时器，定时把序列化的快照存起来，一旦发生错误，我就把存的数据上传到后台不就行了，后来一想：我草，那得多大的数据呀，而且多长时间录制一个快照呢，这个间隔不好确定，不行。

那基于dom变更录制快照呢，想想也不行，一来是因为diff算法开销很大，再者两个快照之间都是冗余重复的数据，不行。

那怎么办呢？通过搜索找到一个关键词oplog，翻译过来是操作记录，没错，我只需要记录第一次完整的快照，然后以后只要记录用户操作就可以了，比如用户在点击了按钮a，但也同时引发另外一个问题，我在回放的时候，怎么确定哪个是按钮a呢，简单：我在序列化的时候，给每个dom设置一个唯一标识符不就好了。思路通了，开始写吧，在搜索过程中，遇到了一个让我喜出望外的东西，哈哈，开源项目rrweb，专门就是来解决web录制和回放的，省事了

3，能定位真正错误代码位置：

这个也不难：开发者上传压缩文件对应的map文件，然后我通过sourcemap 工具直接调用就得到真正的错误位置了，搞定

4，出现错误要能通知到相应人员赶紧处理（钉钉）

这个更小儿科了，我在错误上报的处理接口中，添加一个通知钩子就好了，像钉钉通知这样的，也就是发送一个post请求的事

好，问题和解决方式都了然于心了，那就开始享受愉快的coding时间吧