前端錯誤監控 -【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 pro@1.0.1
# Created release pro@1.0.1.
複製代碼

組織名 能夠在你帳號裏面看到，這樣已經建立完成一個新的版本，咱們能夠打開網站看下，已經有咱們剛建立的版本號了

而後咱們須要在 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 環境下才能測試，繼續簡單觸發一個錯誤，在網站上查看，會發現多了查看源碼的選項

這樣咱們就能夠成功定位到問題具體出如今哪一個文件的哪一行，要刪除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 能作到的只是查找你代碼上發生的問題，對於業務上的錯誤仍是要經過其餘一些方法記錄啦！

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