前端錯誤監控 -【Vue】與【Sentry】的結合

Trick93發表於2019-04-26
前端Vue

前言

作為一個前端，你是不是經常遇到這樣情況：

客戶：為什麼我這個頁面看不到資料？？
我：（急忙開啟網站），我這邊資料顯示正常！
客戶：沒有啊！我這邊看不到！
我：（語無倫次），可我...我這邊正常的呀
客戶：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 來看下吧，隨便在某個元件地方製造一個錯誤

Image.png

然後讓我們來開啟看下有沒有收集到這個錯誤日誌，成功的話應該像如下圖片

Image1.png

表明我們剛才觸發的錯誤已經被 sentry 成功捕獲到了，可以點選進去檢視詳情

2019-04-26_113459.png

可以看到錯誤了 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

Image2.png

按照下圖，記得 project:releases 和 project:write 要勾選上

Image3.png

生成完成 token 後可以進行下一步，進入專案的根目錄，執行

sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login
複製程式碼

Image4.png

這裡因為我們上面已經成功生成了 auth token，所以輸入 n 後會提示你輸入剛才那個token，這樣就配置完成了

下一步我們在 sentry 要給你的專案先設定一個版本號，這樣它才知道要對應去找哪裡的 sourcemap 進行解析

# sentry-cli releases -o 組織名 -p 專案名 new 版本號
sentry-cli releases -o sentry -p vue new pro@1.0.1
# Created release pro@1.0.1.
複製程式碼

組織名 可以在你賬號裡面看到，這樣已經建立完成一個新的版本，我們可以開啟網站看下，已經有我們剛建立的版本號了

2019-04-26_141307.png

然後我們需要在 main.js 檔案當中修改下我們的配置

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
    release: 'pro@1.0.1', // 新增加的+
    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 dev@1.0.1 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 環境下才能測試，繼續簡單觸發一個錯誤，在網站上檢視，會發現多了檢視原始碼的選項

2019-04-26_143126.png

這樣我們就可以成功定位到問題具體出現在哪個檔案的哪一行，要刪除map檔案的話可以執行

sentry-cli releases -o 組織名 -p 專案名 files 版本號 delete --all

sentry-cli releases -o sentry -p vue files dev@1.0.1 delete --all
複製程式碼

綜上，基本就完成了 vue 與sentry 的結合了，美中不足的可能就是每次釋出版本的話可能需要手動上傳一次 sourcemap 檔案，有興趣的可以研究下 webpack 外掛 @sentry/webpack-plugin ，在打包的同時上傳到 sentry 去。

可能遇到的問題

其中花費時間比較久的一個問題是在上傳 sourcemap 檔案的操作中，這個 --url-prefix 的值一定要準確，並且不需要用引號包裹，要注意，一般如果檔案確實上傳成功了，但還是沒顯示具體在哪一行的話，大部分原因還是可能 sourcemap 檔案地址不正確，導致訪問不到，所以解析不了，這點要注意！

小結

搭建完成後，一旦有錯誤時我們就可以實時收集到，並可以看到錯誤的具體詳情，分析然後排查問題，對於一些偶現的BUG很有作用，當然，sentry 能做到的只是查詢你程式碼上發生的問題，對於業務上的錯誤還是要通過其他一些方法記錄啦！

有問題的歡迎在下方留言，儘量解答。文中有錯誤的也歡迎指出！

相關文章