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

最后用了 Sentry + LogRocket 在 Vue.js 单页应用上

Cheng Zheng

Aug 31, 2018 • 4 min read

这篇文章讲什么？

前端代码怎么做错误跟踪。因为不可能依赖用户碰到问题时主动告知。
需要某种工具来跟踪错误，如果代码在用户浏览器中抛出异常。应该上报到网站。
然后我可以看具体错误信息 + 浏览器是什么 + 浏览器版本 + 用户环境（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 做不了前端错误跟踪)

剩下只有几个：

这几个的界面都比较 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 的感受。供其他人参考。