Firebase Stack Overflow

[Joseph Dillon]

Ok community I'm stuck pretty well. I posted this question on StackOverflow but havent gotten anywhere yet.

Heres what I posted:

So I'm new to Firebase as well as Javascript. So I have no clue how I'm getting this error:

Uncaught RangeError: Maximum call stack size exceeded.

From this code:

var player1Ref = new Firebase('https://myref.firebaseio.com/game/players/player1')

player1Ref.on('child', function (snapshot){
  var chips = snapshot.val().chips;
  var name = snapshot.val().name;
  $('#player1name').html(name);
  $('#player1chips').html(chips);
})

I dont know if this is a Firebase issue, a JQuery / Zepto issue (I use Zurb's Foundation and they use Zepto), or something else. I've never encountered a stack overflow issue before so I dont know how to fix it (yet).

Tips?

[Joshua Haas]

"Maximum call stack size exceeded" means you have a series of recursive function calls that never terminate (or terminate after the limits of the javascript engine).  For instance, this code will cause that bug: 

function never_ends { never_ends() } ; never_ends();

You should be able to look at the stack trace for the error to see the last few function calls leading up to it, which can give you a clue for where the recursive loop happens.  If you're still stuck on this, try sending the stack trace to the list, it's hard to debug without seeing that.

My guess is the snippet of code you pasted isn't actually where the problem is -- I don't see anything in there that would cause an infinite recursion.   I do see one problem with the code, which is that you probably mean .on('value') instead of .on('child'), since it looks like your code should run whenever the data at player1 is modified.  The "child_added" and "child_removed" events are normally for lists of things, which I'm guessing is not the case here.

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Joseph Dillon]

Yeah I caught the typo for "value" and "child". Earlier I tested what "child_added" would return and didnt realize that I hadnt fully changed it back when I posted it. 

I just looked closer at the stack trace in the error and this was pretty interesting:

It starts off by calling:

1. (anonymous function)zepto.js:1067
2. (anonymous function)zepto.js:409
3. $.fn.eachzepto.js:408
4. $.fn.triggerzepto.js:1064
5. Foundation.libs.reveal.closefoundation.min.js:14
6. Foundation.libs.reveal.initfoundation.min.js:14
7. (anonymous function)foundation.min.js:13
8. t.Foundation.trapfoundation.min.js:13
9. t.Foundation.init_libfoundation.min.js:13
10. t.Foundation.init

And then repeats until it ends with:

1. (anonymous function)zepto.js:1067
2. (anonymous function)zepto.js:409
3. $.fn.eachzepto.js:408
4. $.fn.triggerzepto.js:1064
5. $.fn.(anonymous function)zepto.js:1094
6. (anonymous function)localhost:3000/:178
7. handler.proxyzepto.js:933
   
   

So the problem is in Zepto? I'm not sure how I would cause this to act recursively. Is there a way I can force it to exit?

[Joseph Dillon]

So looking at things closer, in the error:

1. (anonymous function)localhost:3000/:17
   

It refers to the "if ($('#playerOneSelect').click())" part of this function (its to reveal the proper controller for a simple Texas Hold'em game.):

     $(".join").click(function(){

    $('#joinGame').foundation('reveal', 'close');
    if ($('#playerOneSelect').click()) {
      $("#playerOne").show();
    } else if ($("#playerTwoSelect").click()) {
      $("#playerTwo").show();
    };
  }); 

I remembered that this function was orginally this (until I condensed it): 

  $(".join").click(function(){
    $('#joinGame').foundation('reveal', 'close');
  });
  $("#playerOneSelect").click(function(){
    $("#playerOne").show();
  })
  $("#playerTwoSelect").click(function(){
    $("#playerTwo").show();
  })

I changed things back and it removed the stack trace error.

Now, I (sorta) fixed things. But now I want to understand why. I dont see how calling if ($('#playerOneSelect').click() made things recursive.

Some good mentoring would be well appreciated :)

Thanks

[Joshua Haas]

I haven't worked with Zepto, but I believe that the API matches jQuery?  In jQuery, calling  $('#playerOneSelect').click()  would simulate a click event on that element, which means that all the click handlers for that element (and parent elements) would be called.  So if you're doing that from within a click handler on that or a parent (I'm guessing .join matches as #playerOneSelect and #playeTwoSelect), it would cause an infinite recursion.

By the way, read javascript stack traces in Chrome from bottom to top -- the top line is the line where the error happened, the bottom line is the outermost stack frame.

 

[Joseph Dillon]

Awesome. That really helps fill in the blanks for me. And its also good to know which direction to read stack traces in Chrome.