Do JavaScript source maps work when catching errors?

Question

I have implemented client side exception logging using window.onerror, where I retrieve the current error and stack trace and send it to the server using AJAX

    window.onerror = function(message, url, line) {

      var stackTrace = printStackTrace(); //get stack trace

      //send message, url, line and stackTrace to the server using an ajax call
    }

where printStackTrace is a function provided by this library: http://stacktracejs.com/

The problem is that in production all JavaScript files are minified so the stack trace and the line number are not really helpful as all errors are being reported on Line 1 in the file which is normal as the minified version contains a single line of code. For example:

Message: Object doesn't support property or method 'indexOf' 
URL: http://[server]/[site]/content/combined/combined.635EE367354E6DF721593CAC56FECF95.min.js
Line: 1

Can this be improved using source maps or does that work only when Developer Tools is active ?

What I would like is to get the full stack trace using the source maps (or at least the real line number) when an error occurs for a user who doesn't have the developer tools activated/source maps enabled. Is this possible at all ?

Answer 1

You can definitely get all of the information contained in the source maps and engineer a stack trace on your own but AFAIK there isn't an elegant solution for this yet. Either way it would require ajaxing down the map file at minimum and probably the raw source file. And you will have some tough cross browser issues since not all browsers support source maps fully yet.

It looks like stack trace has this in their plan but doesn't have anybody executing on it yet: https://github.com/eriwen/javascript-stacktrace/issues/44

Get Sentry does do this as a part of their js logging utility but it's wrapped inside of a more multi purpose tool and I believe it only supports full stack trace logging in Chrome for now: https://github.com/getsentry/raven-js