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.

Calorie

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,
      }
    }
  }
}

Calorie

add /sourceMaps to your .gitignore as you don't really need source maps in your repo – Calorie

Wow thanks; I ended up with something similar, but never got it hooked up to my CD pipeline. Also spent hours trying to get a CRA hello world to upload correctly. I even opened a support request with Rollbar, to no avail more than getting the link to their docs page. It's as if nobody has ever uploaded source maps with an off-the-shelf create-react-app managed build, which I find hard to believe. :shrug: – Evanston

@Evanston consider upvoting answer if you find it useful :) let me know if you need any help. I guess it's quite a rare case CRA + big enough to care about not publishing source maps publicly + not ejected. – Calorie