2018-8-31 前端错误跟踪 (用 Sentry + LogRocket)

这篇文章讲什么?

前端代码怎么做错误跟踪。因为不可能依赖用户碰到问题时主动告知。
需要某种工具来跟踪错误,如果代码在用户浏览器中抛出异常。应该上报到网站。
然后我可以看具体错误信息 + 浏览器是什么 + 浏览器版本 + 用户环境(Windows/Mac),IP 地址等

这篇文章对谁有用?

前端程序员

先讲结论(如果你关心细节再看正文)

最后用了 Sentry + LogRocket

正文开始

0. 先说下我的情况

我的前端是 Vue.js 写的单页应用。用了 Vuex, vue-router,单文件组件。
我在 macOS + Chrome 68 里开发测试。
因为网站针对国内的女性用户,用户对浏览器无所谓。所以会碰到用户用 360 浏览器,IE 浏览器,QQ 浏览器,百度浏览器。网站也适配了移动端 UI,所以用户可能在微信里打开。在手机浏览器里打开(比如 UC)
然后出问题我也很难跟踪。所以需要追踪前端错误的工具。

1. 我之前接触相关工具的经验

之前弄 yuzhu.me(寓住)的时候(这个网站是 Ruby on Rails + jQuery 写的)
用 Hotjar 做 session 跟踪,可以看到用户待了多久,做了什么操作
用 Mixpanel 看网站访问统计。每天访问量如何
用 Rollbar 跟踪后端 Ruby on Rails 的错误
用 Crisp 做网站右下角的实时聊天(就类似 Intercom)
但是这些工具都没法做前端错误跟踪。所以我得找新工具。。

2. 我对前端错误跟踪工具的期望值

  • 一个可以拿来即用的工具。几行代码就可以开始跟踪程序错误
  • 使用方便 + 界面舒服
  • 不能大幅度拖慢网站速度。或其他负面影响
  • 付费意愿:一个月100块钱人民币以下(折合 10~20美金)因为现在用户数 < 1000。不希望在这方面花太多钱。

3. 调查

谷歌一搜 bug tracking 其实有很多这类文章。什么 "15 best bug tracking tool for 2018"
看了一堆最后发现,除去界面很老(零几年开始的工具)和类型不对的(Redmine 做不了前端错误跟踪)

剩下只有几个:

  1. Sentry: https://sentry.io/
  2. LogRocket: https://logrocket.com/
  3. Bugsnag: https://www.bugsnag.com/
  4. Instabug: https://instabug.com/
  5. Backlog: https://backlog.com/
  6. TrackJS: https://trackjs.com/

这几个的界面都比较 Modern。看起来比较舒服。

4. 选择

最后选了 Sentry + Logrocket 俩一起用。
Sentry 负责跟踪错误。
LogRocket 可以 log session 复现用户的界面操作。
最重要的是这俩有 Free Plan。先免费用用看看效果。

这篇关于 Sentry 的文章也挺有帮助:
https://lonhon.top/2018/04/19/Sentry-deploy-simple/

最后,我参考过的资料如下:

https://www.softwaretestinghelp.com/popular-bug-tracking-software/

  • Plutora Test
  • Airbrake
  • Backlog
  • Bugzilla
  • JIRA
  • Mantis
  • Trac
  • Redmine
  • HP ALM/Quality Center
  • FogBugz
  • IBM Rational ClearQuest
  • Lighthouse
  • Zoho bug tracker
  • The Bug Genie
  • BugHost
  • DevTrack
    30 个,剩下的不列了

https://www.capterra.com/bug-tracking-software/

  • Instabug
  • Wrike
  • QuickBase
  • Rollbar
  • Marker.io
  • Axosoft
  • FogBugz
  • Planio
  • Sifter

https://reqtest.com/blog/best-bug-tracking-tools-projects/

  • ReQtest
  • Bugzilla
  • Fossil
  • Mantis BT
  • Trac

https://usersnap.com/blog/open-source-bug-tracking/

消灭Bug!推荐7款优秀的开源Bug跟踪工具
http://os.51cto.com/art/201703/534694.htm

构建前端异常监控系统
https://www.jianshu.com/p/eb5a56997026

在谷歌搜索 "前端 错误跟踪"
找不到什么有用的……

前端异常上报
https://blog.kazaff.me/2017/04/06/前端异常上报/

https://juejin.im/entry/5ae043a1f265da0b7155f278

谈谈前端异常捕获与上报
https://www.cnblogs.com/luozhihao/p/8635507.html

Bug Tracking Software
https://www.softwareadvice.com/bug-tracking/

前端异常 — 跨终端实时追踪
https://www.v2ex.com/t/326283

我们开发了一款核心开源的网站错误监控平台 FrontJS,邀请大家来使用
https://www.v2ex.com/t/419611

https://stackify.com/top-bug-tracking-tools/

https://blog.logrocket.com/rethinking-front-end-error-reporting-659db3950db3

还有

我过阵子(可能几个星期后)会来说更新下使用 Sentry 和 LogRocket 的感受。供其他人参考。

2018-8-31 前端错误跟踪 (用 Sentry + LogRocket)
Share this

Subscribe to 1c7 的博客