Sentry簡介

Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具，可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤沧竟。其專注于錯(cuò)誤監(jiān)控以及提取一切事后處理所需的信息;支持幾乎所有主流開發(fā)語言(JS/Java/Python/php)和平臺(tái), 并提供了web來展示輸出錯(cuò)誤。
sentry官網(wǎng)：https://sentry.io/

Sentry安裝

Sentry 是一個(gè)開源的工具本今，可以自行搭建誊册。
官方支持兩種安裝和運(yùn)行 Sentry 服務(wù)器的方法，Docker 和 Python茅坛。推薦使用 Docker。
這里建議讓公司的運(yùn)維或者后臺(tái)同學(xué)搭建好则拷，搭建好之后讓他給你賬號(hào)

Sentry 前端部署

創(chuàng)建Vue類型的Sentry并引入到項(xiàng)目中

1.png

新版的Sentry并不會(huì)自動(dòng)生成dsn,需要我們自己按照格式拼接
dsn: '協(xié)議://公鑰@服務(wù)器地址/項(xiàng)目ID',

// main.js
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
if (process.env.NODE_ENV === 'production') { //只在生產(chǎn)環(huán)境使用
  Sentry.init({
    dsn: 'http://8aac4526a2cdds198723f8d23520ec@127.0.0.1/17',
    integrations: [
      new Integrations.Vue({
        Vue,
        attachProps: true
      })
    ]
  })
}

至此，項(xiàng)目已經(jīng)能夠被Sentry監(jiān)控到了料祠，接下來上傳source-map輔助定位問題

如果不上傳source-map的話，雖然也能監(jiān)控道控制臺(tái)錯(cuò)誤省容，但是由于源文件都被webpack處理混淆壓縮，所以不太好定位到具體原因燎字，因此建議上傳source-map

上傳source-map

上傳的方式有多種腥椒。可以通過 sentry-cli 通過命令行的方式來上傳 source-map候衍，但是需要手動(dòng)上傳笼蛛。也可以采用 webpack-plugin 這個(gè)插件，可以在 build 的同時(shí)自動(dòng)上傳 source-map蛉鹿。這里建議采用自動(dòng)上傳策略滨砍。

1、在項(xiàng)目跟目錄下增加.sentryclirc文件，其中的token可以在左上角頭像里的api keys里面獲取惋戏。

[auth]
token=6e3e03b8c0594d1186db2177d58942eb4132823839294a848593eff31eb712f9

[defaults]
url=服務(wù)器地址
org=你的組織名
project=剛剛創(chuàng)建的項(xiàng)目名

2领追、安裝webpack-plugin 插件并使用，這里給出vue-cli3的配置

npm i @sentry/webpack-plugin -D // 安裝插件

//vue.config.js 
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
module.exports = {
  ...
  productionSourceMap: true,
  configureWebpack: config => {
     if (process.env.NODE_ENV === 'production') { //只在上傳環(huán)境上傳
        config.plugins.push(
          new SentryWebpackPlugin({
            include: './dist',
            release: 'game-center-html@prod',
            urlPrefix: '~/game/', //這個(gè)參數(shù)指定source-map文件的路徑响逢，默認(rèn)服務(wù)器根目錄绒窑，如果路徑錯(cuò)誤將無法定位map文件
            ignoreFile: '.sentrycliignore',
            ignore: ['node_modules', 'webpack.config.js'],
            configFile: 'sentry.properties'
          })
        )
      }
   }
}

urlPrefix參數(shù)重要說明
~/為網(wǎng)站根目錄，后續(xù)路徑須對(duì)應(yīng)source-map
這里的urlPrefix可以通過線上看js文件的完整路徑舔亭，有可能不在根目錄下
比如線上js文件的路徑為http://www.baidu.com/game/js/app.dsds323.js
我們上傳時(shí)文件的urlPrefix就應(yīng)該設(shè)置為 '~/game/'

3些膨、 修改main.js中的配置

// main.js
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
if (process.env.NODE_ENV === 'production') { //只在生產(chǎn)環(huán)境使用
  Sentry.init({
    dsn: 'http://8aac4526a2cdds198723f8d23520ec@127.0.0.1/17',
    integrations: [
      new Integrations.Vue({
        Vue,
        attachProps: true
      }),
       new Integrations.RewriteFrames() //<-----新增
    ],
    release: 'game-center-html@prod'  //<-----新增
  })
}

release說明
必須保證 vue.config.js和main.js 兩個(gè)配置中的 release 版本號(hào)相同，這樣的話 Sentry 才能將source-map文件一一對(duì)應(yīng)上,每次修改都會(huì)在后臺(tái)生產(chǎn)一個(gè)新的版本钦铺。

至此订雾，每次執(zhí)行npm run build都會(huì)生產(chǎn)source-map并上傳到Sentry

回到Senrtry控制臺(tái)，就能在版本中看到和release同名的版本,新的錯(cuò)誤監(jiān)控將能夠看到源代碼

刪除項(xiàng)目中的map文件

由于我們?cè)?code>vue.config.js中開啟了productionSourceMap,所以每次npm run build都會(huì)生產(chǎn)map文件矛洞，這就會(huì)導(dǎo)致打包體積很大洼哎，并且如果map文件被上傳到線上，可能存在安全隱患沼本，所以建議在打包之后刪除map文件噩峦，因?yàn)閳?zhí)行npm run build之后已經(jīng)將source-map上傳到了Sentry，本地打包出來的map文件已經(jīng)沒有用了擅威，所以是可以刪除的
1、手動(dòng)刪除
2冈钦、構(gòu)建命令刪除

完結(jié)