Meteor exception in Meteor.flush when updating a collection violates customer responsiveness

Question

When I call Collection.update from the front-end (method call is allowed), the update works fine, but the exception below is thrown (in the Chrome JS console, not the server). Although there has been an update, other clients connected to the same collection do not see updates until they update the browser - I suspect because of an exception.

Any idea what might trigger this?

Exception from Meteor.flush: Error: Can't create second landmark in same branch at Object.Spark.createLandmark (http://checkadoo.com/packages/spark/spark.js?8b4e0abcbf865e6ad778592160ec3b3401d7abd2:1085:13) at http://checkadoo.com/packages/templating/deftemplate.js?7f4bb363e9e340dbaaea8d74ac670af40ac82d0a:115:26 at Object.Spark.labelBranch (http://checkadoo.com/packages/spark/spark.js?8b4e0abcbf865e6ad778592160ec3b3401d7abd2:1030:14) at Object.partial [as list_item] (http://checkadoo.com/packages/templating/deftemplate.js?7f4bb363e9e340dbaaea8d74ac670af40ac82d0a:114:24) at http://checkadoo.com/packages/handlebars/evaluate.js?ab265dbab665c32cfd7ec343166437f2e03f1a54:349:48 at Object.Spark.labelBranch (http://checkadoo.com/packages/spark/spark.js?8b4e0abcbf865e6ad778592160ec3b3401d7abd2:1030:14) at branch (http://checkadoo.com/packages/handlebars/evaluate.js?ab265dbab665c32cfd7ec343166437f2e03f1a54:308:20) at http://checkadoo.com/packages/handlebars/evaluate.js?ab265dbab665c32cfd7ec343166437f2e03f1a54:348:20 at Array.forEach (native) at Function._.each._.forEach (http://checkadoo.com/packages/underscore/underscore.js?772b2587aa2fa345fb760eff9ebe5acd97937243:76:11) 

EDIT 2

An error will also occur if a management console call is launched in the console. This happens when the update is launched for the first time, but by that time the reactivity was broken on any other browser attached to it.

EDIT Here is my template for an interactive element that triggers an update:

 <template name="list_item"> <li class="checklistitemli"> <div class="{{checkbox_class}}" id="clitem_{{index}}"> <input type="checkbox" name="item_checked" value="1" id="clcheck_{{index}}" class="checklist_item_check" {{checkbox_ticked}}> {{title}} </div> </li> </template> 

and here is the event handler for clicks on 'list_item':

 Template.list_item.events = { 'click .checklistitem' : function(ev) { this.checked = !this.checked; var updateItem = {}; updateItem['items.'+this.index+'.checked'] = this.checked; console.log("The error happens here"); Lists.update({_id: this._id}, {$set:updateItem}, {multi:false} , function(err) { console.log("In callback, after the error"); }); } } 

All of this is available at http://checkadoo.com (its port of my Tornado-based Python application)

Answer 1

I found that this is usually a problem with duplicate identifiers. The @Harel question does not include the code that actually displays the collection, so we cannot determine the root cause of its problem, but the reproduction that @Drew provided in the comments throws this error because it is rendering an array of objects that have duplicate '_id' .

I put together a working version of @Drew: https://github.com/alanning/meteor-buggy-fix

A key fix is ​​to make sure the inserted drink items do not have duplicate _id fields:

  Template.drink_from_menu.events({ 'click .buy_drink': function () { var drink = {name: this.name, price: this.price}; console.log("this = ", this); // using 'this' doesn't work because it already has a '_id' field and // you would be trying to render multiple drinks with the same id // which causes Spark to throw the "Can't create second landmark // in same branch" error //Tabs.update({_id:Session.get('tabId')}, {$push: {ordered_drinks: this}}); // either ensure that the objects you want Spark to render have a // unique id or leave off the _id completely and let Spark do it for you Tabs.update({_id:Session.get('tabId')}, {$push: {ordered_drinks: drink}}); } });