CODEWITHSUNDEEP
javascriptmeteormeteor-blaze
Nathan Hornby
Nathan Hornby

Reputation: 1443

Why does this template helper produce an error but still work?

I'm getting an exception from one of my template helpers in Meteor - even though I see my logs just fine.

Template.DashboardHeader.helpers({
  avatar: function () {
    if (Meteor.user().profile.image){
      console.log('yea');
    } else {
      console.log('nah');
    }
  }
})

I'll eventually be using it to serve an avatar, depending on whether or not the user has set one in their account. The helper actually works as you might expect and logs the correct output depending on the situation, but I get this big unhelpful exception whenever it's run:

Exception in template helper: .avatar@http://localhost:3000/client/master.js?86599d1d506dfe7d57211f3faa8757db9ba5cb81:16:9
BlazeProvider.helpers/http://localhost:3000/packages/meteorhacks_kadira-debug.js?ee5ca93234e8f5b94a8e5560eb5ea8b7fcbb9c4d:339:26
... a lot more lines later...
Tracker._runFlush@http://localhost:3000/packages/tracker.js?6d0890939291d9780f7e2607ee3af3e7f98a3d9c:485:9 onGlobalMessage@http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:372:11

Given that it doesn't really tell me anything (that I can see/understand) I'm not sure what to be troubleshooting!

Here's the template code (simplified):

<template name="DashboardHeader">
  <img id="user-img" src="{{ avatar }}" alt="{{ currentUser.profile.name }}" width="34px" height="34px" />
</template>

Although the exception triggers wherever the {{ avatar }} is placed within the template tags. But doesn't trigger if it's not present in the template. So it seems it's got less to do with the helper itself than how it's being applied.

Anyone knows what's up with it?

Upvotes: 1

Views: 88

Answers (1)

Kyll
Kyll

Reputation: 7151

This kind of error (huge exception in console but data appears in template) is generally due to a reactive dependency being undefined and queried upon.

Take the following example:

Template.myTemplate.helpers({
  'name' : () => MyCollection.findOne().name
})

Depending on data availability or the subscription strategy the above can throw an exception because MyCollection.findOne() is undefined when first called.
However the correct output will still appear once the data is available (subscription kicked in). findOne invalidates its dependencies (including the helper) and because the name is now present it will show in the template.

In your case it means either Meteor.user() or Meteor.user().profile is undefined when first called.

To solve easily you can use some short-circuiting :

//Will return undefined if findOne() is undefined
() => (MyCollection.findOne() && MyCollection.findOne().name)

There is other ways to implement such undefined checks of course.

You also seem to be using Firefox.
Meteor spews out hideous stack traces with no error reasons on some browsers.

On Chrome, this is what such an error looks like with my example :

Exception in template helper: TypeError: Cannot read property 'name' of undefined
at (... stacktrace ...)

So when you see giant unintelligible String-joined stacktraces, check if you can have more useful information on another browser.

I have built a complete demo of this behaviour on MeteorPad.

Upvotes: 2

Related Questions