thredup/rollbar-sourcemap-webpack-plugin

A Webpack plugin to upload sourcemaps to Rollbar

RollbarSourceMapPlugin

This is a Webpack plugin that simplifies uploading the sourcemaps, generated from a webpack build, to Rollbar.

Production JavaScript bundles are typically minified before deploying, making Rollbar stacktraces pretty useless unless you take steps to upload the sourcemaps. You may be doing this now in a shell script, triggered during your deploy process, that makes curl posts to the Rollbar API. This can be finicky and error prone to setup. RollbarSourceMapPlugin aims to remove that burden and automatically upload the sourcemaps when they are emitted by webpack.

Prerequisites

As of version 3.0.0, Webpack 4 is required. This plugin is no longer compatible with Webpack 3 and older.

Installation

Install the plugin with npm:

npm install rollbar-sourcemap-webpack-plugin --save-dev

Basic Usage

An example webpack.config.js:

const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin')

const PUBLIC_PATH = 'https://my.cdn.net/assets'

const webpackConfig = {
  mode: 'production',
  devtool: 'hidden-source-map'
  entry: 'index',
  publicPath: PUBLIC_PATH,
  output: {
    path: 'dist',
    filename: 'index-[hash].js'
  },
  plugins: [new RollbarSourceMapPlugin({
    accessToken: 'aaaabbbbccccddddeeeeffff00001111',
    version: 'version_string_here',
    publicPath: PUBLIC_PATH
  })]
}

Plugin Configuration

You can pass a hash of configuration options to RollbarSourceMapPlugin. Allowed values are as follows:

accessToken: string (required)

Your rollbar post_server_item access token.

version: string (required)

A string identifying the version of your code this source map package is for. Typically this will be the full git sha.

publicPath: string | function(string): string (required)

The base url for the cdn where your production bundles are hosted or a function that receives the source file local address and returns the url for that file in the cdn where your production bundles are hosted. You should use the function form when your project has some kind of divergence between url routes and actual folder structure. For example: NextJs projects can serve bundled files in the following url http://my.app/_next/123abc123abc123/page/home.js but have a folder structure like this APP_ROOT/build/bundles/pages/home.js. The function form allows you to transform the final public url in order to conform with your routing needs.

includeChunks: string | [string] (optional)

An array of chunks for which sourcemaps should be uploaded. This should correspond to the names in the webpack config entry field. If there's only one chunk, it can be a string rather than an array. If not supplied, all sourcemaps emitted by webpack will be uploaded, including those for unnamed chunks.

silent: boolean (default: false)

If false, success and warning messages will be logged to the console for each upload. Note: if you also do not want to see errors, set the ignoreErrors option to true.

ignoreErrors: boolean (default: false)

Set to true to bypass adding upload errors to the webpack compilation. Do this if you do not want to fail the build when sourcemap uploads fail. If you do not want to fail the build but you do want to see the failures as warnings, make sure silent option is set to false.

