Bugsnag-js: code splitting and uploading all source maps

[amanthegreatone]

Hi,

In my react app I am using code splitting (react-loadable) to reduce the bundle size and serve them on demand whenever the respective route is loaded. Using this technique I am getting about 53 chunks and a main file (.js and .map).
How can I upload all these source maps to identify the error stack trace correctly.

regards
Aman

[bengourley]

Hi @amanthegreatone. Are you using webpack? If so you should take a look at our webpack plugins module which can upload sourcemaps:

webpack-bugsnag-plugins (docs)

If you're not using webpack, you can make use of the underlying JS API/CLI tool:

bugsnag-sourcemaps (docs)

[amanthegreatone]

@bengourley I am not using webpack but using create-react-app for building the bundles and the source maps. I am familiar with the bugsnag-sourcemaps CLI which I am using to upload the single source map file without code splitting in another project.

The thing that I want help in understanding and executing is to upload all the source map files after code-splitting i.e. instead of one map file which is pretty huge now (3mb), how can I upload multiple map files that have been split up for the same version of the code.

[bengourley]

I see!

So create-react-app _does_ use webpack for you but it hides the details away, and as far as I can tell doesn't let you add plugins.

Our webpack plugin would do exactly what you want – it iterates over all the chunks/maps and uploads them all. But it seems like your only option would be to "eject" from create-react-app in order to modify the webpack config yourself. You probably don't want to do that!

Alternatively you can use bugsnag-sourcemaps, iterating over all of the generated source maps using bash or javascript. Here's a sketch of what I mean (in JS):

const { upload } = require('bugsnag-sourcemaps')
const glob = require('glob')

// find all of the map files in ./dist
glob('dist/**/*/*.map', (err, files) => {
  if (err) throw err
  // process each .map file
  Promise.all(files.map(processMap))
})

// returns a Promise which uploads the source map with accompanying sources
function processMap (sourceMap) {

  // remove .map from the file to get the js filename
  const minifiedFile = sourceMap.replace('.map', '')

  // remove the preceding absolute path to the static assets folder
  const minifiedFileRelativePath = minifiedFile.replace(`${__dirname}/dist/`, '')

  // call bugsnag-sourcemaps upload()
  return upload({
    apiKey: 'YOUR_API_KEY_HERE',
    appVersion: '1.2.3',
    minifiedUrl: `http*://your-domain.app/path/to/assets/${minifiedFileRelativePath}`,
    sourceMap,
    minifiedFile,
    projectRoot: __dirname
    uploadSources: true
  })

}

I didn't run or test this so you will undoubtably need to tweak paths/urls for your setup and play with the arguments to bugsnag-sourcemaps. This also rather crudely will fire off all the uploads concurrently. See webpack-bugsnag-plugins for an example of how to limit the concurrency of that.

Feel free to continue on this thread if you have any further questions, or alternatively email [email protected] where we can dig into your specific project and have a bit more context. We can also then share more detail than we would be able to on this public issue tracker.

Thanks!

[amanthegreatone]

Thanks @bengourley.
I will try your suggestions and update.

[pavan-syook]

@bengourley as per your suggestion I followed the same instructions and uploaded the chunk.js.map files to bugsnag. Here is my code.

const upload = require('bugsnag-sourcemaps').upload;
const glob = require('glob');
const appVersion = require('./package.json').version;
const bugsnagKey = require('./src/config/env').bugsnagKey;
const path = require('path');

glob('source-maps/*.js.map', (err, files) => {
  if (err) throw err;
  Promise.all(files.map(processMap));
});

const processMap = sourceMap => {
  const minifiedFileName = sourceMap.split('/')[1].split('.map')[0]; //just extracting the file name.
  return upload({
    apiKey: bugsnagKey,
    appVersion: appVersion,
    minifiedUrl: `http://myAppWebsite.com/static/js/${minifiedFileName}`,
    sourceMap,
    minifiedFile: `${__dirname}/build/static/js/${minifiedFileName}`,
    projectRoot: __dirname,
    uploadSources: true,
    overwrite: true,
  });
};

The files are all uploaded and everything works. But the problem is the map and chunks are not mapped when an error is raised in the stacktrace i still get the chunk code rather than the original code.

Hoping you could point out where I am going wrong or what the error really is.

Thanks.

[bengourley]

Hi @pavan-syook. I took a look at your account and it seems you are uploading everything correctly 👍

There is just one minor problem which you need to resolve. For your source maps, you are providing a value for appVersion (it's currently 0.1.0), but events coming in from your notifier have no appVersion. What our system does is look for an uploaded source map matching the url _and_ app version, and since the app version is different (undefined vs. 0.1.0) it doesn't find your source map.

All you need to do is make sure the app version is set in your notifier and kept in sync with the version of your app. Then we'll be able to use the source maps you've uploaded to show the original sources. Hope this helps!

[pavan-syook]

@bengourley Thanks for the quick update. will do that and let you know if I face any issues.

[Shiv-Dangi]

Hi @bengourley. we are also using code splitting in our react web application (Groww) and in our case, the number of chunks are more than 80. all chunks source map files are uploaded on bugsnag for every app release. So my doubt is how many source map files can be uploaded on bugsnag, is there any restriction on uploading number of files?

[bengourley]

Nope, no restriction. As many as you need.

[Shiv-Dangi]

@bengourley Thanks for the reply.