Develop Reference

How to get polymer.js software to report on errors/exceptions?

Is it possible to track errors in polymer.js in a strategic way? Somehow I don't get any error-messages or Exceptions. In case of Errors, Polymer just does nothing if I'm doing something wrong.
For example, if I add the property disableSwipe to paper-drawer-panel, it is ignored, but there is no error-message or logging that could give me a hint what is going wrong. (I still don't know why, but this is offtopic)
Is there any way to activate some Kind of strict-mode that would cause Polymer to throw Exceptions in case of an error, or at least activate some logging that would show error-messages?
Debugging without errorMessages feels too much coincidence-based to me.

Someone else beat you to this complaint and filed an issue with Polymer.js.
https://github.com/Polymer/polymer/issues/3367
I searched through the Polymer project and there is no mention of error handling or exception handling or increased verbosity levels, and until they code something in to implement those features, you'll be left with the default javascript runtime, coding blind and with poor mans debugger.
As an alternative, the polymer.js people recommend using polylint, which won't give you information about runtime errors or exceptions, but instead a static code analysis analyzer, and it might not find your exception because your error might be some off-by-one error that static code analysis can't find.
https://github.com/PolymerLabs/polylint
That's a bad code smell and strike against Polymer.js If you can't bother to put in proper exception reporting and error handling, I can't be bothered to use your product.
The best you're going to get other than polylint is whatever the google javascript developer tools embedded in google chrome browser gives you:
https://developers.google.com/web/tools/chrome-devtools/inspect-styles/shortcuts
That will give you warnings and errors, but that's only if the polymer.js devs wrote an actual bug. If it doesn't halt on an error or warning, you're left to inspect and watch the javascript code line by line, and try to guess what went wrong by reading the Polymer.js source.

Debugging Javascript/ReactJS errors

I'm building a small application with ReactJS and sometimes find it difficult to debug it.
Every time I make some Javascript error, like missing let/var in front of new variable, missing require for a component that I later use, my application just stops working (the code does not execute beyond the line where the error is), but I'm not getting any errors in browser's console. It seems as if some ReactJS code was intercepting errors, maybe handling them some custom way. Is there anything like that in ReactJS? How can I see errors in the console?
I'm using gulp/gulp-connect/browserify set to run the application.
Let me know if you need any additional data or code samples, I'll update the question.

If you know that an error is thrown but swallowed by some other code, you can enable in your browser's debugger to pause execution when an exception is thrown, even if it is caught somewhere:
Note however that libraries sometimes deliberately trigger exceptions while testing whether the browser supports certain features. You'd have to step over those.

Usage of React Hot Loader which is a Webpack plugin should solve most of the problems you have in a development process. It's easy to integrate into existing project and has quite a few examples how to put all the things together.
As a result:
your code changes would be pushed to the browser
in case of the error you will have meaningful stack trace in the browser console.

I'm guessing that the incorrect JS syntax is causing your gulp process to fail which would result in your application not being bundled/deployed in the browser at all.
It seems like there should be errors in your system console (where gulp is running) - as opposed to your browser console. Possibly your gulp process crashes when this happens too. If there are no errors in your console, you may have to listen for them. This post has an example of how to log errors from browserify:
gulp.task('browserify', function(){
var b = browserify();
b.add('./main.js');
return b.bundle()
.on('error', function(err){
console.log(err.message); //
this.end();
})
.pipe(source('main.out.js'))
.pipe(gulp.dest('./dist'));
});
Probably the best solution is to run your code through jshint before browserify so that you aren't trying to browserify syntactically invalid code.
Caveat: not a current gulp user

I suffered from the similar problem with this like missing let/var, require, and other trivial mistakes inside of the react context.
In my case, the cause is the mistake of Promise statement. Promise seems to suppress any exceptions that occur after it is called.
I could resolve the problem by handling exception like below.
var Promise = require('es6-promise').Promise;
var promise = new Promise(...)
promise
.then(function(data){...})
.catch(function(e) {
console.error(e.stack)
}

react-slingshot is a starter kit and it shows error at compile time and shows stack trace on the browser. It also has testing set up.

Test parse errors in intern do not include the line that describes the error

tl;dr When there is an error with a test written in intern I don't seem to get error messages that describe on which line the error occurred. I've found a workaround but its not really the ideal solution as it involves messing with code in dependent projects. Does any one have a better way / am I just doing it wrong? Thanks!
Details :
I've seen several times that when there is an issue with parsing a test written in intern (for example failing to close brackets, quotes etc.) that the actual line where the error occurred is not reported, and there is only an error like this (I've subbed in for the actual path as its a work project, but you get the gist):
SyntaxError: Unexpected identifier
at Function.vm.runInThisContext (<myproject>/node_modules/intern/node_modules/istanbul/lib/hook.js:163:16)
at <myproject>/node_modules/intern/node_modules/dojo/dojo.js:745:8
at fs.js:266:14
at Object.oncomplete (fs.js:107:15)
I poked around a little and discovered that there's an undocumented(? - its not in here) parameter for vm.runInThisContext, which if enabled actually provides details of the original error (here and here) - there's some discussion about how this will play out but if I switch dojo.js and hook.js in istanbul (if its running) to use this parameter, I get error messages like this :
<myproject>/test/publisherConfigSpec.js:16
errorCb cat = dfd.rejectOnError(function(error) {
^^^
SyntaxError: Unexpected identifier
at Function.vm.runInThisContext (<myproject>/node_modules/intern/node_modules/istanbul/lib/hook.js:163:16)
at <myproject>/node_modules/intern/node_modules/dojo/dojo.js:745:8
at fs.js:266:14
at Object.oncomplete (fs.js:107:15)
which is the output I want (or at least massively improves my chances of finding and fixing the error) but its not ideal to be messing about with the node dependencies, and it seems to me that it may be too much in flux for a pull request (see most recent update to the API) Is there an alternative way of getting useful output when there's an error parsing the test code input?
Thanks for any advice :)

The output that Node.js provides for SyntaxError is obviously not great, but we probably won’t use undocumented features (they’re undocumented for a reason!) in any official release of Intern to make it work differently. Non-syntax errors (runtime errors) will be caught and reported competently by Intern to whatever reporters you are using.
In this case, I’d advise you to use an editor that includes support for syntax checking: Komodo Edit/IDE, WebStorm, SublimeText, Eclipse, vim… if you get to the point where you are trying to run syntactically invalid code, your code editor is failing you by not telling you soon enough that you’ve made a mistake.

Uncaught ReferenceError: chrome_fix3 is not defined _cmp_execLogic._cmp_suclick

I am getting the following error. How can I resolve this?
Uncaught ReferenceError: chrome_fix3 is not defined
_cmp_execLogic._cmp_suclick

Good news - the error is nothing to do with your site.
Bad news - it's caused by an erroneous browser extension that's injecting invalid javascript into your pages. I have an ever increasing list of similarly caused errors that we can do nothing other than trap and ignore. At some point I intend to feed a message back to the user that something they have installed may cause problems on our sites, but ideally I'd like to tell them exactly what extension is causing the issue, which I don't know in all cases.
If anyone knows where the attempt to reference "chrome_fix3" actually comes from, please add to this post.
A similar error that we trap but is nothing to do with our code is:
Uncaught ReferenceError: conduitPage is not defined
I found the following pages helpful when investigating the error:
https://webmademovies.lighthouseapp.com/projects/65733/tickets/2895-crash-referenceerror-conduitpage-is-not-defined
http://www.youtube.com/user/conduityoursite#g/c/4B820DE13E03888D

Your code tries to refer to a variable or property that does not exist, in your case it's named chrome_fix3.
This probably came from a javascript libary that you are using, maybe jQuery or something.
I assume that the library is fine and it's caused by wrongfully calling some of it's functions.
The best way now is to install the Firebug plugin in Firefox (you could use Chrome, Opera or Internet Explorer's debugger but I like Firebug best)
Then add following code in your code where you think it's going wrong:
//add the following line only once:
var okCounter=0;
// add teh following line every couple of lines in your code:
console.log("still ok here:",okCounter++);
Open your page in Forefox and hit F12, the Firebug window should show up now. Reload the page and check out the console tab.
At some point you should notice there is no more output to the console where there should be; now you have found the part in your code where something goes wrong. If you post that part we might be able to help you out more.

What does 'unspecified error' mean in IE?

I'm getting unspecified error when reading document.namespaces in IE8.
I can't seem to reproduce the problem in a standalone page, my snippet is:
function addNamespace(key, value) {
try {
$("html").attr(key, value);
if (document.namespaces && // This throws the error
!document.namespaces[key]) {
document.namespaces.add(key, value);
}
} catch (e) {
alert("Error: " + e);
}
};
Never mind right now why I'm trying to add a namespace at runtime (it has to do with Facebook Like not working properly... see this comment - Facebook like button showing in Firefox but not showing in IE).
My question is simple - on what conditions does unspecified error occur?

Unspecified errors seem to occur when something (usually a value) isn't set or initialized correctly that the browser is attempting to use. I've seen a lot of unspecified errors from Ajax code attempting to access something (usually from the DOM) before the page has finished loading (even if the page appears to have already loaded)...
Some Googling on this error shows some people saying this is a browser issue, but through my own experience I strongly suspect it has to do with some asynchronous code not running in the order in which you think it is running.

In my opinion, this error in IE is very similar to this common one in chrome
Uncaught SyntaxError: Unexpected token <
For those ones who encounter this while using polyfills for IE.
Check your order of importing different libraries, make sure the dependency relationship is correct, also if you use requireJS, this error may be caused the error from the config file as well.