Sentry 部署應用實踐

Sentry提供自託管和基於雲的錯誤監控，幫助全部軟件團隊實時發現、分類和優先處理錯誤。

Sentry搭建

推薦使用docker進行搭建，操做起來相對方便，咱們把官方提供的項目下下來簡單幾步操做便可完成部署 https://github.com/getsentry/... 筆者目前的版本是 Sentry10.1.0 在後面的版本官方提供了@sentry/browser、@sentry/node 也就再也不使用raven.js了

# clone docker項目
git clone https://github.com/getsentry/onpremise 
# 執行安裝腳本，結束時會詢問是否建立初始帳號
bash install.sh
# 完成後啓動容器
docker-compose up -d

查看容器狀態，項目啓動，訪問9000端口

✨ 部署階段完成

項目接入

建立一個新的項目，官方提供了多種語言的sdk，照着說明均可以順利完成接入，前端部門我以爲稍微要麻煩點，這裏以就以React爲例，如何在umi等使用webpack打包工程中接入sentry。

1.安裝sentry依賴

2.在入口文件中初始化Sentry

✨項目接入完成了，so easy是否是？@sentry/browser也提供了一些方法用來自定義標籤，用戶信息等，具體移步npm。

上傳sourcemap對錯誤信息進行定位

前端由於要編譯，所需須要把源碼編譯先後位置相關的sourcemap上傳到sentry，上傳sourcemap能獲取到更多的錯誤信息，有利於和定位問題排查。

PS：可是要注意最後要將生成的map文件處理掉，不要留在生產環境，這樣作是不安全的。

sentry/webpack-plugin

上傳sourcemap的方法有不少，能夠利用sentry-cli，webpack也有不少插件，例如@sentry/webpack-plugin

new SentryPlugin({
    include: './dist',
    release: process.env.RELEASE_VERSION,
    configFile: 'sentry.properties',
    urlPrefix: '~/'
  })

在umi中可使用webpack的webpack-chain方式

// .umirc.js
export default {
  ...,
  chainWebpack(config, { webpack }) {
    if (process.env.NODE_ENV === 'production') {
      config.plugin("sentry").use(SentryPlugin, [{
        include: './dist',
        release: process.env.RELEASE_VERSION,
        ignore: ['node_modules'],
        urlPrefix:"~/static"
      }])
    }
  },
}

重要的url-prefix

urlPrefix是線上看js的完整路徑，必需要設置正確,否則仍是會看不到源碼😼

release設置

release是本次構建發佈的版本，取值能夠是{項目名}@{構建的時間}，通常初始化的時候都會配置，這裏有幾個思路：

1.從package.json的version和name取值。
每次上線更換版本號，打tag，可是實踐起來容易疏忽，能夠配合[release](https://www.npmjs.com/package/release)使用。

2.設置成環境變量
在docker構建時設置環境變量傳入

3.寫入一個常量文件

設置@sentry/cli代理

@sentry/webpack-plugin會用到@sentry/cli這個庫，常常會下不下來，能夠設置下淘寶代理:
sentrycli_cdnurl=https://npm.taobao.org/mirror...

webpack-sentry-plugin

另一個比較推薦的庫：webpack-sentry-plugin 好處是比@sentry/webpack-plugin多一下自定義配置，好比構建完刪除map文件，就比較實用，用@sentry/webpack-plugin能夠在構建完成時寫命令本身刪除。配置基本相似，能夠參照官網。

✨sourcemap上傳完成，當項目發生錯誤時就會觸發sentry告警，也能看到錯誤具體代碼。