Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chrome: How to debug random "Maximum call stack size exceeded" errors

In a complex JavaScript app (with jQuery and Ember), the JavaScript will occasionally crash randomly, either during page load or when I perform an action on the page. The error is as follows (screenshot):

Uncaught RangeError: Maximum call stack size exceeded   Class.proto   Class.proto   ... 

... with several pages of Class.proto stack trace lines, but no source/line information whatsoever, even at the bottom of the trace.

I know that this points at infinite recursion, and this could conceivably happen in the event system, but there is no obvious starting point for me.

I've been able to reproduce this only in Chrome Canary (22.0.1209.0), not Chrome stable or Firefox. The app is not talking to any external service or making any Ajax requests.

Since it happens only occasionally, and with no discernible cause, and since there's no usable stack trace, I'm having trouble tracking down the cause.

My question: What can I do to debug this problem?

like image 273
Jo Liss Avatar asked Jul 18 '12 14:07

Jo Liss


People also ask

How do you debug an error in maximum call stack size exceeded?

The most common way to fix this error is to reduce the number of function calls, or to limit the number of variables that are created. Another option is to use a tracer debugger to keep track of the program's state and find the function that's causing the error.

What causes maximum call stack size exceeded?

The JavaScript RangeError: Maximum call stack size exceeded is an error that occurs when there are too many function calls, or if a function is missing a base case.

How do I fix maximum call stack size exceeded see JavaScript console for details?

The "RangeError: Maximum call stack size exceeded" error occurs when a function is called so many times that the invocations exceed the call stack limit. To solve the error, specify a base case that has to be met to exit the recursion.

Where is call stack in Chrome dev tools?

View the Call Stack To view the call stack, open DevTools Sources panel and on the right panel, expand the Call Stack panel to see all the current functions in the call stack.


1 Answers

Enable 'Break on exceptions' in the Chrome Developer Toolbar. Use this This is the icon icon in the footer of the toolbar on the Sources tab (there are 3 states!)

It should stop your code and you can see the stack!

like image 130
Split Your Infinity Avatar answered Sep 23 '22 03:09

Split Your Infinity