We Keep Coding

Debugging Ember JS -- Identifying line in code that causes an error

So I'm getting the following error:
Uncaught Error: Assertion Failed: The key provided to get must be a string, you passed undefined
Should be easy enough to fix, if there was any indication of the line in my code that causes that error.
Using the chrome console, I click on ember.debug.js:6254 next to the error, which just shows me the ember code that throws the error. I can expand the error, but I just get a bunch of functions that can't be clicked on and no indication where they come from.
Can someone please help me figure out how to identify the line in my Ember code that is causing the error.

I've gotten this error before. It happens when you call get() in any of its forms (Ember.get() or this.get() or get(this)) without a string as the name of the property you want to retrieve.
You should be able to find the source of the error by auditing your application for wherever you call get() and making sure you pass the property name as a string. E.g., Ember.get('model.someProp') or this.get('someProp') or get(this, 'someProp').

This should be a comment but I can't, so here goes:
Iam new to Ember and have been spending quite a long time debugging. Remember that long stack of function calls that chrome's console shows.
Look for anything other than ember.debug.js...especially those marked (anonymous function) and files with names vendor.js or app-name.js

Usually in software development when debugging your best friends are going to be console.log() or alert() (in the case of JavaScript). Usually you have to figure out if your getting what ever is that you passing to your function by consolelog everything until you find your bug. Ember sometimes will not tell you what is exactly the error because does not know where exactly is coming from.
...computers are annoying but we love them....
here are some articles from Mozilla developer and Google on how to debug JavaScript.

I had a NULL value in my database which I wasn't accounting for in my app. In my case, it shouldn't have been NULL in the first place, so after giving the record a value in my database the problem disappeared.
I agree the error message is not very helpful.

Chrome devtools not logging "undefined" anymore?

So, since a few days, my chrome developer tools/console won't output any undefined errors or Uncaught ReferenceError in some cases.
The script just stops without any indication, and I don't have pause on exceptions on, and there's no breakpoints.
Trying to call an undefined function foo() for example:
I have the filter on all so I'm not filtering anything.
I've reset the settings via Settings->General->'Restore defaults and reload'
I've tried disabling all extensions, but no difference.
I've tried a new user in chrome, still nothing
I've tried using "use strict" in my code, nothing.
I'm pretty sure this has something to do with reactjs, where foo() is not defined anywhere, but try to call it like the above screenshot. I had the same issue inside mixins.
Strangest thing is, that not all reactClasses have this problem. Also I've been through version 14.x to 14.7.
I've even tried copying a reactClass/Component which does output an error Uncaught ReferenceError as I'm trying in the above screenshot, but just give it another name (ie assign to different variable and export as separate module). And you guessed it, then the above screenshot occurs, no error, For the same exact code ?
I know, you're probably thinking I'm doing something terribly wrong, but how does a copy behave differently?
I think the above image indicates that something very strange is happening here. There must be a logical explanation, but I can't find any.
This is extremely frustrating, and I'm at a loss how to fix this/what the cause is.
It also doesn't matter where I put foo(), whether it's in render or in componentWillMount or any other method. And the worst is, if it's in componentDidMount I don't even notice, except that the component doesn't react or update anymore.
Upon further investigation it seems this problem only occurs on the first render of the whole component hierarchy...
This is new to me, it's as if the initial render has to be flawless and otherwise it will just halt without informing the developer.
On the upside, I now have to pay extra attention to the coherence of my code ;P. But truly, I can't really work like this.

How to report JavaScript errors during functional tests using Intern?

