How to upload source maps to Rollbar.js from create-react-app without hosting them publicly?

Question

1) I have an app created with the help of Create-react-app

2) It's not ejected

3) I don't want to upload source maps publicly

4) I have set up app to work with Rollbar.js for error tracking on production

5) Manual upload is not an option because I have js splitted in chunks and there are about 20 of them

But I need to upload source maps to Rollbar directly (eirher host them on some other server, which is not suitable for me)

I've read Rollbar docs. I've also looked at webpack plugin which is difficult to use without ejecting.

Rollbar docs show how to upload with curl command but it's quite difficult if you never worked with shell scripts before.

Answer 1

After spending hours on looking for an example or quick copy&paste solution I had no other option as to write it myself. So here is how I achieved this, hope this helps someone time.

This is my first shell script for Mac, so it's not perfect for sure. I guess it's likely need to be adjusted for usage on other platforms, but it's a good start anyway.

1. Create a folder called "sourceMaps" in a root folder
2. Add a new script to your package.json and modify build script

"build": "REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts build && npm run upload-source-maps",
"upload-source-maps": "rm sourceMaps/* && mv build/static/js/*.map sourceMaps/ && sh ./upload-script.sh"

This script does a few things:

a) it cleans up source maps from previous build

b) moves newly generated source maps from build/static/js/ to sourceMaps/ folder - so that they are not deployed publicly

c) it calls ./upload-script.sh script that does all the work

3. Now create a file called "upload-script.sh" in your root folder with following code

version=$(git rev-parse HEAD)
for filename in ./sourceMaps/*; do
  sliced=${filename//.\/sourceMaps/""}
  without_map=${sliced//.map/""}
  minified_url=//YOUR_DOMAIN/static/js$without_map
  source_map=@${filename//.\//""}

  curl https://api.rollbar.com/api/1/sourcemap \
  -F access_token=YOUR_TOKEN \
  -F version="$version" \
  -F minified_url=$minified_url \
  -F source_map="$source_map"
done

this script does next things:

a) takes latest git commit as version (so that rollbar can understand which source map version it needs

b) iterates over each source map file in your sourceMaps folder, replaces symbols we don't need to follow rollbar format

c) make curl request to rollbar api

The last thing you need to do is to set rollbar code version inside code, as you could notice i pass an variable called REACT_APP_GIT_SHA=git rev-parse HEAD that you can access inside app with process.env.REACT_APP_GIT_SHA

Here is an example of your rollbarConfig

const rollbarConfig = {
  accessToken: YOUR_ACCESS_TOKEN,
  captureUncaught: true,
  payload: {
    environment: process.env.REACT_APP_NODE_ENV,
    client: {
      javascript: {
        source_map_enabled: true,
        code_version: process.env.REACT_APP_GIT_SHA,
      }
    }
  }
}