Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

Debugging JavaScript apps can be hard. Today I was reading an article about debugging functional JavaScript and found a handy tiny detail.

Let's assume an error is thrown deep inside your app.

main();

function main() {
  one();
}

function one() {
  two();
}

function two() {
  three();
}

// you get the idea :)

function ten () {
  eleven()
}

function eleven () {
  throw new Error("I can't see the whole stack strace")
}

When you execute this in Chrome or Node.js you get the following stack trace printed to the console.

Uncaught Error: I can't see the whole stack strace
    at eleven (<anonymous>:49:9)
    at ten (<anonymous>:45:3)
    at nine (<anonymous>:41:3)
    at eight (<anonymous>:37:3)
    at seven (<anonymous>:33:3)
    at six (<anonymous>:29:3)
    at five (<anonymous>:25:3)
    at four (<anonymous>:21:3)
    at three (<anonymous>:17:3)
    at two (<anonymous>:13:3)

As you see the first two function calls (main and one) of the stack trace are omitted. It turns out that you can configure the length of the printed stack trace using Error.stackTraceLimit. This configuration enables you to enrich the logging when you're facing a bug buried deep in your application.

Error.stackTraceLimit = 20;

When you increase this value, you will see the whole trace logged.

Uncaught Error: I can't see the whole stack strace
    at eleven (<anonymous>:50:9)
    at ten (<anonymous>:46:3)
    at nine (<anonymous>:42:3)
    at eight (<anonymous>:38:3)
    at seven (<anonymous>:34:3)
    at six (<anonymous>:30:3)
    at five (<anonymous>:26:3)
    at four (<anonymous>:22:3)
    at three (<anonymous>:18:3)
    at two (<anonymous>:14:3)
    at one (<anonymous>:10:3)
    at main (<anonymous>:6:3)
    at <anonymous>:2:1

If you use Error.stackTraceLimit you have to be aware of the fact that it is a non-standard according to MDN and a quick check reveals that is also not supported in Firefox. I didn't check Edge.

Also, Chrome and Safari support it but use different default values. Chrome goes with 10 and Safari with 100. When you look around you'll also see that CodeSandbox increases the limit to 50.

In my opinion, this configuration is nothing ground-breaking, but it might become handy someday when I'll debug a large JS app in the browser or a Node.js application. It won't replace the debugger though. :)

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 9 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles