Sentry前端部署拓展篇(sourcemap關聯、issue關聯、release控制)


原文首發於我的個人博客: 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上直接看到出錯源碼了:

image

報警郵件發送規則

Sentry默認會將所有采集到的異常發送警報郵件,有時我們可能希望只收到某個版本下的警報郵件,這時候就需要刪除默認的警報規則,然后新建自定義規則。

在項目設置中找到Alerts,左上角 “New Alert Rule”即可添加設置報警規則。

image

一個比較常規的規則引擎,自己配置一下就可以搞定,還是比較簡單。
如不想發送測試版本的異常,則設置過濾規則為 Release : staging 。

Issue關聯GITHUB/GITLAB

Sentry關聯項目倉庫后可以直接為該異常創建issue,方便責任認定,順便提高KPI :-)

1.選擇倉庫

項目設置>issue跟蹤 選擇自己所需的倉庫,下面以GITHUB為例

2.關聯倉庫

image

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

image

3.測試

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

image

修改sentry-cli默認設置

在上面的操作中,大家應該發現每次命令都需要重復輸入一長串 -o xxx -p xxxx 來指定我們的項目,一點不DRY。

只需要找到當前用戶文件夾下的 .sentryclirc 文件添加默認組織和項目即可,修改內容為如下:

[auth]
token=YOUR API TOKEN

[defaults]
url=服務器
org=組織
project=項目

結語

以上是自己目前在用的功能,基本涵蓋了常見場景。

當然,我還會繼續挖掘下去,大家遇到問題或者新發現也可以給我留言,互相交流。

下篇打算寫一下前端異常監控的分類,也就是需要監控哪些異常,敬請期待~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM