Endless loop in watch #1483
Description
There is an infinite loop caused by a deep watch loop, as can be seen in the animated gif below, we start with a simple object which is watched by MarkerChildModel, through a call to
return _this.handleModelChanges(newValue, oldValue);
this does deep watching using getChanges method
ModelKey.prototype.getChanges = function(now, prev, whitelistedProps) {
c = this.getChanges(now[prop], (prev ? prev[prop] : null));as can be seen in the animated gif, all properties in the object are watched, including a property called icon which has a field called scaledSize, which looks like so:
X {width: 36, height: 36, L: "px", N: "px"}
however, this object has a prototype which is has a toString function which in turn has a method called disable, which seems to references itself.
Since the getchanges method recursively dives in, it never stops until an exception is fired, repeatedly watching disable. This X type object is a google.maps.Size object, so it's not something I can control, and is probably a commonly used property.
There is no way I found to limit how deep the watch should go, and it doesn't limit itself by default.
The initial model which we create and add to the models array used by gmap markers is:
{
_id: place._id,
latitude: place.lat,
longitude: place.lon,
options: {
icon: {
url: iconUrl,
size: iconSmallSizeObj
}
},
titleContent: place.companyName
}
where the issue occurs for icon's property size, because iconSmallSizeObj is defined as
new google.maps.Size(32, 32)
so I assume that to reproduce you need to add this type of object to the model.
Final word: this does not happen immediately when the model is added, there is some race condition or some other unexplained process which causes this to happen, can't figure out the exact route to make this happen but it happens very frequently.
