Source maps with Rollbar

We’re using Rollbar for error reporting, and would love to see useful stack traces there. I think to do that we need to upload the source map file that create-react-app generates with a version string, then reference that same version string in the source.

It seems like the best version string to use would be the unique value on the js filename, I imagine thats a hash?

Is there anyway to inject that into the JS?

eg

const rollbarOptions = {
  payload: {
    client: {
      javascript: {
        source_map_enabled: true,
        code_version: "%REACT_JS_HASH%" // some version string, such as a version number or git sha",
      }
    }
  }
};

[Timer]

You can use environment variables to accomplish this and then modify your build command. I haven’t actually tested this, but it should work in theory + fixing any syntax errors:

const rollbarOptions = {
  payload: {
    client: {
      javascript: {
        source_map_enabled: true,
        code_version: process.env.REACT_APP_GIT_SHA,
      }
    }
  }
};

Modify package.json:

diff --git a/package.json b/package.json
index 9a5acef..b658f8c 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "cross-env REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

See https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables for more information.

You could use git describe --match=__NoMatch__ --always --abbrev=40 --dirty for something a little more descriptive, or to cut down on the sha length.

[alexblack]

I imagine this is the relevant part?

"scripts": {
    "start": "cross-env REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts start",
    "build": "cross-env REACT_APP_GIT_SHA=`git rev-parse HEAD` react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }