前端异常监控神器

川长思鸟来 2022-05-20 04:30 205阅读 0赞

## 有时候，看到用户的反馈，我们往往会一脸茫然，因为反馈的信息太少了。 ##

比如有用户反馈登录不了。为了解这个问题，一般的流程是这样的：首先试试自己能不能登录网站，发现没问题；然后查看后台日志，发现最近没有登录接口相关的报错；最后根据用户反馈的时间，去后台查日志记录。结果日志记录没有错误信息。

那这个问题没法解决了！除非找出用户的联系信息，和他去聊聊这个bug。

![20180523104004815][]

这样的情况很多，有时候及时有报错信息，还是一脸蒙逼，不知道为啥呢。

是不是很蛋疼？

不过这个问题已经可以很好滴解决啦！[Fundebug][]最近上线了一个新的大功能，叫做场景重现。其实直观理解就是加了个视频录制，把用户出错前的行为习惯可视化的录制，然后绑定到对应的错误上。通过观看场景重现，可以直观的去理解用户是如何触发错误的。如下面所示：

![20180523104709325][]

是不是很惊艳！不仅可以看到报错相关信息，还可以看到用户的操作视频。

## 实例测试 ##

为了验证一下是否真的这么牛逼，我弄了一个简单的网站来测试一下。

为了跟大家演示，我在Github上找了一个[TodoMVC][]项目，这样可以快速跑起来。

*  下载代码  
    `git clone https://github.com/isjingzhi/TodoMVC.git`

*  安装依赖  
    `npm install`

*  运行  
    `npm run start`

项目成功跑起来了，请看下图：

![20180523104104650][]

接下里我需要将Fundebug的JavaScript监控插件接入，首先在Fundebug网站创建一个Vue的监控项目。

![20180523104123982][]

然后接入代码，接入部分很多代码，只能截图一部分，不过还是比较简单的，你只需要复制黏贴就可以了。

![20180523104133897][]

首先在`index.html`中接入script脚本：

![20180523104145194][]

然后，在添加errorHandler代码：

![20180523104154964][]

最后，我们再假装造个错试试，我在`app.js`的`clearAlldone`函数中，故意把`this`改为`that`：

![201805231042089][]

来我们试试Fundebug能抓到怎样的错误。  
我随意添加任务，然后又删除任务，最后点击右下角的`Clear completed`，然后就收到报错了。

![20180523104222724][]

基本的报错堆栈信息都有

1.  ReferenceError
2.  Uncaught ReferenceError : that is not defined
3.  at Vue . clearAlldone ( http : *//localhost:3000/js/app.js:120:19)*
4.  at invoker ( http : *//localhost:3000/node\_modules/vue/dist/vue.js:2029:18)*
5.  at HTMLButtonElement . fn . \_withTask . fn . \_withTask ( http : *//localhost:3000/node\_modules/vue/dist/vue.js:1828:18)*

现在我们来看看场景重现的效果：

![20180523104247202][]

鉴于是一段"视频“，我再单独放出来：

![20180523104306769][]

通过这段视频，就可以很形象去理解用户的操作流程！不得不说是一大神器！

## 参考 ##

*  [TodoMVC on Github][TodoMVC]
 *  [Fundebug JavaScript监控插件][Fundebug JavaScript]

[20180523104004815]: /images/20220520/10acea26fdb949b8b7d8a40dc1d1b3ed.png
[Fundebug]: https://link.zhihu.com/?target=https%3A//www.fundebug.com/
[20180523104709325]: /images/20220520/ad41fe0506574d5da496bfe2f5d9b879.png
[TodoMVC]: https://link.zhihu.com/?target=https%3A//github.com/isjingzhi/TodoMVC
[20180523104104650]: /images/20220520/97fa266bf1b54a89bc06162eef491fae.png
[20180523104123982]: /images/20220520/7f9c98b4766c48ca8fe05679f845bf64.png
[20180523104133897]: /images/20220520/2847c50dc1b44ff6a9223268318ec210.png
[20180523104145194]: /images/20220520/d743ca19e3194c9d8a36a84e1e660d09.png
[20180523104154964]: /images/20220520/7b56e214d771462eaa1b234b0ab616c2.png
[201805231042089]: /images/20220520/d16f874a83d44340b8458fd7381efa14.png
[20180523104222724]: /images/20220520/887f77d0d1014a588f2c4dbe35403484.png
[20180523104247202]: /images/20220520/756e6487cdc64f6e8b1ab80da5e5feff.png
[20180523104306769]: /images/20220520/ad5200ef6f94404ea36eb0f8ad19e9d2.png
[Fundebug JavaScript]: https://link.zhihu.com/?target=https%3A//docs.fundebug.com/notifier/javascript/