るいすのブログ

オタクエンジニアの雑記

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'
    })
  ]
})

こんな感じでどこでエラーになったかが分かる。
f:id:rarirureluis:20201018000821p:plain

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