How to debug this? (don't know where to insert debugger breakpoint)

I’ve got some strange stuff going on in some code. This is all client-side stuff. When I insert the following line into my template:

{{> afFieldInput name="interestedIn" class="input-md" options=products noselect=true}}

Things go haywire and I get the errors below. This is from Firefox. Chrome has nothing useful at all, which is strange because usually Chrome has better error-reporting for Meteor. :slight_smile: How do I debug this one?

"Exception from Tracker recompute function:" undefined
"TypeError: can't convert undefined to object" undefined
"_.has@http://localhost:3000/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:1123:12
LocalCollection._compileProjection/<@http://localhost:3000/packages/minimongo.js?af9eb9d7447544ca9b839a3dcf7ed2da2209b56c:2924:26
Spacebars.dot/<@http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:245:12
Spacebars.call@http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:172:12
Spacebars.mustacheImpl@http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:109:10
Spacebars.mustache@http://localhost:3000/packages/spacebars.js?7bafbe05ec09b6bbb6a3b276537e4995ab298a2f:113:16
@http://localhost:3000/packages/aldeed_autoform.js?e71f561d26e90711b8a4ddf6136073fdffff296d:9010:14
doRender@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2011:20
viewAutorun/</<@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1865:16
Template._withTemplateInstanceFunc@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:3476:12
viewAutorun/<@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1864:1
Blaze._withCurrentView@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2197:12
viewAutorun@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1863:1
Tracker.Computation.prototype._compute@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:327:5
Tracker.Computation@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:243:5
Tracker.autorun@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:566:11
Blaze.View.prototype.autorun@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1875:14
Blaze._materializeView/<@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2005:1
Tracker.nonreactive@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:593:12
Blaze._materializeView@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2004:3
materializeDOMInner@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1476:9
Blaze._materializeDOM@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1428:7
BlazeProvider._materializeDOM/<@http://localhost:3000/packages/meteorhacks_kadira-debug.js?ee5ca93234e8f5b94a8e5560eb5ea8b7fcbb9c4d:383:20
doMaterialize@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2017:32
Tracker.nonreactive@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:593:12
doRender@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2015:9
viewAutorun/</<@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1865:16
Template._withTemplateInstanceFunc@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:3476:12
viewAutorun/<@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1864:1
Blaze._withCurrentView@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:2197:12
viewAutorun@http://localhost:3000/packages/blaze.js?a5c324925e5f6e800a4c618d71caf2848b53bf51:1863:1
Tracker.Computation.prototype._compute@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:327:5
Tracker.Computation.prototype._recompute@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:346:9
Tracker._runFlush@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:485:9
onGlobalMessage@http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:372:11
" undefined

Make sure that the products object is defined at the time of rendering. The reason for this error is because the options part of an afFieldInput uses reactive vars, but you cannot store undefined in a reactive var.

Oops! Figured it out. Below is the failing code:

Template.getStarted.onCreated(function () {
  this.subscribe('products');
});

Template.getStarted.helpers({
  products: function () {
    return Products.find({}); //culprit here
  }
});

Corrected code:

Template.getStarted.helpers({
  products: function () {
    return Products.find({}, {sort: {sortOrder: 1}}).fetch().map(function (p) {
      return {label: p.name, value: p.name};
    });
  }
});

Though I’m still curious, what’s the best way to debug issues like this, if you don’t know where to insert the breakpoints? And in fact, inserting debugger statements doesn’t seem to do anything for client-side debugging.