Getting JavaScript Stack Traces for Custom Exceptions

When running your JavaScript code, exceptions can provide valuable insights into issues your script encounters. However, getting stack traces for exceptions you throw yourself poses a challenge. This article addresses this problem and provides solutions to obtain stack traces specifically for your own exceptions.

Initially, it was only possible to get stack traces for built-in JavaScript exceptions. However, advancements in modern browsers have introduced new techniques to address this limitation.

Console.trace() for Modern Browsers

In recent browsers, the console.trace() method is available. By calling it, you can obtain a stack trace that includes the location of the console.trace() invocation.

console.trace();

Error Stack Property for All Browsers

A refined solution shared by commenters on the original question involves utilizing the stack property of an Error object.

function stackTrace() {
    var err = new Error();
    return err.stack;
}

This approach provides a detailed stack trace similar to the output generated by console.trace():

DBX.Utils.stackTrace@http://localhost:49573/assets/js/scripts.js:44
DBX.Console.Debug@http://localhost:49573/assets/js/scripts.js:9
.success@http://localhost:49573/:462
x.Callbacks/c@http://localhost:49573/assets/js/jquery-1.10.2.min.js:4
x.Callbacks/p.fireWith@http://localhost:49573/assets/js/jquery-1.10.2.min.js:4
k@http://localhost:49573/assets/js/jquery-1.10.2.min.js:6
.send/r@http://localhost:49573/assets/js/jquery-1.10.2.min.js:6

Custom Stack Trace Function

In older browsers that don't support these methods, a more complex function can be used to obtain a custom stack trace:

function stacktrace() {
  function st2(f) {
    return !f ? [] :
        st2(f.caller).concat([f.toString().split('(')[0].substring(9)   '('   f.arguments.join(',')   ')']);
  }
  return st2(arguments.callee.caller);
}