We Keep Coding

Debugging JavaScript in client

I'm facing an issue while debugging my application. Following is the architecture:
Server: Java (Servlet)
Client: React+D3
Problem: Whenever, I change some react or d3 code and if an error occurs then it just shows me that some react (or d3) error has occurred but never tells me which function the error occurred (as seen in snapshot). Now, I know that simply debugging it by having the information like variable name and searching where I defined that variable. However, situation becomes tough when I use same object multiple times (say window) and had made several changes in the code. In this case, a specific line number where the error occured can be handy and quick. Let me know if I'm missing some basics about debugging such applications?
EDIT1:
1. In the snapshot, http://localhost:8080/..../Server Server is the main servlet application, kind of launchpad, which triggers several other react-based js files.
2. The mentioned ReferenceError is inside a function updateWindow() but the console never mentions this (and that's my problem).
PS: I'm using Eclipse tomcat on server-side

I think there's no straight forward solution to this problem. So, I'll post the method that worked for me with few additional points:
Problem: It doesn't gives a nice error trace like standard Java application, probably because it mixes with JavaScript code.
At every line of the error trace, line:column specifies the error line. I used this as a reference and started manual debugging from where my application launches i.e. Server.java and look where I defined the createChart() in the JS file and drill-down until I found the referenced variable.
In case of ReactJS' error (an error after resolving reference issue), I debugged it with normal react.js (not minified version react.min.js) so that it shows me exact line of error. Minified version is cluttered and is useless while debugging.
PS: If someone has better answer I'll edit this in future.

Multiple Different Javascript Errors Can't Duplicate

I am using a window.onerror=function(msg, url, linenumber) to send myself an email when a javascript error occurs. When I use my webpages (IE, FF, CHRM, ect) I do not receive any errors. However I am getting all kinds of errors emailed to me from other users that I cannot duplicate. I am probably getting an error happening on 1% of the users visiting the website so 1/100 page loads I get an error. Here are some:
Syntax error: http://www.google-analytics.com/ga.js
Error loading script: http://www.google-analytics.com/ga.js
Error loading script: https://seal.thawte.com/getthawteseal?host_name=XXX&size=M&lang=en
$("input.datepicker").datepicker is not a function
Uncaught SyntaxError: Unexpected token
Object doesn't support this property or method
Uncaught TypeError: Object [object Object] has no method 'dialog'
Syntax error: http://seal-cencal.bbb.org/logo/XXX
Error: Permission denied to access property 'toString'
What I don't understand is the website 99% of the time is running without any errors and I can't seem to get an error to happen for me on any browser I use. I am also tracking what browsers the users are using who send these errors and it's random, all sorts of browsers and they are all newer FF, IE versions mainly.
How do you stop syntax errors on external code (but they work most of the time)...?
How come google and thawte scripts fail to load some people so often but never happens to me, is there a way to have a fallback to this?
The datepicker one, I can only assume its error out because jquery UI failed to load because jquery loads (otherwise it wouldn't get called inside a document ready call) but I even have a localhost jquery UI script fallback include and it still happens..
Does anyone have a suggestion for me to help me further debug/fix these problems. The thing is, the website gets a lot of hits I am getting about 1 error emailed to me every minute (and it's not the same user causing each error). If you have any suggestions let me know (remember the code and website work fine 99% of the time so I don't think its a syntax problem on my end anywhere).
Thanks for your time.

How do you stop syntax errors on external code (but they work most of the time)...?
You can't really. Without a more detailed message investigation is quite impossible. Notice that sysntax errors might be caused by something else as well, their origin might not be in the external script. I doubt Google Analyticts serves invalid scripts.
How come google and thawte scripts fail to load some people so often but never happens to me
They might use adblockers or similiar against those. Not everyone wants his web usage logged by google. Also, some proxies might ignore/block them, like intranet firewalls.
is there a way to have a fallback to this?
You could try serving them from your own domain as a proxy. Or just ignore them, I don't think your app really needs a fallback for those.
The datepicker one, I can only assume its error out because jquery UI failed to load as jquery still loads
Yes, that sounds likely. Or it just didn't load before it was called.
but I even have a localhost jquery UI script fallback include and it still happens..
Localhost? I guess you mean a copy on your server. Still, it depends on the details how the script and its fallback version are loaded.
Does anyone have a suggestion for me to help me further debug/fix these problems.
A stack trace would help a lot to locate the user's action that caused the error.

Most of the errors on the list are caused by errors in browser extensions.
If you really want to log JavaScript errors, it is best you also log the stack trace if available. I also log details about functions that execute and the arguments sent to it. When the error is caught I cut X amount of stuff from the stack I built and send that up as well.

Getting data from the browser's console using javascript

I don't know if this has been asked before, but what i'd like to be able to do is get data from the error console within the browser itself(if it supports it) this would be for when a user sends off a bug report it'd pull up any errors related to pages at my website for things such as typos in code and other things that somehow managed to slip by. Also, in that regard is there a way to pass the errors from the console to a useable format? If this isn't possible, then i could just tell them to copy and paste what came up from the site itself.
I thought of this right now as i was thinking about how to make the bug reporting system run better since the entire thing is basically ran within the browser and for the backend I can easily just look at error logs but for the frontend ie javascript bits of things it's not goign to be as easy.
So to finish wrap all of this up in one little statement, is there an easy way to get the data from the error console and be able to send it along via javascript ie to a form, or something similar.

You can use the onerror event in JS to get the details of the error. Hoptoad do this for example and log the errors to their console, Their code re-uses lots of nice JS scripts including a printStackTrace function that is great.....
You can see how they do it here:
http://hoptoadapp.com/javascripts/notifier.js

Ajax problem using MooTools/jQuery - p.onStatusChange is not a function

I get the following error in firebug in Firefox 3 with both MooTools and jQuery:
"p.onStatusChange is not a function".
I've noticed this error frequently in firebug since one of the latest updates of FF3. However, it has started appearing with code that hasn't been changed in some time and that was not reporting errors previously. The errors happens when ajax results are returned. It shows up in different applications that use separate javascript libraries, MooTools and jQuery.
Does anyone have any idea why these errors are appearing? My intuition tells me that it is something in Firefox that changed, but I can't find any information online currently. The ajax calls still work fine, but I am wary of just going with my intuition and leaving script errors in my code.
Thanks,
Jason

I get it in tabBrowser instead:
chrome://browser/content/tabbrowser.xml
(4) errors occur:
p.onStatusChange
p.onProgressChange
p.onStateChange
p.onSecurityChange
What I found was that the add-on "PDF Download" was causing these errors. The best way for me to check was to go to a page that produced the errors, turn off all the add-ons, and turn them on one-by-one (starting with Firebug). Instead of going one-by-one, I actually turned them on in lots of 3 to help identify the problem sooner.

Here is the reference for the function NsIDownloadProgressListener. It looks like it has been deprecated.

on a javascript error, how to identify method or js file with the problem?

When a javascript error occures in IE (or in other browsers) you get a popup saying that javascript error has occurred - usually this comes with a line number and some hint.
Sometimes it comes with line 0 and with no way of knowing what the problem is.
Javscript can come from HTML itself, from a js file or from JSP (and more).
Microsoft has a script debugger that helps a lot in finding where js errors are, however sometimes when a js error occurs the script debugger cannot find the code portion and thus its difficult of finding where is the root cause of the problem.
My question is whether anyone knows any way of making script debugger find the code any way (mostly happen with js code that is in JSP file), or at least include in the IE popup the method or js file where the error has occurred. (it only display the line number, and many times its line 0...).
Thanks,
Tal.

The error object which is created when an error is thrown by JavaScript is very unreliable when it comes to the source line, especially within IE. Browsers like Firefox and Safari are better at line numbers, but they are generally pointless due to minification of the files.
What is obviously of more use is getting the call stack, but due to the anonymous nature of JavaScript functions (well, that they can be anonymous) a call stack can often be hard to work out.
If you're doing a try/ catch you can do arguments.callee which will return you the method which called the current method which failed.
Here's a good example of doing a complete stack in JavaScript - http://eriwen.com/javascript/js-stack-trace/

Also developer tools included with Internet Explorer 8 is something good to trace and debug your javascript code

There is a version of Firebug called Firebug Lite that will work with Internet Explorer. It's performance is going to be based on how complex your pages are; however, for relatively lightweight pages, it should provide some insight.
I recommend this tool rather than simply using Firebug and Firefox because not all errors that occur in Internet Explorer will occur in Firefox, and so performing any debugging in that browser may not yield any results.

Firebug on Firefox is usually considered one of the best debugging tools.
On Firefox, go to
http://getfirebug.com
to get it.

This will print you a stack trace:
function Stack()
{
try
{
throw Error()
}
catch(ex)
{
return ex.stack
}
};
print( Stack() );

If all else fails (and when dealing with IE it sometimes does) you can always walk through your code with alerts. It's crude and tedious, but sometimes it's all you can do:
Simply:
var count = 0;
then sprinkle some:
alert(count++);
at strategic lines along your code and note where it stops alerting.
Lather rinse repeat until you have your line.

If using Firefox you can press Ctrl + Shift + J to bring up the JavaScript error console that is built into Firefox, which will tell you exactly what went wrong.