How can I take a minified javascript stack trace and run it against a source map to get the proper error?


Javascript Problem Overview

On our production server, I have minified javascript published and I'm not including a map file with it, because I don't want the user to be able to understand what's happening based on the error.

I have a logging service I've written to forward the angular exceptions (caught by $exceptionHandler) to myself via email. However, this stack trace is near unreadable:

n is not defined
    at o (http://localhost:9000/build/app.min.js:1:3284)
    at new NameController (http://localhost:9000/build/app.min.js:1:3412)
    at e (http://localhost:9000/build/bower.min.js:44:193)
    at Object.g.instantiate (http://localhost:9000/build/bower.min.js:44:310)
    at b.$get (http://localhost:9000/build/bower.min.js:85:313)
    at d.compile (http://localhost:9000/build/bower.min.js:321:23333)
    at aa (http://localhost:9000/build/bower.min.js:78:90)
    at K (http://localhost:9000/build/bower.min.js:67:39)
    at g (http://localhost:9000/build/bower.min.js:59:410)
    at http://localhost:9000/build/bower.min.js:58:480 <ui-view class="ng-scope">

What I'm wondering is: Is there a program where I can analyze this stack trace against the actual non-minified source code via map file (or not via map file if there's another way)

Javascript Solutions

Solution 1 - Javascript

What you want to do is parse the source maps. This has nothing to do with web browsers. All you need to do is translate the minified reference into the unminified resource.

If you have any experience with NodeJS there is already a package that does this for you.

To install the library

npm install -g source-map


yarn global add source-map

Create a file named "issue.js"

fs = require('fs');
var sourceMap = require('source-map');
var smc = new sourceMap.SourceMapConsumer(fs.readFileSync("./","utf8"));
console.log(smc.originalPositionFor({line: 1, column: 3284}));

Run the file with node

node issue.js

It should output the location in the original file to the console for first line from the stack trace.

> Note: I tell you install source-map globally for ease of use, but you could create a node project that does what you need and installs it locally.

Solution 2 - Javascript

I figured there was no super simple tool for converting a minified stack trace into a readable one using a source map (without having to use a web service), so I created a tool for it:

Install and use it as follows:

npm install -g stacktracify

Now copy a minified stacktrace to your clipboard - then run:

stacktracify /path/to/

Solution 3 - Javascript

Adding to @Reactgular's answer, the below snippet will work with the latest version of source-map

  const rawSourceMap = fs.readFileSync("./","utf8");

  const whatever = sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
      line: 1,
      column: 3284

And to add to the discussion on the thread a simple regex like /\/(\w*[-\.]?\w*).js:\d*:\d*/g

Below is a very simple regex to find all line numbers in a stacktrace.

  //regex for patterns like utils.js, utils123.js, utils-name.js, utils.version.js
  var patt = /\/(\w*[-\.]?\w*).js:\d*:\d*/g; 
  // returns matches like ['/app.min.js:1:3284', '/bower.min.js:44:193', ..]
  var errorPositions = line.match(patt);
  if(!errorPositions || errorPositions.length === 0) {
	  console.log("No error line numbers detected in the file. Ensure your stack trace file is proper");
  errorPositions.forEach(function(error) {

Solution 4 - Javascript

If you had access to the source map file externally and could get the same file structure you could work it out I guess, but I'm not aware of any tools outside the browser that will help you with that.

The added advantage of having the data in a running browser will allow checking of locals which you won't get even with a source map.

You might want to consider a tool such as rollbar to do error reporting. This will report all the locals in each frame to help debugging. It has support for sourcemaps outside the browser to address your security concerns.

Solution 5 - Javascript

Append comment directive for the JS running in the page.

//# sourceMappingURL=/path/to/your/

In firefox (not sure about chrome) to tell the Debugger to use source maps if they are available, click the "Debugger settings" button and select "Show original sources" from the list of settings that pops up:


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlex KiblerView Question on Stackoverflow
Solution 1 - JavascriptReactgularView Answer on Stackoverflow
Solution 2 - JavascriptMikael FinstadView Answer on Stackoverflow
Solution 3 - JavascriptManojView Answer on Stackoverflow
Solution 4 - JavascriptEuanView Answer on Stackoverflow
Solution 5 - JavascriptSlartibartfastView Answer on Stackoverflow