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上直接看到出錯源碼了：

報警郵件發送規則

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=項目

結語

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

固然，我還會繼續挖掘下去，你們遇到問題或者新發現也能夠給我留言，互相交流。

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