Debugging Ember.js errors: Error while loading route - ember.js

While in any particular case there are hints and clues on how to debug an error you get, I haven't really found a general Ember strategy.
For example, a typeError while loading a route:
Assertion failed: Error while loading route: TypeError: 'undefined' is not an object (evaluating 'window.router.lander') (ignore the fact that I'm trying to access window.router.lander. It's irrelevant)
Why does Ember not tell you which route it's loading when this error happens? Or whether it happens in afterModel(), or activate()? And what's the general strategy for finding that sort of context info?
So far all I've got is adding a bunch of console.logs scattered around. For example with the error above:
1) Find all occurrences of window.router.lander in my code
2) before the first occurrence, add a console.log('is it the first occurrence?'), and after the first occurrence put a console.log('its not the first occurrence')
3) Do the same for every occurrence
4) refresh. One of the 'is it the nth occurrence?' won't have a closer, and now you know where the error happened.

For better debugging, you can enable transitions logging by create app with LOG_TRANSITIONS and/or LOG_TRANSITIONS_INTERNAL properties:
window.App = Ember.Application.create({
// Basic logging, e.g. "Transitioned into 'post'"
LOG_TRANSITIONS: true,
// Extremely detailed logging, highlighting every internal
// step made while transitioning into a route, including
// `beforeModel`, `model`, and `afterModel` hooks, and
// information about redirects and aborted transitions
LOG_TRANSITIONS_INTERNAL: true
});
Referenece: http://emberjs.com/guides/understanding-ember/debugging/
Also, you can use canary build which provide detailed error stack:
http://emberjs.com/builds/#/canary

Ember isn't particularly helpful when it comes to errors in the model hook, or the promises it returns. I'm sure I've read in one of the issues (or http://discuss.emberjs.com/ I'm not sure) that this is an open issue in which they're working.
What I do is use the Chrome Developer Tools to debug the issue (instead of just console loggin it). From my experience it's usually:
you're not returning anything in the model hook
an error inside one of the then functions on the promise the model hook returns
I hope it helps you!

Related

Ember.js 2.x: Handling "Could not find component..." error thrown by component helper

I have need in my Ember.js app to render a different component based on some piece of data. I've set this up via the component helper, like so:
<article class='awesome-article'>
{{component article-type}}
</article>
This works all fine and well, though naturally, if the article-type attribute doesn't match the name of any component in the application (which may happen due to fat-fingering), it gives us a nice, explicit error message:
Uncaught Error: Assertion Failed: HTMLBars error: Could not find component named "nonexistent-component" (no component or template with that name was found)
This is also great, but now I've got a smaller problem: I'd like to gracefully handle this error in the application, but I can't seem to figure out how to either catch or prevent this error. I've tried adding an error action to the parent component, but it skips right past it.
How can I go about handling this? This is probably one of those "missing something obvious" things, but my Google-fu has failed me this time.
You could create a handlebars helper that looks up if the component is registered in the container and based on this information you can display it or display some placeholder component.
If you are on at least Ember 2.3 you can use the public API they added: http://emberjs.com/api/classes/RegistryProxyMixin.html#method_hasRegistration

Use Ember.set() to set the 'content' property

We have an issue that seems to be very similar to https://github.com/emberjs/ember.js/pull/9767. The error we get is the following:
Error while processing route: [route-name] Assertion Failed: You must use Ember.set() to set the 'content' property (of [route]) to 'undefined'.
So the only difference is that it complaints about 'content' instead of 'controller', and that it is trying to set it to 'undefined'. This only happens for a few users, and it seems to be mostly old Android-devices. We have managed to reproduce the error in the default browser on a device running android 2.3.4.
Does anyone have a clue to why this happens? Debugging on old android devices is a pain!
I forgot about this question on StackOverflow, and someone else in our team have committed a fix for the issue. This line of code:
return self.getJSON(self.get('dataUrl'))
.then(self.get('_modelMap').bind(self))
Have been changed to this:
return self.getJSON(self.get('dataUrl'))
.then(function(data) {
return self._modelMap(data);
})
This was done in one of our base controllers.
Handlebars was also upgraded from v1.3.0 to v2.0.0 in the same commit. Don't know if that is required for fixing the issue though.
Hopefully this can help others with the same issue :)

Ember App Kit: Router#updatePaths throws TypeError

