80
votes

I am getting some client-side Javascript stack overflow issues specifically in IE browser, this is happening inside a third party library that makes some function calls and for some reason they occasionally brake in IE only due to it's low stack limit.

I then coded a small test HTML to test the stack size limit for some browsers and found that IE8 has actually a small stack limit if compared to FF 7 or Chrome 14 running on a Laptop with Windows 7 OS, 8Gb RAM:

<html>
<body>

<!-- begin Script: -->
<script type="text/javascript">

function doSomething(){

  var i = 3200;
  doSomethingElse(i);

}

function doSomethingElse(i){
  if (i == 0) return -1;
  doSomethingElse(i-1);
}

doSomething(); 

</script>
<!-- END OF PAGE -->

</body>
</html>

IE raises stack overflow when the values are around 3200, Firefox and Chrome can handle a very deep recursion if compared to IE.

I would like to know if there's a way to tie the stack-overflow exception with the Javascript function that raised it during runtime in IE or any other browser and if it could give the stacktrace with the chain of function in the stack at the moment the error was raised.

2
3200 calls is plenty of stack space. Python programmers (well, those not bent on writing recursive descent parsers or replacing perfectly simple loops with recursion for the heck of it) get along just fine with a 1000 call limit. What are you doing? - user395760
It's not worded strickly in an interrogative mode, but the last sentence "I wonder if there's ..." could be started with "Are there" and ended with a question mark, yielding a fairly direct question. - jball
Thanks for the feedback, I'll clarify better the question - guilhebl

2 Answers

138
votes

Using a simple test:

var i = 0;
function inc() {
  i++;
  inc();
}
    
try {
  inc();
}
catch(e) {
  // The StackOverflow sandbox adds one frame that is not being counted by this code
  // Incrementing once manually
  i++;
  console.log('Maximum stack size is', i, 'in your current browser');
}

Internet Explorer

  • IE6: 1130
  • IE7: 2553
  • IE8: 1475
  • IE9: 20678
  • IE10: 20677

Mozilla Firefox

  • 3.6: 3000
  • 4.0: 9015
  • 5.0: 9015
  • 6.0: 9015
  • 7.0: 65533
  • 8b3: 63485
  • 17: 50762
  • 18: 52596
  • 19: 52458
  • 42: 281810

Google Chrome

  • 14: 26177
  • 15: 26168
  • 16: 26166
  • 25: 25090
  • 47: 20878
  • 51: 41753

Safari

  • 4: 52426
  • 5: 65534
  • 9: 63444

Opera

  • 10.10: 9999
  • 10.62: 32631
  • 11: 32631
  • 12: 32631

Edge

  • 87: 13970

In regard to your question, use your browser's developer tools to see the stack. In IE 8+, hit F12, go to the Script tab, and click Start Debugging. It will break when an exception is thrown, and you can see the call stack. You can also use Chrome's developer tools, Ctrl+Shift+J.

7
votes

This is browser specific, not only the stack size, but also optimizations, things like tail recursion optimization and stuff. I guess the only reliable thing here is to code in a way that doesn't put tons of stuff into the stack, or manually testing(reading deep into the documentation of) each browser. After all, when you see the "too much recursion" error or similar you already know there's something really wrong with your code.