前端錯誤日誌監控-sentry 使用篇

安裝 sentry 的文章在這裏：前端錯誤日誌監控-sentry 安裝

接下來主要介紹 sentry 的日產使用，包括但不侷限於：

文章目錄

前端錯誤日誌監控-sentry 使用篇

基礎的配置

基礎的配置

修改語言，修改時區

平臺默認是全英的，有時候靠翻譯也比較麻煩，其實支持切換部分中文（畢竟還沒完全翻譯過來）

時區就在語言下面的配置，可以改成亞洲/上海的時區

設置 apikey

非常重要的一步
第一次搭建的時候項目已經打起來了。9000 端口也可以訪問了，然後接入 vue 項目也沒問題，可是等到有錯誤日誌要上傳的時候接口 502！！

接口訪問的其實就是 http://{ip}:9000/api/{xxxx} 訪問的就是 api 的環境。所以這裏不設置 api 很有可能像我一樣上傳錯誤日誌的時候502

後來的時候我就算把 apikey 刪除了，他還是可以訪問，所以我也不知道具體問題出在哪裏了，復現了在具體說說

配置的話，這 2 個必勾。涉及到後面上傳 sourceMap 文件的權限

設置成功後可以看到一條 apikey

創建一個項目管理

上面的都是一些基礎配置工作，還有很多配置可以自己琢磨。下面創建一個項目

實在沒想到，vue 居然要搜索才能找到 emmmm…

這裏是選擇團隊，比如 vue 項目通常都是前端組負責的了，那前端可以自己創建一個團隊，app 組又自己創一個團隊，後端再來一個團隊，那項目就不會相互干擾（這些都是題外話，怎麼合適怎麼用~）。然後點擊創建就 OK 了

創建後可以看到一篇接入文檔，寫的非常詳細了

怕忘記了可以點右上角的 full documentation 查看官方的文檔 Vue Docs

接入 vue 項目

萬事俱備只欠 bug

很多以前的文章接入的是第三方的插件 Rxxx 的那個插件，既然我們裝了最新的 sentry。就用文檔推薦的官方插件把

npm 安裝官方也寫的很詳細了，我就不多寫了，就是安裝 @sentry/browser和@sentry/integrations

着重講一下這一段：

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import { Vue as VueIntegration } from '@sentry/integrations'

Sentry.init({
  dsn: 'https://<key>@<organization>.ingest.sentry.io/<project>',
  integrations: [new VueIntegration({ Vue, attachProps: true })]
})

第 6 行，dsn 配置，其實就是初始化文檔的時候給出的配置。官方文檔給的是接入他們平臺的，這個留意下就行
- <key>就是當前項目的一個標識
- <project> 是當前項目的編號（如果是第一次創項目應該是 2-3）,因爲官方有部分案例，佔了 1-2
抄文檔的一段內容：此外，Integrations.Vue 接受一些不同的配置選項，這些選項可讓您更改其行爲：
- 傳遞 Vue 是可選的，如果不傳遞，則 window.Vue 必須存在。
- 傳遞 attachProps 是可選的，true 如果沒有提供則爲傳遞。如果將其設置爲 false，Sentry 將禁止發送所有 Vue 組件的道具進行記錄。
- 傳遞 logErrors 是可選的，false 如果沒有提供則爲傳遞。如果將其設置爲 true，Sentry 也將調用原始 Vue logError 函數。

意思就是，之前有錯誤，控制檯會看到對應的錯誤拋出。而如果用了插件後，能被捕獲的錯誤將不會被打印在控制檯。部分無法捕獲的就會顯示在控制檯（比如圖片 404 之類的）

到了最激動的時候：寫一個 bug

vue：熟練
寫 bug：精通 😃

隨便拋出一個錯誤

接入 sentry 之前，可以看到控制檯是有報錯的：
接入 sentry 後：
可以看到控制檯並不報錯了。取而代之的是發送了一個請求，把很詳細的錯誤日誌上傳到了後臺中（這時候後臺收到的還是壓縮後的）