rollbarEndpoint: string (default: https://api.rollbar.com/api/1/sourcemap)

A string defining the Rollbar API endpoint to upload the sourcemaps to. It can be used for self-hosted Rollbar instances.

encodeFilename: boolean (default: false)

Set to true to encode the filename. NextJS will reference the encode the URL when referencing the minified script which must match exactly with the minified file URL uploaded to Rollbar.

Webpack Sourcemap Configuration

The output.devtool field in webpack configuration controls how sourcemaps are generated. The recommended setup for sourcemaps in a production app is to use hidden sourcemaps. This will include original sources in your sourcemaps, which will be uploaded to Rollbar and NOT to a public location alongside the minified javascript. The hidden prefix will prevent //# sourceMappingURL=URL_TO_SOURCE_MAP from being inserted in the minified javascript. This is important because if the sourceMappingURL comment is present, Rollbar will attempt to download the sourcemap from this url, which negates the whole purpose of this plugin. And since you are not uploading sourcemaps to a public location, Rollbar would not be able to download the sourcemaps.

webpack.config.js

output: {
  devtool: 'hidden-source-map'
}

App Configuration

• The web app should have Rollbar.js installed and configured for webpack as described here.
• See the Rollbar source map documentation for how to configure the client side for sourcemap support. The code_version parameter must match the version parameter used for the plugin.
• More general info on the using Rollbar for browser JS.

Examples

• React
• Next.js

Contributing

See the Contributors Guide

License

MIT

rollbar-sourcemap-webpack-plugin's Issues

Add retries for http requests

In case of failed http requests we should. This should be configurable:

• disable/enabled
• number of retries
• delay between retries

Potentially an exponential backoff but shouldn't make this too complicated.

New release

Hi! I'd like to use this package with a self-hosted Rollbar instance, but it looks like there hasn't been a release of this package since that commit. I can pin to a git commit hash but I'd rather not - any plans for releasing a new version?

Remove support for Node 0.12

devDependencies are out of date because new versions of the deps don't work in Node 0.12. Remove support for 0.12 in Travis to allow these deps to be upgraded.

The plugin will continue to work in 0.12. But new Node version will be needed for plugin development.

Does this work with Webpack2?

I have this in my production.js, but I see in rollbar that no sourcemaps have been uploaded

config.plugins.push(
  new RollbarSourceMapPlugin({
    accessToken: process.env.ROLLBAR_POST_SERVER_ITEM,
    version: process.env.ROLLBAR_VERSION,
    publicPath: `${process.env.API_HOST}/assets`
  })
)

module.exports = config;

There doesn't seem to be any rollbar-related output in my build -- is this normal?

Add a change log

Ideally this will be automated. Possibly use github-changelog-generator

Rollbar 502 gateway issue

Hello! All of a sudden our CI build has shown this error for our build:

ERROR in RollbarSourceMapPlugin: failed to upload 5b0b540.js.map to Rollbar: 502 - Bad Gateway

Anyone else having this issue? Nothing has changed on our side and api keys still look good

Warn if no source maps found

It would be helpful for the plugin to warn (or potentially fail) if no source maps are found. If the user includes the plugin in their Webpack configuration, it's reasonable to assume they intend for a source map to be uploaded

Add a timeout to upload calls

We are currently encountering an issue in Travis where some upload attempts are hanging.

https://www.traviscistatus.com/incidents/kyf149kl6bvp

The Travis build will abort after 10 minutes of not receiving output. Adding a timeout to the request.post call could be very helpful here. When I forked this library and added such a timeout, the plugin failed the build with this error:

ERROR in RollbarSourceMapPlugin: failed to upload 23.0a01a4daa723d7b93f81.js.map to Rollbar: ESOCKETTIMEDOUT

Having the plugin fail the build IMO is much better than having Travis wait 10 minutes and then abort. Not only do we get faster and more accurate feedback, but we can also use the ignoreErrors option and accept a partial success, allowing us to deploy without disabling the plugin completely.

Dependabot can't resolve your JavaScript dependency files

Dependabot can't resolve your JavaScript dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Error whilst updating @babel/core in /package-lock.json:
No matching version found for @babel/types@^7.11.0.

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

View the update logs.

Using publicPath with trailing slash breaks sourcemaps

If you pass a publicPath with a trailing slash, such as http://my.cdn.com/assets/, a minified url such as http://my.cdn.com/assets/client-abc123.js will get sent to Rollbar. This potentially breaks the sourcemaps in Rollbar. The plugin should be smart enough to handle both cases and send a properly formatted url.

Multiple public paths ?

I have an issue where the website I am monitoring is accessible from 2 version of its domain name (www and non-www). Since it's a production website, I am not very inclined to configure redirection as of now. Not sure about undesirable repercutions.

The resulting issue is that since I can only configure a given publicPath (say, "www.mywebsite.com") I can only upload sourcemaps for that path.

What happens then is that if people browse the website from the other domain name and get an issue, rollbar does not manage to find the sourcemap corresponding to that other public path.

Any idea how to fix this?

Add a simple working example for usage in an Angular app

Double slash on one sourcemap?

This is my config in webpack (with replaced example values):

new RollbarSourceMapPlugin({
  accessToken: token-here,
  version: version-here,
  publicPath: domain.com
})

It seems to upload all of the sourcemaps correctly except for one - app.js file. It is also uploaded correctly but the path is 

//domain.com**//**js/app.js

when it should be

//domain.com**/**js/app.js

Therefore, when an error is submitted to rollbar, I get that no sourcemap was found for 

//domain.com**/**js/app.js

Why do I get the double slash added and how can I fix this?

Here is how my sourcemaps look at rollbar.com:

Missing sourcemaps for _next/static/chunks/*

Hello,

As discussed over here: vercel/next.js#17431

I have connected the app to rollbar and am seeing sourcemaps appear in rollbar, however rollbar is missing sourcemaps for any files under the /_next/static/chunks/* path.

Can you please confirm if this an expected behaviour, or if there's an issue with my setup, or if there might be an issue with which sourcemaps are chosen for uploading?

Uploading the bundle to rollbar, not the map file

What happens: After the bundle is built, when I check the Rollbar Source Maps Dashboard, all I see is bundle.js.
What I expect: To see the bundle.js.map file in the Rollbar Source Maps Dashboard.

My webpack.config.js file

const path = require('path');
const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin');

const PUBLIC_PATH = 'https://my-site/js';

module.exports = {
  context: __dirname,
  entry: './app/frontend/entry.jsx',
  output: {
    path: path.resolve(__dirname, 'app', 'public', 'js'),
    publicPath: PUBLIC_PATH,
    filename: 'bundle.js',
  },
  plugins: [new RollbarSourceMapPlugin({
    accessToken: '---------------------------',
    version: '0.0.1',
    publicPath: PUBLIC_PATH,
  })],
  module: {
    loaders: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
        },
      }, {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx', '*'],
  },
};

Am I doing something wrong, or misunderstanding something conceptually?

publicPath option should be required

The plugin will fail if publicPath is not supplied. Enforce the requirement by adding to ROLLBAR_REQ_FIELDS in constants.js.

replace after emit logic for webpack v4.29+

Webpack v4.29.0 introduced output.futureEmitAssets which breaks this plugin. From the release:

• assets are replaced with SizeOnlySources
• reading assets after emitting is no longer allowed

https://github.com/webpack/webpack/pull/8642/files

Failed to upload many source maps

I'm having this error when trying to build our project.

ERROR in RollbarSourceMapPlugin: failed to upload 30.bundle.js.map to Rollbar: read ECONNRESET

We have one shared bundle and many bundles for each page.
Other bundles are uploaded and I can see them at Rollbar -> Settings -> Source Maps but randomly one of the files can't be uploaded.

Settings are

new RollbarSourceMapPlugin({
    accessToken: '-----------------------------',
    version: gitHash,
    publicPath: 'https://example'
  })

Source maps aren't getting uploaded

`/*

• Webpack base configuration

*/

'use strict';

var cp = require('child_process');
var webpack = require('webpack');
var path = require("path");
var glob = require("glob");
var packages = require("./package.json");
const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin');
const PUBLIC_PATH = 'https://jhkukbkbkjbj.cloudfront.net/assets/';

module.exports = {
entry: glob.sync("./app/javascript/views/*.js")
.reduce(
function(map, path) {
map[path.split('/').pop()] = path;
return map;
},
{
vendor: packages.vendorDependencies
}),
output: {
path: path.resolve(__dirname, 'app/assets/javascripts'),
publicPath: PUBLIC_PATH,
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].js'
},

node: {fs: "empty",},
cache: true,
devtool: "inline-source-map",
stats: {
colors: true,
reasons: true,
},

module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: [/node_modules/, /vendor/],
loader: 'babel-loader'
},
{
test: /[\/]vendor[\/]assets[\/]pages-plugins[\/]modernizr.custom.js$/,
loader: "imports-loader?this=>window!exports-loader?window.Modernizr"
}
]
},

