前端錯誤監控 -【Vue】與【Sentry】的結合
作為一個前端，你是不是經常遇到這樣情況：
客戶：為什麼我這個頁面看不到資料？？ 我：（急忙開啟網站），我這邊資料顯示正常！ 客戶：沒有啊！我這邊看不到！ 我：（語無倫次），可我...我這邊正常的呀 客戶：BALABALA
相信各位前端er經常遇到這樣的問題，明明自己本機開啟一切正常，到了客戶那邊問題卻一大堆，還根本定位不到問題，總不能叫客戶開啟 F12 檢視控制檯看下什麼錯誤吧！因此本文主要介紹如何將 vue 與 sentry 結合，達到實時監控並收集錯誤日誌的效果。
不知道 sentry ？趕緊看我上一篇文章記一次Sentry部署過程
Vue與Sentry初步結合
搭建好 Sentry 後，點選建立專案，選 Browser -> Vue ，建立完成後，可以按照裡面的提示或者官網 的教程來操作，步驟如下：
// 安裝官方提供的庫 yarn add @sentry/browser yarn add @sentry/integrations 複製程式碼
在 main.js 檔案裡面新增下面一段程式碼
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
Sentry.init({
dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
})
]
})
// 關於 DSN 我在上一篇有介紹到
複製程式碼
新增完畢後，我們 npm run dev 來看下吧，隨便在某個元件地方製造一個錯誤
然後讓我們來開啟看下有沒有收集到這個錯誤日誌，成功的話應該像如下圖片
表明我們剛才觸發的錯誤已經被 sentry 成功捕獲到了，可以點選進去檢視詳情
可以看到錯誤了 this.aa is not a function ，這樣我們已經初步成功的將 vue 和 sentry 結合上了
Sourcemap結合
上面我們已經成功的在 vue 中集成了 sentry 並捕獲到了錯誤，但是不是發現了一個問題，雖然知道錯誤內容，可是我們不知道具體在哪個元件的哪一行。這是因為用 webpack 打包過程中會將js檔案進行壓縮混淆等，因此要準確定位到錯誤，需要我們將 sourcemap 也上傳一份供 sentry 解析，這裡提供了兩種方式，可以在官網 中檢視資料
sentry-cli@sentry/webpack-plugin
這裡我選擇 sentry-cli 來完成， @sentry/webpack-plugin 主要是用來webpack打包時候同時上傳一份 sourcemap 到 sentry
全域性安裝 @sentry/cli
npm i -g @sentry/cli 複製程式碼
安裝完畢後，進入網站生成 auth token ，具體步驟如下：
點選 賬號->API keys ，點選 Create New Token
按照下圖，記得 project:releases 和 project:write 要勾選上
生成完成 token 後可以進行下一步，進入專案的根目錄，執行
sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login 複製程式碼
這裡因為我們上面已經成功生成了 auth token ，所以輸入 n 後會提示你輸入剛才那個token，這樣就配置完成了
下一步我們在 sentry 要給你的專案先設定一個版本號，這樣它才知道要對應去找哪裡的 sourcemap 進行解析
# sentry-cli releases -o 組織名 -p 專案名 new 版本號 sentry-cli releases -o sentry -p vue new [email protected] # Created release [email protected]. 複製程式碼
組織名可以在你賬號裡面看到，這樣已經建立完成一個新的版本，我們可以開啟網站看下，已經有我們剛建立的版本號了
然後我們需要在 main.js 檔案當中修改下我們的配置
Sentry.init({
dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
release: '[email protected]', // 新增加的+
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
})
]
})
複製程式碼
配置完成後，執行 npm run build 打包，接下來就是把 sourcemap 上傳到 sentry
sentry-cli releases -o 組織名 -p 專案名 files 版本號 upload-sourcemaps 打包後js的目錄 --url-prefix 線上js訪問地址 sentry-cli releases -o sentry -p vue files [email protected] upload-sourcemaps dist\static\js --url-prefix ~/static/js 複製程式碼
特別注意！！，這個 --url-prefix 是你線上訪問到js檔案的路徑， ~ 就是你網站的根目錄，比如我網站的靜態檔案是這樣 http://192.168.144.163:8080/static/js/xxxx.js ，那麼按照上面例子填就是正確的，因為我網站根目錄就是 http://192.168.144.163:8080 ，上傳成功後可以在 Releases -> Artifacts 中看到剛才上傳的檔案
在本地簡單起一個 nginx 配置下，因為在 dev 環境下是訪問不到 sourcemap ，所以必須在 prod 環境下才能測試，繼續簡單觸發一個錯誤，在網站上檢視，會發現多了檢視原始碼的選項
這樣我們就可以成功定位到問題具體出現在哪個檔案的哪一行，要刪除map檔案的話可以執行
sentry-cli releases -o 組織名 -p 專案名 files 版本號 delete --all sentry-cli releases -o sentry -p vue files [email protected] delete --all 複製程式碼
綜上，基本就完成了 vue 與 sentry 的結合了，美中不足的可能就是每次釋出版本的話可能需要手動上傳一次 sourcemap 檔案，有興趣的可以研究下 webpack 外掛 @sentry/webpack-plugin ，在打包的同時上傳到 sentry 去。
可能遇到的問題
其中花費時間比較久的一個問題是在上傳 sourcemap 檔案的操作中，這個 --url-prefix 的值一定要準確，並且不需要用引號包裹，要注意，一般如果檔案確實上傳成功了，但還是沒顯示具體在哪一行的話，大部分原因還是可能 sourcemap 檔案地址不正確，導致訪問不到，所以解析不了，這點要注意！
小結
搭建完成後，一旦有錯誤時我們就可以實時收集到，並可以看到錯誤的具體詳情，分析然後排查問題，對於一些偶現的BUG很有作用，當然， sentry 能做到的只是查詢你程式碼上發生的問題，對於業務上的錯誤還是要通過其他一些方法記錄啦！
有問題的歡迎在下方留言，儘量解答。文中有錯誤的也歡迎指出！