How can I report JavaScript errors that occur during test execution using Intern? Basically, if there are any JavaScript errors on the page (even as part of things that aren't explicitly tested) I want to know.
Background
I'm just getting started with Intern and testing in general and I'm trying to test all major pages on my site in all browsers because I just changed all our JavaScript to load via require.js. While it looks good in Chrome, I've had issues with require.js and random browsers in the past so I wanted to automate everything. The most likely issue that will arise is that some random JS will fail to execute due to asynchronous loading and load of an expected global. Since there are no current tests setup, I basically want to start by running a 'test' go to through all major pages and report any JavaScript errors.

In order to report uncaught errors, you need to hook the window.onerror method of the page. This is possible, but the page load will need to be finished before you add the hook, which means that any errors that occur before/during the page load (or that occur while the page unloads) simply cannot be caught and reported. It also means if you perform an action that moves to a new page (like a form submission), you will need to make sure you retrieve the list of errors before you perform the action that causes navigation, and reconfigure the window.onerror handler after you get to the new page.
To perform such reporting with a functional test, your test would end up looking something like this:
return this.remote
.get('http://example.com')
.execute(function () {
window.__internErrors__ = [];
window.onerror = function () {
__internErrors__.push(Array.prototype.slice.call(arguments, 0));
};
})
// ... interact with the page ...
.execute(function () {
return window.__internErrors__;
})
.then(function (errors) {
// read `errors` array to get list of errors
});
Note that (as of August 2014) errors from window.onerror in all browsers except recent versions of Chrome provide only the message, script source, line number, and (sometimes) column number, so this information would only be useful to say “this action caused an error, go do it manually to get a stack trace”.
During unit tests, Intern already tries to automatically catch any unhandled errors and treats them as fatal errors that halt the system (since you should never have code that generates this kind of unhandled error).

Anchor element's pathname returns undefined in Rhino with env.js

I have run into an issue that I believe is rooted in the implementation of anchor tags in Rhino. Although I am utilizing env.js, I suspect perhaps I am not configuring something correctly.
In particular, my issue occurs while I am attempting to write unit tests against code written for an angularjs application. When I include angular.js (versions 1.2.1 to present), I get the following error:
TypeError: Cannot call method "charAt" of undefined
I am convinced the error is the result of this call to urlParsingNode.pathname since a console.log call reveals that the pathname object is undefined.
I traced the instantiation of the urlParsingNode to this line where we see that it is the result of a call to document.createElement("a"); Further down, we see that they set the href attribute in this line in hopes that the created anchor tag will utilize the browser to correctly parse the URL.
I have to believe I'm not the first to attempt JS unit testing for angular via Rhino, but thus far I've not successfully Googled myself to a solution. Any tips will be greatly appreciated.

Found it and fixed it. The pathname getter/setter simply was undefined for HTMLAnchorElement in env.js.
I submitted a pull request, but unfortunately the project looks all but abandoned. I also couldn't figure out how to build it out to a single file. It appears perhaps someone has taken it upon themselves to break it apart into require.js modules. Not a battle worth fighting for my use case.
So for anyone else who hits this issue, I have the code you need below. It belongs in the HTMLAnchorElement.prototype. In my copy of env.js 1.2, this prototype begins on line 8075. I added the following at line 8118.
get pathname() {
var uri = Envjs.urlsplit(this.href);
return uri.path;
},
set pathname(val) {
var uri = Envjs.urlsplit(this.href);
uri.path = val
this.href(uri.urlunsplit(uri));
},
FYI, my particular issue is resolved with this pull request.

Meteor cannot read property 'click' of undefined

I'm having an issue where in production only (not development) I get hundreds of cannot read property 'click' of undefined with 3-30 on each click, and a few cannot read property 'submit' of undefined. This very well may not be an issue with Meteor but with my code, so I'm just looking for any ideas why this may be happening or how I can debug it. All my events are either in Template.events or Template.rendered. It happens on every page and no matter where I click.

There are a couple of things that can cause this.
The first is that in production mode latency is a lot higher. So if you've automatically assumed that when a template is rendered the data is ready you could get all sorts of undefined as the object's are null for a very short time when meteor initally loads.
You could check your code to see if you've used any findOne or find. You need to ensure that the result of your query is properly handled in the case that there aren't any results, for that initial load. i.e
var data = myCollection.findOne(...);
if(data) {
....
}
or
var data = myCollection.find(...);
if(data.count()>0) {
....
}
The other thing that might cause it are atmosphere packages that you're using that might not be mapped correctly.
To check this have a look at your network tab in the chrome inspector:
Look through for files whos extensions don't match their content (js & css files).
If a file is a .js file it might have HTML content (Meteor doesn't serve up 404 errors, instead giving them html whichever path is called, so no explicit errors are given).
If this is the case figure out which file it is and map it correctly. (You might be calling click to a plugin that didn't load correctly). In production mode files are minified and the package paths change so this might also be it.