RollbarにSourceMapsを送ろう
RollbarにSourceMapsを送る方法を調べました。
どうして?
Railsのエラー箇所は、どのファイルの何行目で起きたのか教えてくれるので、すぐに原因を探しに行けるのですが、Javascriptは隠蔽化されていて原因究明に時間がかかったり、「わからん」と匙を投げることがしばしば有りました。
RollbarにSourceMapsをアップロードしてあげれば、Javascript側もバックトレースできそうでした。
willnetさんに、RollbarSourceMapPluginというpluginがあることを教えていただいたので、こちらを使ってSourceMapsのアップロードに取り組みました。
SourceMapsをアップロードしていないと、以下のようなmessageが表示されます。
パッケージの導入
まずは、RollbarSourceMapPlugin
をインストールしましょう
# npmで入れる場合 $ npm install rollbar-sourcemap-webpack-plugin --save-dev # yarnで入れる場合 $ yarn add rollbar-sourcemap-webpack-plugin
アップロードスクリプトの追加
webpack.config.js
や、config/webpack/staging.js
・config/webpack/production.js
などに、アップロードを行うスクリプトやコードを追加します。
accessTokenやversionなどは、利用する環境に応じたものを設定してください。
僕は、versionにUUIDで生成した値を代入しています。
const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin') const PUBLIC_PATH = 'https://my.cdn.net/assets' const webpackConfig = { entry: 'index', publicPath: PUBLIC_PATH, output: { path: 'dist', filename: 'index-[hash].js' }, plugins: [new RollbarSourceMapPlugin({ accessToken: 'aaaabbbbccccddddeeeeffff00001111', version: 'version_string_here', publicPath: PUBLIC_PATH })] }
動作確認
アップロードスクリプトの準備ができたので、envの指定をして実行してみましょう。
$ RAILS_ENV=staging NODE_ENV=staging bin/webpack
するとwebpackerのビルドが実行され、以下のように、SourceMapsがそれぞれアップロードされていきます。
Uploaded js/vendor-88f0**************010.chunk.js.map to Rollbar Uploaded js/notifications/index-c***************bcc9.js.map to Rollbar Uploaded js/features/index-9b2***************4d3.js.map to Rollbar Hash: f7************************** Version: webpack 4.39.3 Time: 54239ms Built at: 12/10/2019 3:19:28 PM
はまりどころ
手元でビルドもアップロードも成功したので、デプロイタスクにフックさせるように修正し、staging環境にマージしました。 ところが何度デプロイしても、SourceMapsのアップロードが行われず頭を抱えました。
原因は、デプロイ時にNODE_ENVの指定を忘れていたことでした。
NODE_ENVの指定がないため、RAILS_ENV=staging NODE_ENV=production bin/webpack
の状態で、stagingデプロイが行われていました。
NODE_ENVを指定しよう
環境に応じてnode_envを設定しましょう。
set :node_env, (fetch(:node_env) || fetch(:stage))
assets:precompile
時に、webpacker:compile
も実行される。
webpacker:compile
実行時に、./bin/webpack
も走るのでSourceMapsのアップロードも行われる。
task :assets_precompile do on roles(:deploy) do within fetch(:tmp_new_path) do # ↓ここで、rails_envと一緒にnode_envも指定してあげる with rails_env: fetch(:rails_env), node_env: fetch(:node_env) do # assets:precompile前の処理をゴニョゴニョ頑張る execute :rake, "assets:precompile" end end end end
おわりに
無事、デプロイ時にそれぞれの環境のRollbarへ、SourceMapsのアップロードが確認できました。 これで、Javascriptのエラーが来ても、「わからん」と匙を投げずに原因究明に当たれそうです。