rollbar と Vue.js で SourceMap を使ってエラー内容を確認する

rollbar めちゃくちゃ便利です。安いし。
rollbar.com

Vue.js で構築された Web アプリケーションのエラー内容を確認するときに
SourceMap が有効になっていないと追っかけることが難しいので SourceMap を有効にする。

必要な箇所だけ

webpack.base.config.js
...
module.exports = {
mode: 'production',
devtool: 'source-map',
entry: './src/index.js',
output: {
path: utils.resolve('dist/'),
filename: '[name]-[hash].js'
},
...
}

webpack.prd.config.js
...
const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin')
module.exports = merge(baseConfig, {
module: {},
plugins: [
new RollbarSourceMapPlugin({
accessToken: '',
version: process.env.GITHUB_SHA,
publicPath: 'https://uploader.xzy.pw'
})
]
})

こんな感じでどこでエラーになったかが分かる。

SourceMapが有効になっていないと、エラー文だけでどこでエラーか分からない。