Create-react-app: Source maps with Rollbar

[alexblack]

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]

That works great, thanks!

[alexblack]

On further inspection, it works on my machine, which has git repo, doesn't work when building on Heroku.

Is there any way to get access to the hash value put in the js and css static filenames?

[Timer]

You can run heroku labs:enable runtime-dyno-metadata -a <app name> and then use one of these variables:

HEROKU_APP_ID:                   9daa2797-e49b-4624-932f-ec3f9688e3da
HEROKU_APP_NAME:                 example-app
HEROKU_DYNO_ID:                  1vac4117-c29f-4312-521e-ba4d8638c1ac
HEROKU_RELEASE_CREATED_AT:       2015-04-02T18:00:42Z
HEROKU_RELEASE_VERSION:          v42
HEROKU_SLUG_COMMIT:              2c3a0b24069af49b3de35b8e8c26765c1dba9ff0
HEROKU_SLUG_DESCRIPTION:         Deploy 2c3a0b2

HEROKU_RELEASE_VERSION or HEROKU_SLUG_COMMIT is what you'd want.

[alexblack]

Thats super helpful. Though, I am lost on how to put this all together.

[Timer]

Can I see your package.json? You can scrub it, I just need the scripts section.

[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"
  }

[Timer]

Indeed, but it's missing what I thought might be there. Where are you doing the build step? Your Procfile?

[alexblack]

I'm not 100% sure, working with a colleague on this. We have a build pack specified

  "buildpacks": [
    {
      "url": "https://github.com/mars/create-react-app-buildpack.git"
    }
  ]

[Timer]

Ah that complicates things. I was going to suggest using heroku-postbuild but I don't think you can with that buildpack. You could try it, where it'd be a copy of your build command except REACT_APP_GIT_SHA=$HEROKU_SLUG_COMMIT.

You can get fancy with an or on that environment var. I'm not a shell expert though.

Alternatively, you can use the official way with that buildpack in mind. See https://github.com/mars/create-react-app-buildpack#compile-time-configuration.

[alexblack]

Trying this

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

[Timer]

${HEROKU_SLUG_COMMIT:-`git rev-parse HEAD`}

Should work (if your command does what I hope it does), and would be your best solution.
Once again, I'm no shell expert -- but I'm glad you figured that shell snippit out. :)

[Timer]

I think it might need to be $HEROKU_SLUG_COMMIT, not HEROKU_SLUG_COMMIT.
Let me know how it goes!

[alexblack]

Thanks for the help here. Its close, but so far not happening. If, after a successful build, I heroku run bash, then I can run

echo ${HEROKU_SLUG_COMMIT:-`git rev-parse HEAD`}

and get the correct result.

But during builds, it fails, or after a failing build. Seems like HEROKU_SLUG_COMMIT isn't set until after the build, from what I can tell.

[Timer]

Ouch!
You might need to use https://github.com/mars/create-react-app-buildpack/blob/master/README.md#runtime-configuration and do a truthy or in your JS code.

Edit:
Ah wait it's not prefixed correctly.
Hmm. I'm in bed now sorry for the terse responses.

You could add a git commit hook that updates a file with the current SHA. I'm running out of ideas here.

I'll reopen this if anyone else has input.

[Timer]

I'm going to close this because it's not something we're looking to support explicitly, you can accomplish this by requiring a JSON file that gets automatically updated every commit if that's the last resort fix.

Sorry!

[jessepinho]

Side note for future readers: I don't think using cross-env is necessary in the package.json scripts, unless you're specifically trying to support other platforms. I'm just exporting an environment variable: "build": "export REACT_APP_GIT_SHA=`git rev-parse HEAD` && react-scripts-ts build",

[fabien0102]

I confirm that cross-env is not necessary, it's not workink on windows… BTW I really want a wait to try this on my local computer (so on windows) if someone have a tips/solution to provide a "complex var env" cross platform, I take it!