Sentry搭建流程（前端vue接入）

一、背景&&作用

異常監控系統
收集異常
收集日誌資訊；介面時長資訊
及時警告；傳送郵件
展示統計資訊
code review成本高；有時候只能發現語法或者程式碼風格問題；對於邏輯業務問題沒有過多的時間深讀
相容性問題不好測試。流程長邏輯複雜並不能100%覆蓋到
使用者反饋問題不準確；不懂得一些專業術語；溝通成本高導致解決問題效率低
二、伺服器安裝Sentry
2.1 伺服器環境要求
Docker 19.03.6+
Compose 1.28.1+
4 CPU Cores
8 GB RAM
20 GB Free Disk Space
Python 3

docker 安裝流程 https://docs.docker.com/engine/install/centos/
Compose 安裝流程 https://docs.docker.com/compose/install/ (選擇linux環境安裝)
1. sudo yum install -y yum-utils
2. sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
3. sudo yum install docker-ce docker-ce-cli containerd.io
4. systemctl enable docker && systemctl start docker (啟動docker)
5. sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
6. sudo chmod +x /usr/local/bin/docker-compose
7. docker info (成功檢視資訊)

2.2 sentry部署

從 github 上獲取 Sentry 最新程式碼

git clone https://github.com/getsentry/onpremise.git
這時候如果遇到超時的情況；可以將包先拉到本地；然後拷到伺服器上 scp -r onpremise songxianling@182.92.84.242:/tmp 
進到/tmp資料夾下找到拷貝的檔案

進入 onpremise ，執行 install.sh 指令碼。
`cd onpremise
./install.sh`
手動執行 docker-compose up -d 以啟動 Sentry。

當看到所有的服務都起來了；web也正常了；這時候訪問域名對應的9000埠就能看到基礎頁面了?
2.3 配置郵箱傳送
修改 sentry/config.yml檔案配置

三、開始使用

3.1 建立專案

開啟錯誤控制檯；因為這個花費了1h+的時間；和版本有關係；網上其他人也沒設定這個也沒遇到我的問題

3.2 編輯配置檔案

專案根目錄下建立 .sentryclirc檔案

[defaults]
project=mars # 建立的專案名稱
org=sentry # 組名稱
url=http://sentry.jpgk.com.cn/ # sentry服務url

[auth]
token=8e8eea22357843ac9480a2e3ed373ae01659315567914de4b62442d9041287c7 #手動生成的token；具體下圖

3.3 跑起來測試錯誤

?在某個程式碼中隨意製造一個錯誤資訊；然後就能看到；控制檯的network處傳送了一條請求

?在sentry中就能看到對應的錯誤收集，麵包屑、ajax請求、之前的錯誤資訊等；這些資訊都可以為當前這次錯誤提供上下文資訊，重現發生錯誤的步驟；也能為復現和除錯bug提供有效的資訊

同時也可以自定義的上下文資訊的有：user 使用者資訊、 tags事件標籤資訊、 level 事件嚴重性錯、fingerprint 事件的分組規則、 extra data附加資料。

3.4 上傳source-map

webpack 手動上傳 sentry/webpack-plugin(webpack外掛)
sentry-cli 伺服器安裝
網上大部分都是用webpack外掛進行上傳的方式；這個地方我就不在敘述了
伺服器安裝 sentry-cli或者用Jenkins安裝之後執行指令碼（當前方案）
Jenkins配置sentry-cli
先在Jenkins下建立一個*變數* 供cli執行命令的時候使用；防止暴漏token關鍵資訊

增加build打包之後的執行指令碼；上傳到sentry伺服器

# 文件 https://docs.sentry.io/product/cli/releases/

curl -sL http://sentry.jpgk.com.cn/get-cli/ | bash || true

export SENTRY_ORG=sentry
export SENTRY_PROJECT=mars
export SENTRY_ENVIRONMENT=test # env環境變數
export SENTRY_RELEASE=v1.0.3 # 和main.js中init裡面的版本號要一致對應
# 更新版本資訊
/usr/local/bin/sentry-cli releases new -p $SENTRY_PROJECT $SENTRY_RELEASE
# 設定提交資訊
/usr/local/bin/sentry-cli releases set-commits $SENTRY_RELEASE --auto --ignore-empty
# 刪除所有已上傳的檔案
/usr/local/bin/sentry-cli releases files $SENTRY_RELEASE delete --all
# 上傳sourceMap和打包後的專案檔案
/usr/local/bin/sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ./dist --ignore ./dist/node_modules ./dist/vue.config.js
# 設定釋出
/usr/local/bin/sentry-cli releases finalize $SENTRY_RELEASE
# 設定環境資訊
/usr/local/bin/sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENT

沒有上傳sourceMap錯誤如下

上傳sourceMap後可以看到多出來兩個「原始的、最小化」標籤；同時也能定位到具體程式碼位置

至此；sentry部署基本完成；Sentry是一個開箱即用、相容性較好、功能強悍、並且生態圈非常完善的監控工具。你值得擁有！！ ??

四、得到了什麼

Sentry不是傳統日誌、監控系統的替代品；它更專注於「應用的異常資訊」；從而讓我們更快更方便的發現問題、定位問題、解決問題；減少影響面、給優化提供方向；相同的問題進行合併；豐富的資料體現影響數量；同時提供issue的時間流；可以設定狀態跟進人；效能指標提供有力的資料支撐

前端【使用前】執行到使用者端客戶端；除資源請求異常；其他的均無法追蹤；出現無法復現。的問題只能依靠使用者的反覆回饋；效率低、復現難度大
前端【使用後】使用者端客戶端任何異常都可以上報；同時得到影響人數影響面；還能主動的觸發一些上報（比如廢棄的功能）；有使用者操作的上下文；有跡可循的復現問題；部分不影響使用的也能監控到；可以優化使用者體驗

Tips

遇到docker-compose啟動不起來的時候；檢視版本是否是最新的；sentry要求是1.28版本以上；我安裝的時候命令是1.29+；卻安裝出來一個1.18+的版本
遇到自己執行 ./.install.sh 不可以的時候；可以讓運維幫忙執行；是因為環境變數問題；而且暫時配置不了；整個安裝過程可能20min左右；也有可能遇到安裝不成功的時候；看運氣；畢竟有牆
遇到sourcemap上傳成功了；依然不能定位到具體程式碼的(warning: could not determine a source map reference (Could not auto-detect referenced sourcemap)；可以將vue的devtool修改為'source-map'開啟；困擾時間最久的問題
未出現「測試郵件」可以參考【Sentry運維】基於Docker安裝的Sentry配置郵箱_MacwinWin的部落格-CSDN部落格

Sentry搭建流程（前端vue接入）

一、背景&&作用

二、伺服器安裝Sentry

2.1 伺服器環境要求