I try to migrate an existing Ember.js project to use Ember App Kit and I'm seeing some strange error which I think should not happen here...
If I start the app, everything is initialized, my util classes are up and running and Ajax requests are sent and received - everything seems well. But then I keep getting the same error over and over again:
Uncaught TypeError: Cannot read property 'name' of undefined
If I follow down the StackTrace I came to see that the error occurs in the updatePaths() function of the Router (I commented on the lines where the code starts to fail:
function updatePaths(router) {
var appController = router.container.lookup('controller:application');
if (!appController) {
// appController might not exist when top-level loading/error
// substates have been entered since ApplicationRoute hasn't
// actually been entered at that point.
return;
}
var infos = router.router.currentHandlerInfos, // <-- empty Array ([])
path = Ember.Router._routePath(infos); // <-- empty String ("")
if (!('currentPath' in appController)) {
defineProperty(appController, 'currentPath');
}
set(appController, 'currentPath', path);
if (!('currentRouteName' in appController)) {
defineProperty(appController, 'currentRouteName');
}
set(appController, 'currentRouteName', infos[infos.length - 1].name); // throws Uncaught TypeError: Cannot read property 'name' of undefined
}
Here is the StackTrace:
Uncaught TypeError: Cannot read property 'name' of undefined ember.js:35015
updatePaths ember.js:35015
Ember.Router.Ember.Object.extend.intermediateTransitionTo ember.js:34522
(anonymous function) ember.js:34919
forEachRouteAbove ember.js:34869
defaultActionHandlers.loading ember.js:34915
triggerEvent ember.js:34983
trigger ember.js:34116
Transition.trigger ember.js:33952
Ember.Router.Ember.Object.extend._fireLoadingEvent ember.js:34750
DeferredActionQueues.flush ember.js:5893
Backburner.end ember.js:5984
Backburner.run ember.js:6023
Ember.run ember.js:6426
runInitialize ember.js:39637
jQuery.Callbacks.fire jquery.js:3063
jQuery.Callbacks.self.fireWith jquery.js:3175
jQuery.extend.ready jquery.js:3381
completed jquery.js:3397
Also, it seems that the appController is not my instance of the ApplicationController but a generated controller from ember itself and I can't see why (my ApplicationController is defined in app/controllers/application.js...
Does anybody know anything about this behaviour or could show me the right direction to track down this error somehow?
So, I digged deeper into this error and also found an issue over at the GitHub project which is describing what I thought was exactly my problem too.
It turns out that somehow Ember App Kit (or even Ember itself) is swallowing messages/errors thrown by Ember.assert and the like so that I followed the suggestion of Stefan Penner and switched to pause on caught exceptions within my browsers dev tools and I saw that it's not one, but several errors!
Unfortunately all these errors fail silently until the last error cannot be caught anymore which is why every error showed the same Stack Trace...
So, the solution seems to be to be sure to pause on caught exceptions and trace down the error message in Ember.assert()... has anybody else seen the same problem and has some other suggestions or could approve my conclusion?
Screenshot of "pause on caught exceptions" in Chrome Dev Tools:

ember Uncaught Error: assertion failed: Unable to find view at path

I am trying to learn ember.js and i started by trying to set up a simple (not so simple) mouseover, out, down example for myself.
http://jsfiddle.net/RBbpS/48/
I keep getting a "Uncaught Error: assertion failed: Unable to find view at path"
Can someone shed some light on this I am sure it is something simple.
Your first fiddle works if you declare the App as a global (without the var).
http://jsfiddle.net/Sly7/RBbpS/52/
That beeing said, if you're new to ember, I advice you to starts with reading emberjs.com (do not forget the api:), where you can find what are the handlers for a view
from the doc:
Mouse events: 'mouseDown', 'mouseUp', 'contextMenu', 'click', 'doubleClick',
'mouseMove', 'focusIn', 'focusOut', 'mouseEnter', 'mouseLeave'
Finally, the version you use here is a quite old one, I suggest you to try the latest release: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js (do not forget to include also http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js
Try mouseEnter and mouseLeave instead mouseOver and mouseOut . Refer the ember.js view events guide

Transition error when splitting Ember statechart between multiple files

I am trying to work out how best to split up my Ember.js statechart into multiple files.
Using SproutCore we needed to use SC.State.plugin('statename') to associate a state we defined in another file with our main statechart.
I saw no such functionality in Ember, so instead I simply added a new state to my statemanager's states hash. (See also my jsFiddle)
App.statemanager = Ember.StateManager.create({
stateOne: Ember.State.create(....)
})
// new file:
App.statemanager.states.stateTwo = Ember.State.create(....)
At first this seemed to work -- I was able to transition to the new state I defined. However, I discovered that I was not able to transition out of this state using an action:
App.statemanager.states.stateTwo = Ember.State.create({
doSomething: (manager) {
manager.transitionTo("stateOne");
}
)}
App.statemanager.send("doSomething"); // throws error when trying to transition
The error I get locally is
Uncaught Error: assertion failed: You need to provide an object and key to `get`.
Ember.StateManager.Ember.State.extend.findStatesByRoute
The error I get in my jsFiddle is
Uncaught TypeError: Cannot read property 'length' of undefined
Ember.StateManager.Ember.State.extend.contextFreeTransition
Ember.StateManager.Ember.State.extend.transitionTo
Does anyone know why this is happening, and what the correct way to break up a statechart is?
Instead of trying to edit or add to an already created State Manager you should build up the individual states and then combine them all when building your state chart.
For example: http://jsfiddle.net/a6wHt/5/
App.Statemanager = Ember.StateManager.extend({
initialState: 'stateOne',
stateOne: App.StateOne,
stateTwo: App.StateTwo,
stateThree: App.StateThree,
stateFour: App.StateFour
});
Also, I used extend to build the 'class' and then instantiated at the end with create. I think it is a good idea to get in the habit of doing this, even if you treat your state chart as a singleton. It makes your code easier to test later down the line.