question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Source maps with Rollbar

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
Timercommented, Mar 21, 2017

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.

1reaction
alexblackcommented, Mar 21, 2017

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"
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

Source Maps - Rollbar Docs
Benefits of providing your source maps to Rollbar include: Stack traces will contain the original source filename, line number, method name, and code ......
Read more >
Upload source maps with the Rollbar REST API - YouTube
Watch our tutorial and learn how to use the Rollbar REST API to upload the source map for each minified JS file in...
Read more >
Upload source maps to Rollbar - Michal Zalecki
Rollbar (and often other error tracking software) supports source maps to display error stack traces which point to the erroneous lines in ...
Read more >
rollbar-sourcemap-webpack-plugin - npm
A Webpack plugin to upload sourcemaps to Rollbar after build. Latest version: 3.3.0, last published: 2 years ago.
Read more >
rollbar/source-map-upload-example - GitHub
Contribute to rollbar/source-map-upload-example development by creating an account on GitHub.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found