第一步：webpack plugin 選擇
@sentry/webpack-plugin 與 webpack-sentry-plugin掘猿，個人感覺 webpack-sentry-plugin 除了有個 deleteAfterCompile 配置項用來刪除 sourcemap 以外毫無優(yōu)勢可言，這個刪除的時機不可控唇跨，如果你在上傳 sentry 后不再需要 sourcemap术奖，在后續(xù)打包的 ZipPlugin 里忽略 map 文件就行了，下載量也是前者碾壓后者（28w+ : 1w+）
第二步：登錄 sentry（如果我沒猜錯的話轻绞，你直接寫 .sentryclirc 文件采记，就不需要 login 了）
- 安裝 sentry-cli
- sentry-cli --url xxxxxx(你 sentry 所在地址) login
登錄成功后會生成 .sentryclirc 文件，并把你輸入的 token 塞進去
第三步：配置webpack
以下是我的配置信息政勃，對應(yīng) vue-cli 的 vue.config.js 中的 chainWebpack
@sentry/webpack-plugin
.sentryclirc 配置：
[defaults]
url = xxx
org = xxx
project = xxx
[auth]
token = xxxxxxx
不配置 .sentryclirc 的 @sentry/webpack-plugin （如果配置了這里可以省略前四個, 感覺網(wǎng)上文章互相抄唧龄，很少有人不寫 .sentryclirc，我只是大概看了看源碼發(fā)現(xiàn)這些字段可以從 option 內(nèi)直接燃樵丁）:
config.plugin('sentry').use(SentryPlugin, [{
url: 'https://xxx.xxx.xx/',
org: '組織名', // 老版本建議不要去 setting 里面查既棺，會有個大寫首字母的混淆項讽挟，直接在 url 里 copy 就行
project: '項目名', // url 里面 copy，組織或項目輸入錯誤會導致報錯：類似于丸冕。耽梅。。project not found
token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // // 右下角或者設(shè)置里獲取到的 Sentry Web API auth tokens
include: './dist/app.203/js', // sourcemap 資源的獲取路徑
configFile: 'sentry.properties', // SentryCli 的第一個入?yún)⒆侄闻种颍瑳]探究其具體意義
release: ' xxx', // release 名
urlPrefix: '~' // 這玩意似乎必須從根路徑出發(fā)眼姐，也就是 ~ 或者 ~/xxx/，具體參考 map 所在路徑
// 配置相對路徑?jīng)]啥用處佩番，路徑不對會導致 sourcemap 匹配不上
// 如有特殊需要众旗，可以在 Sentry.init 的時候通過 beforeSend 來擰 transaction 字段，大致如下
}])
注：一般在線的 js 文件應(yīng)該用不到趟畏，因為我這邊 js 文件是客戶端拉到本地展示的內(nèi)嵌頁面贡歧，根目錄是無法寫死的
options: Sentry.BrowserOptions = {
beforeSend: (event: Sentry.Event, hint?: Sentry.EventHint) => {
// 這里會有兩個 stacktrace 的獲取路徑
// 一個在 event 下面
// 還有一個在 event.exception.values 下面
// 改變 transaction 字段，也就是 filename 字段
event.stacktrace?.frames?.forEach((frame: any) => {
Logger.log(frame.filename)
if (frame.filename.startsWith('file://')) {
frame.filename = 'app:///' + frame.filename.split('/').reverse()[0]
}
})
return event
},
release,
dsn,
integrations
}
webpack-sentry-plugin:
config.plugin('sentry').use(SentryPlugin, [{
baseSentryURL: 'https://xxx.xxx.xx/api/0', // 需要加/api/0
organization: 'xxx', // 組織名同上
project: 'xxx' // 項目名同上
apiKey: ' xxxxxxxxxxxxxxxxxxxxxxxxx', // 右下角或者設(shè)置里獲取到的 Sentry Web API auth tokens
include: /.*\.js/, // 獲取文件的正則
release: 'xxx', // release 名
filenameTransform: (filename) => { // 修改 filename 的方法
if (filename.split('js/')[1]) {
return '~/' + filename.split('js/')[1]
} else {
return filename
}
},
deleteAfterCompile: true // 上傳后刪除 sourcemap 文件
}])
參考 url 內(nèi)對應(yīng)字段： https://xxx.xx.com(url)/xxx(org)/xxx-xx-xx(project)/releases/xxx(release)
done
參考文檔：
npm—@sentry/webpack-plugin
npm—webpack-sentry-plugin
sentry官方文檔— Configuration and Authentication
