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,小明收到一封报警邮件:
Fundebug网站是基于AngularJS实现,这个错误与页面之间的跳转有关。由邮件可知,从landing状态跳转到teamSign状态时发生了错误。点击查看详情, 就能看到该错误的详细信息:
在错误面板中,小明可以查看错误栈,请求,设备和用户信息。这些信息可以帮助小明快速定位错误。
经过简单分析,小明断(xia)定(cai)网站的landing页面木有问题,这个错误应该是网络问题导致加载不完全而无法识别teamSign这个状态。如果网络好一点,加载成功了,就没问题了。然后他就将这个错误丢到一边去了。。。(Boss决定让小明跪键盘)
但是,问题不是这么简单,这个错误之后一共出现了85次,累计影响了24个用户。
小明意识到问题的严重性之后,查找了teamSign跳转相关的代码。他发现,在登录验证的中间件里面,如果用户登录token因为超时失效,那么就会跳转到teamSign页面要求用户重新登录。然而,跳转到teamSign为什么会失败呢?为什么呢?为什么呢?原来是小明把”teamSignin”写成了”teamSign”。(Boss决定让小明滚出去)
结论
一个小小的拼写失误,却会对用户造成不小的困扰。而事实上,测试无法保证产品100%没有问题。使用Fundebug进行实时错误监测,则可以第一时间发现并解决问题。
版权声明:转载时请注明作者Fundebug以及本文地址:https://blog.fundebug.com/2016/12/07/fundebug-catch-the-bug/