Upload Create React App source maps to Bugsnag for easier debugging and delete them afterwards for security
Create React App is great and bugsnag is great — provided you give it sourcemaps to work with. What is not great is serving those sourcemaps to the public so that anyone can reverse engineer your web app. Let’s look at how you can upload your sourcemaps to Bugsnag from your CI whilst keeping your source code secure.
If you just want to jump ahead to the complete source here’s the link.
7 Nov 2019 UPDATE
This guide was created when CRA was in v2. v3 broke source maps for Bugsnag but this has been fixed in v3.3 (unreleased at time of this update). See here and here for more details.
Why do we need source maps anyway?
When your application is built code gets minified and concatenated by Webpack and a few other related tools. This will greatly improve performance when running your application in production but will make finding the location of bugs in your source code difficult.
That’s where source maps come in — they make it possible to find the location of a bug in your original unminified code.
For more info on the anatomy of sourcemaps checkout this fantastic Bugsnag article.
Doesn’t CRA create sourcemaps that Bugsnag can use by default?
Yes it does! But there is a catch — if you upload the sourcemaps anyone can view the entire source code of your application.
To get around this issue we aren’t going to upload source maps to our host — instead we are going to upload them directly to Bugsnag and delete them before the application gets uploaded to the host.
Note: Create React App will generate source maps by default but you can turn this off by setting the GENERATE_SOURCEMAP environment variable to FALSE. We don’t want to do this here since we need CRA to generate the maps that we are going to upload.
What you came here for — how to upload source maps
Step 1: Finding the sourcemaps to upload
First we need a function to find all the *.map files in our build folder. This function uses a package called glob to do just that.
Install glob: yarn add glob
Step 2: Uploading sourcemaps to Bugsnag
Next we are going to write a function to upload sourcemaps — one at a time. Later we will loop over our list of source maps and pass them to this function.
Note the Bugsnag API key and site hostname ENV vars — this allows us to reuse the same code on multiple sites and environments without changing the code.
Step 3: Deleting sourcemaps so they don’t get uploaded your host
This one is pretty simple — pass in your array of .map files and they will be deleted before uploading the rest of your source to your host.
Step 4: Putting it all together
Now to bring those 3 functions together. Find all our sourcemaps, upload them and then delete them + a bonus step for afterwards
You can find the full source code here.
Step 5: Add a step to your CI
yarn install
yarn build
node process-bugsnag-sourcemaps.js
...That’s it! 🙌🎉
In case you missed it above here’s a link to the complete source.
Step 6: Bonus step — Notify Bugsnag of your release
Bugsnag can track your releases and the number of bugs per release. If you are on the Standard plan they will also spit out a stability score — even if you are on the Lite plan it’s still nice to see a list of your releases there.
