Force Stack Traces with JavaScript

By  on  

I recently inherited a Node.js project and man is that scary.  The code was well written but whenever you inherit a project you instantly inherit the fear of messing things up.  My goal was to fix a fairly routine bug, and finding the issue was fairly easy, but tracing through the code to figure out what called what and what passed what was a nightmare.

So I did the only thing I could do to figure out WTF was going on:

// The magic
console.log(new Error().stack);

/* SAMPLE:

Error
    at Object.module.exports.request (/home/vagrant/src/kumascript/lib/kumascript/caching.js:366:17)
    at attempt (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:180:24)
    at ks_utils.Class.get (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:194:9)
    at /home/vagrant/src/kumascript/lib/kumascript/macros.js:282:24
    at /home/vagrant/src/kumascript/node_modules/async/lib/async.js:118:13
    at Array.forEach (native)
    at _each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:39:24)
    at Object.async.each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:117:9)
    at ks_utils.Class.reloadTemplates (/home/vagrant/src/kumascript/lib/kumascript/macros.js:281:19)
    at ks_utils.Class.process (/home/vagrant/src/kumascript/lib/kumascript/macros.js:217:15)
*/

Of course the actual "error" doesn't matter -- the stack trace is exactly what you need to figure out what's calling what up the chain. When available you can also use console.trace() (when available) to achieve roughly the same output.  You can thank me later!

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Use Custom Missing Image Graphics Using Dojo

    A few months back I posted an article about how you can use your own "missing image" graphics when an image fails to load using MooTools and jQuery. Here's how to do the same using Dojo. The HTML We'll delegate the image to display by class...

  • By
    Parallax Sound Waves Animating on Scroll

    Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...

Discussion

  1. Roman

    How about console.trace()?

    • console.trace() doesn’t exist on Chrome on Android.

  2. MaxArt

    How about node-inspector? It lets you use Chrome’s developer tools (sort of) to set breakpoints and inspect the code.
    I’m not debugging any node project without it anymore!

  3. Stuart

    Linked from JavaScript Daily. You can also use node debug whatever.js and put a debugger; statement in the location you want to inspect. Then the bt command will give you the trace.

  4. This is the solution I always use on my apps:

    https://gist.github.com/Venerons/f54b7fbc17f9df4302cf

    You can’t have more info than this. Really.

  5. Loupax

    I used to just call an undefined function in order to make an error appear. Lazy means to the same end I’d say

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!