externals: {
'I18n': 'I18n',
'AKAssets': 'AKAssets',
'Rollbar': 'Rollbar',
'GoogleMapsLoader': 'GoogleMapsLoader',
'AKUrls': 'AKUrls',
},

resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
alias: {
'js': __dirname + '/app/javascript/',
"vendor": __dirname + '/vendor/',
}
},

plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.DefinePlugin({
DEBUG: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.js",
minChunks: Infinity
}),
new RollbarSourceMapPlugin({
accessToken: "some token ",
version: " a result of git rev-parse HEAD",
publicPath: PUBLIC_PATH
})
]
};`

Documentation example is misleading for using hidden source maps

I was trying to use this plugin to upload my source maps during deployment, after which I deleted them before uploading my app to my server.

The issue is that with the example config on the README file, comments get inserted into the generated JS bundles with the URL of the source map. This makes the source maps public (which is generally a bad idea) and defeats the whole purpose of using this plugin to upload them to rollbar.

What's required in addition to the example config is to add the following so webpack doesn't emit comments with source map URLs in the bundled files, and so rollbar will use the files uploaded by the plugin instead of trying to re-download them when an error fires:

devtool: 'hidden-source-map',

This is documented here: https://survivejs.com/webpack/building/source-maps/#devtool-hidden-source-map-

Can you please update your README to add this line in the sample config with a comment about its relevance? Thanks!

Nextjs fn example

Hi I understand that the public path as function was added to help NextJS users. I wonder if anyone has an example of using this function, I am scratching my head trying to convert
static/chunks/0.js
to
```https://mydomain.com/_next/static/chunks/1257.4018bf3adeea4baca07e.js````

Add a simple working example for usage in a React app

• Create an examples directory
• Create a react sub directory
• Create a simple react app with a webpack build that uses the plugin.
• Demonstarte how to configure the rollbar client
• Demonstrate how to get the git sha to use as the revision
• Use DefinePlugin to hold the revision value

Migrate from mocha/expect to Jest

The expect version is way out of date and there are a some breaking changes. First thought is to replace expect with chai but we are using some mock/spy functionality from expect, so we would need to add something like sinon or testdouble. Let's just migrate to Jest.

Can I add a web pack hash to the version?

