黑科技！Fundebug支持可视化重现出错场景

水深无声 2022-05-24 04:57 163阅读 0赞

各位老铁，你们在解决bug的时候，是否有过这样的困扰：

*  bug严不严重，要不要立即修复？
 *  用户有没有受到影响，是否影响使用？
 *  到底是如何触发这个bug的？

很多前端的bug，比如`WeixinJSBridge is not defined`，`JQuery is not defined`，`Script error.`。它们到底有没有影响到用户，除非是用户主动反馈，否则我们不得而知。另一方面，研究表明Debug的绝大部分时间是花在bug复现(reproduce)。而复现的关键就是高精度还原用户触发错误的环境，以及用户的操作行为。

Fundebug在2017年上线了[用户行为回溯][Link 1]功能，通过记录鼠标点击、网络请求等帮助开发者更好地理解出错原因。如今，我们对JavaScript监控插件再次进行重大升级，通过全面可视化重现出错场景，来方便开发者分析用户触发错误的方式。下面使用了最常见的例子(Vue.js框架开发的饿了么App)为大家演示：

[![eleme_small.gif][]][eleme_small.gif]

也许你会疑惑：这不就是一个短视频，没啥特别的！

其实该画面截取自Fundebug的报错控制台。Fundebug通过独特的技术将用户的使用过程“录”了下来，并完全可视化重现。更多详情，请查看博客介绍:  [黑科技！Fundebug支持可视化重现出错场景][Fundebug]。

它并不是一个真正的视频！Fundebug通过独特的技术将用户的使用过程“录”了下来，并完全可视化重现。算法经过优化，整个“录制”过程CPU的使用率非常低。和传统的视频相比，体积小了成百上千倍。Fundebug插件“录制”的“短视频”，压缩后的体积只有几十KB。

另外，Fundebug的JavaScript插件已经对密码等敏感数据进行了自动化过滤。 并且，如果您在某个(DOM)节点配置了`_fun-hide`的class，那么该元素在插件进行录制前就会被预先删除掉来保障隐私安全。具体请查看[文档][Link 2]。

通过可视化重现出错前用户的使用情况，可以方便开发者更好地去理解bug的成因，更快复现bug！欢迎各位老铁[注册][Link 3]体验！

## 关于Fundebug ##

Fundebug专注于JavaScript、微信小程序、小游戏BUG监控，自从2016年双十一正式上线，Fundebug已经服务了一年半时间，累计处理了5亿+错误事件，得到了众多知名用户的认可。

## 参考 ##

*  [Fundebug支持用户行为回溯][Link 1]
 *  [Fundebug JavaScript插件1.0.0][Fundebug JavaScript_1.0.0]

[Link 1]: https://blog.fundebug.com/2017/03/29/user-behavior-track/
[eleme_small.gif]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/eleme_small.gif
[Fundebug]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/?utm_source=release_email
[Link 2]: https://docs.fundebug.com/notifier/javascript/privacy/
[Link 3]: https://www.fundebug.com/
[Fundebug JavaScript_1.0.0]: https://docs.fundebug.com/notifier/javascript/version.html