Fundebug抓到了这个前端Bug - Fundebug

Fundebug网站使用了我们自己的JavaScript错误检测插件，这样代码一旦发生错误，程序员小明就会及时收到报警邮件。

我们的前端代码做过严格的单元测试和端到端测试，讲(xiang)道(dang)理(ran)不会出什么错误。

然而，现实是残酷的，总会有各种Bug出现：

this.$parent.elctrl is undefined,
Attempted to redefine property ‘authenticate’.,
Cannot read property ‘language’ of null
…

乍一看这些错误也没什么，然而事实证明它们其实是一个个大写的Bug。得益于Fundebug实时监测，小明及时修复了这些问题。(此处应有掌声^*^)

今天呢，我们来聊聊其中一个Bug。这个Bug是由于拼写失误造成的，它会导致网页无法正常显示，虽说刷新一下就好了，但是却会影响用户体验。然而，小明最初却忽略了Fundebug的报警。

每一次报错都是一个潜在的Bug，不容忽视。

Bug回放

11月15日早上8:56，小明收到一封报警邮件：

enter image description here

Fundebug网站是基于AngularJS实现，这个错误与页面之间的跳转有关。由邮件可知，从landing状态跳转到teamSign状态时发生了错误。点击查看详情, 就能看到该错误的详细信息:

enter image description here

在错误面板中，小明可以查看错误栈，请求，设备和用户信息。这些信息可以帮助小明快速定位错误。

经过简单分析，小明断(xia)定(cai)网站的landing页面木有问题，这个错误应该是网络问题导致加载不完全而无法识别teamSign这个状态。如果网络好一点，加载成功了，就没问题了。然后他就将这个错误丢到一边去了。。。(Boss决定让小明跪键盘)

但是，问题不是这么简单，这个错误之后一共出现了85次，累计影响了24个用户。

enter image description here

小明意识到问题的严重性之后，查找了teamSign跳转相关的代码。他发现，在登录验证的中间件里面，如果用户登录token因为超时失效，那么就会跳转到teamSign页面要求用户重新登录。然而，跳转到teamSign为什么会失败呢？为什么呢？为什么呢？原来是小明把”teamSignin”写成了”teamSign”。(Boss决定让小明滚出去)

结论

一个小小的拼写失误，却会对用户造成不小的困扰。而事实上，测试无法保证产品100%没有问题。使用Fundebug进行实时错误监测，则可以第一时间发现并解决问题。