When i add hash to the version version: "[hash]" in the rollbar iger version as a string => "[hash]" but as i understand webpack it should change the string as a real hash. Is there a vay to put there a webpack hash not using web pack way ?

BREAKING CHANGE: Drop support for Webpack 3 and older

Webpack v4 is current stable version but v5 release candidates are available and likely many are using it. Currently the plugin supports at least Webpack v3 via logic that checks the Tapable interface. It's time we remove this backwards compatibility.

NextJs dynamic routing not resolving to source map

When using NextJS dynamic routing ([a]/b.js) the [ and ] characters become HTML encoded characters when referenced in the script dependencies on the page (i.e. %5Ba%5D/b.js)

When the Rollbar plugin uploads the minified source files and sourcemaps they're uploaded against the plain text ([a]/b.js). Therefore when an error occurs on the page, the sourcemap is unable to be resolved as the filenames don't match exactly.

Would it be possible to create a flag (e.g. encodeFilenames) and allow that to be passed in to the plugin?

Thanks

CRA usage

Hi,

Could I please get some tips on how to use this with create-react-app?

Thanks!

Two source maps not being uploaded

I'm using this with Vue.js and my config is like this:

const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new RollbarSourceMapPlugin({
        accessToken: '...',
        version: '1.0',
        publicPath: '/'
      })
    ]
  }
}

On build, the console outputs the uploaded maps, which include:

Building for production...Uploaded js/app.2cdc0d24.js.map to Rollbar
Building for production...Uploaded js/chunk-vendors.67ce8235.js.map to Rollbar

After I intentionally trigger an exception in the app, I can see this in the "Source Maps" configuration page on Rollbar:

Other maps appear to be good:

Also, on the occurrence page, I can see this message on top:
Source maps were not available for some minified Javascript files in this traceback. View your project source maps or check out the source map docs.

Were there actually any breaking changes in v2?

From the CHANGELOG or the "Full Changelog" there do not appear to be any breaking changes in v2, though it was a major version bump. Can you please confirm this? I'm looking to upgrade from v1.

Success messages are only shown if silent: true

I think this is quite a confusing flag if that's truly the case.

How to see http logs? Seems like the request is failing silently.

I'm looking for a better way to debug.

Is there any way to see the http response from rollbar?

It appears to me like the call is failing silently, and it's been hard to debug because I can't see the http response from rollbar.

I am using NextJS's withSourceMaps (along with withSass), which adds a level of complexity.

If accessToken, version, or publicPath is missing I get an error from the package. But, even if I send in a completely random string as the accessToken (just to test), I am not able to see any error messages at all.

I have disabled silent and ignoreErrors explicitly, even though I know this is the default.

cfg.plugins.push(new RollbarSourceMapPlugin({
      accessToken: 'example_post_server_item',
      version: 'test',
      publicPath: 'https://www.example.com/_next/static',
      includeChunks: true,
      silent: false,
      ignoreErrors: false,
    }))

Is there something I'm missing? How can I view the http logs?

Retry if fail to upload

Is it possible to add a retry up to say 3-4 times to upload the source maps to rollbar. I've noticed that my build will sporadically fail due to an upload failing.

Code splitted sourcemaps not uploaded, despite being emitted by webpack

Hi there, this plugin has saved me a lot of shell script headaches, thank you!

I'm having trouble getting the plugin to upload all sourcemaps. In my instance, it detects and correctly uploads:

• main.[hash].js
• vendor.[hash].js

Both of which are specified in the entry object.

However webpack is also generating n chunks for me based on require.ensure code splitting for the modules within the app. For this particular app, n = 0 through to 4, so 5 additional chunks.

• n.[hash].js

I can see these emitted by webpack and written to my dist dir.

My config:

        new RollbarSourceMapPlugin({
            accessToken: "******",  // RollBar post_server_item
            version: childProcess.execSync("git rev-parse HEAD").toString(),  // Get hash of last commit
            publicPath: "http://example.com"
        })

The docs states if includeChunks as an option is omitted, all webpack emitted sourcemap files will be uploaded, however this doesn't seem to be the case. Any tips?

Thanks! 🎄 🎅 🎄

Does it support Rollbar version 2? And with webpack 2.0 cannot upload file successfully

Does this plugin support rollbar version 2 ? When I try to found rollbar-browser in npm, only "rollbar": "2.0.4".

Now I use rollbar-browser and webpack 2, it showed
Uploaded XXX.ca606eb3630a8f898d78.js.map to Rollbar
Uploaded vendor.bundle.ca606eb3630a8f898d78.js.map to Rollbar
But when I go to Rollbar settings/source_map I cannot download i. It seems I didnot upload successfully. And if I upload manually, I can download it. Therefore, there must be something wrong with uploading. How can I dig deeper for this issue?

The automated release is failing 🚨

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