How to log exceptions in JavaScript

Question

You don't specify if you are working in the browser or the server. If it's the former, there is a new console.error method and e.stack property:

try {
    // do some crazy stuff
} catch (e) {
    console.error(e, e.stack);
}

Please keep in mind that error will work on Firefox and Chrome, but it's not standard. A quick example that will downgrade to console.log and log e if there is no e.stack:

try {
    // do some crazy stuff
} catch (e) {
    (console.error || console.log).call(console, e.stack || e);
}

As Eldar points out, you can use e.message to get the message of the exception. However, in Chrome, Firefox and IE10+, you can also get the stack trace using e.stack. The stack trace will include the file and line number of the exception.

So to assemble a string with exception info, you would write something like this:

var exmsg = "";
if (e.message) {
    exmsg += e.message;
}
if (e.stack) {
    exmsg += ' | stack: ' + e.stack;
}

Note that you will only get a stack trace if

1. the exception was thrown by the browser (such as in response to a syntax error);
2. the exception object is an Error object or has the Error object as its prototype.

So just throwing a string (throw 'Exception!!') won't give you a stack trace.

To take this a bit further, to catch all uncaught exceptions, you would use a window.onerror handler (similar to .Net Application_Error handler in global.asax). The drawback of this used to be (and mostly still is) that this wouldn't give you access to the actual exception object, so you couldn't get the stack trace. You'd only get the message, url and line number.

Recently, the standard has been extended to give you the column (great for minified files) and the exception object as well: http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#errorevent

Right now (April 2014), only Chrome 32 implements all this. IE10+ gives you the column but not the exception object. Firefox 28 still only gives you message, url and line number. Hopefully, this will improve soon. I've written about this for the JSNLog project, at: http://jsnlog.com/Documentation/GetStartedLogging/ExceptionLogging

(disclaimer: I am the author of JSNLog and jsnlog.com)

Secondly, the .Net Exception object supports inner exceptions. It also has a Data property so you can attach key value pairs with for example variable values. I sort of missed that in JavaScript Error object, so I created my own Exception object, also as part of the JSNLog project. It is in the jsnlog.js file in the jsnlog.js Github project (https://github.com/mperdeck/jsnlog.js).

Description is at: http://jsnlog.com/Documentation/JSNLogJs/Exception

Finally a shameless plug - the JSNLog project I'm working on lets you insert loggers in your JavaScript, and automatically inserts the log messages in your existing server side log. So to log JavaScript exceptions with their stack traces to your server side log, you only need to write:

try {
    ...
} catch (e) {
    JL().fatalException("something went wrong!", e);
}

You can use almost in the same manner ie.

try
{
    throw new Error("hahahaha!");
}
catch (e)
{
    alert(e.message)
}

But if you want to get line number and filename where error is thrown i suppose there is no crossbrowser solution. Message and name are the only standart properties of Error object. In mozilla you have also lineNumber and fileName properties.

I'm not sure whether or not it is cross browser or if it's what you are looking for, but I suggest you try:

window.onerror = function (err, file, line) {
    logError('The following error occurred: ' + 
    err + '\nIn file: ' + file + '\nOn line: ' + line);
    return true;
}

I had a similar problem.

Using console.table(error); worked well for me. It displays information in a table, and also lets me expand/collapse to see more details.