原文首發於我的個人博客: https://lonhon.top/
之前的《基礎篇》主要介紹了Sentry和基本部署流程,在實際使用過程中你會發現Sentry受歡迎的原因:除了單純的監控異常還有溯源、分發任務等一條龍服務。本篇文章主要講述Sentry中較好的拓展功能,包括:
- Release控制,分別處理線上、測試環境的異常
- 通過SourceMap直接查看出錯js源碼
- 報警郵件發送規則
- Issue關聯GITHUB/GITLAB
上篇文章已將Sentry的各種文檔、社區貼出,本文更多是操作性的東西,代碼、圖片較多。
准備工作
需要安裝Sentry對應的命令行管理工具 sentry-cli,方式如下:
npm i -g @sentry/cli
安裝完成后可通過 sentry-cli -V 查看版本。
生成token
點擊Sentry頁面左下角頭像,選擇API后就可以生成token,記得勾選 project:write 權限。
登錄
$ sentry-cli --url https://myserver/ login
回車后輸入上一步獲得的 token 即可,如果用的Sentry的SaaS可以不指定 url
Release控制
在開發過程中我們希望不監控本地環境下的異常,測試環境的和生產環境的異常分離,所以就需要Release來進行“異常”的版本控制。
創建Release
sentry-cli releases -o 組織 -p 項目 new staging@1.0.1
這里的 staging@1.0.1 就是我們指定的版本號. -o -p可以通過頁面左上角可以看到。現在我們可以通過創建多個版本號來進行異常分類。
同時,也可以通過頁面中"Releases"查看是否創建成功。
本地應用Release
回到前端項目中,在config添加對應的release,指定版本后,每次上報的異常就會分類到該版本下。
Raven.config(DSN, {
release: 'staging@1.0.1'
}).addPlugin(RavenVue, Vue).install()
刪除Release
sentry-cli releases -o 組織 -p 項目 delete staging@1.0.1
注意 刪除某個release時需要將其下的異常處理掉,並將該版本的sourcemap文件清空,完成上面兩步可能還要等待2小時才能刪除,不然會報錯:該版本還有其它依賴。
SourceMap管理
目前來說,前端項目基本都會壓縮混淆代碼,這樣導致Sentry捕捉到的異常堆棧無法理解。
我們希望在Sentry直接看到異常代碼的源碼時就需要上傳對應的source和map。
1.上傳 SourceMap
sentry-cli releases -o 組織 -p 項目 files staging@1.0.1 upload-sourcemaps js文件所在目錄 --url-prefix 線上資源URI
這里需要注意,我們一般會將公共模塊壓縮在vendor.js中,此時可能會出現因為vendor.js.map的文件體積過大導致不能上傳,目前我的做法是不上傳vendor.js和vendor.js.map。
PS: 記得別把map文件傳到生產環節了,又大又不安全...
PS: 免費服務的文件上限為40MB。
2.清空 SourceMap 文件
sentry-cli releases files staging@1.0.1 delete --all
也可以選擇在 版本>工件 里點擊一個個辣雞桶進行刪除(逃...
3.重要的url-prefix
這里的url-prefix可以通過線上看js文件的完整路徑,有可能static不在根目錄下
舉例說明,項目線上資源URI如下:
https://www.baidu.com/asset/js/main.mini.js
我們上傳時文件的url-prefix就應該設置為 '~/asset/js/'
這個坑踩了好幾天才弄明白,反正規則就是: ~/為網站根目錄,后續路徑須對應source
這個弄好了就能在Sentry上直接看到出錯源碼了:

報警郵件發送規則
Sentry默認會將所有采集到的異常發送警報郵件,有時我們可能希望只收到某個版本下的警報郵件,這時候就需要刪除默認的警報規則,然后新建自定義規則。
在項目設置中找到Alerts,左上角 “New Alert Rule”即可添加設置報警規則。

一個比較常規的規則引擎,自己配置一下就可以搞定,還是比較簡單。
如不想發送測試版本的異常,則設置過濾規則為 Release : staging 。
Issue關聯GITHUB/GITLAB
Sentry關聯項目倉庫后可以直接為該異常創建issue,方便責任認定,順便提高KPI :-)
1.選擇倉庫
項目設置>issue跟蹤 選擇自己所需的倉庫,下面以GITHUB為例
2.關聯倉庫

點擊上圖中醒目的issue,然后進行GITHUB登錄第三方授權,授權完成后再次點擊“Create New Issue”就會出現下圖了。

3.測試
Sentry中創建issue后就可以到我們GITHUB倉庫中查看了,如下

修改sentry-cli默認設置
在上面的操作中,大家應該發現每次命令都需要重復輸入一長串 -o xxx -p xxxx 來指定我們的項目,一點不DRY。
只需要找到當前用戶文件夾下的 .sentryclirc 文件添加默認組織和項目即可,修改內容為如下:
[auth]
token=YOUR API TOKEN
[defaults]
url=服務器
org=組織
project=項目
結語
以上是自己目前在用的功能,基本涵蓋了常見場景。
當然,我還會繼續挖掘下去,大家遇到問題或者新發現也可以給我留言,互相交流。
下篇打算寫一下前端異常監控的分類,也就是需要監控哪些異常,敬請期待~