上傳 sourceMap 定位問題

很激動的終於捕獲了自己的 bug。趕緊到控制檯看下捕獲的是啥樣的：

沒有 sourceMap 的情況

有 sourceMap 的情況

是不是天差地別，所以說爲啥有 soureMap 很重要。可是上傳 sourMap 也是很講究技巧的：如果你直接把 soureMap 上到生產環境，那和代碼開源沒啥區別（可以通過 sourceMap 完全複製一份你的項目）

上傳 sourceMap 也有 2 個插件，一個是 cli 工具，一個是 webpack 插件。我最後採用的就是 cli 的工具

sentry-webpack-plugin: Sentry 提供的 Webpack 插件，靈活性不高
sentry-cli: 靈活性比較高，可以針對不同項目進行單獨的配置

安裝 cli

# 記得全局安裝，這樣方便點
 npm install sentry-cli-binary -g

登陸 cli

ip 改成自己的 IP 地址，端口也是
--url 指定自己搭建的服務器，而不是官方的登陸

# 如果你用的是官方版，不是自搭建的，可以直接login
# 直接login其實就相當於：sentry-cli --url https://sentry.io/ login
sentry-cli login

# 如果像我一樣是自己搭建的，用這句
sentry-cli --url https://{ip}:9000/ login

詢問是否需要幫你打開瀏覽器，開不開都行

然後要你輸入 token
重點來了：
2.1. 找到我們第一步生成的 apitoken。粘貼進去
2.2. 還記得之前說要勾上讀寫的權限嗎，作用就在這裏了

查看登陸信息
根據 token 最後提示的位置

默認情況下，url 和 org 是沒有的，需要自己補一下，就是服務器地址，然後組織的名稱，我用的都是默認的組織了。這裏的配置很重要，這涉及到到時候上傳 sourMap 文件的驗證

回到自己項目中。開始上傳 sourceMap

命令如下：

sentry-cli releases files v1.0.0 upload-sourcemaps --url-prefix '~/relx_demo/js' './
dist/js/'

參數說明：

--url-prefix 網頁的前綴，比如我們的項目跑在 http://xxx.com/relx_demo/#/。那我們的前綴就是 relx_demo。我們需要訪問 http://xxx.com/relx_demo/js 才能找到對應的 JS 文件

後面的.dist/js/ 這個是你本地項目的 sourMap 文件位置。上傳該文件下的文件

網絡不好，上傳失敗的

正常上傳成功的提示

題外話
之前也說過sourceMap一定不能傳到線上，可是我們又得把 sourceMap 傳到自己的 sentry 中。其中我們可以通過插件上傳後，發佈新版本的時候手動把 sourceMap 刪除。

可是這也太累了把。。。

我們可以用 git 忽略文件的特性:

創建一個 .gitignore文件

我們把打包後的 map 保留。可是不通過 git 上傳，然後手動輸入 cli 命令上傳 sourceMap。這樣我們只需要每次打包後，在執行一段命令就可以了

這還有點麻煩？那我們可以在集成一套工具linux 安裝 Jenkins 實現自動獲取代碼打包前端代碼

在 Jenkins 中寫好腳本，全程自動化，感興趣的可以自己折騰下

添加發布的版本號

在 cli 中我們上傳 sourceMap 的時候指定了 v1.0.0。其實這個是版本號，要全局匹配的

Sentry.init({
  dsn: `http://${process.env.VUE_APP_SEN_TRY_KEY}@{ip}:9000/3`,
  integrations: [new VueIntegration({ Vue, attachProps: true })],
  release: 'v1.0.0' // 指定bug上傳到 release: 'v1.0.0'
})

到時候每次發佈新版本，bug 都會歸納到對應版本中，不會混雜在一起

郵件提醒

未完待續。家裏網絡太差，連不上服務器了~

自定義錯誤消息

未完待續

前端錯誤日誌監控-sentry 使用篇