Fundebug抓到了这个前端Bug
发布在Fundebug2017年1月4日view:413前端开发AngularjsJavaScript开发调试工具Kaylyn前端工程师Betti
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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进行实时错误监测,则可以第一时间发现并解决问题。

版权声明: 转载时请注明作者Fundebug以及本文地址: https://blog.fundebug.com/2016/12/07/fundebug-catch-the-bug/

评论
发表评论
5个月前

网站很赞,很好用

WRITTEN BY
Fundebug
https://fundebug.com, 线上bug实时监控
TA的新浪微博
PUBLISHED IN
Fundebug

Fundebug提供Web前端JavaScript代码的线上错误(bug)监测。支持所有浏览器, 包括IE8, 后台通过智能聚合,将大量看似不同实则相同的错误聚合到一起,减少干扰。而且Fundebug插件的使用十分简单: 只需要添加一行代码,三分钟就可以享受实时线上错误监测服务。欢迎您免费使用! 官方网站:https://fundebug.com

我的收藏