Stop suppressing JavaScript errors - javascript

I'm using Firebug to view JavaScript errors. But I'm also using jQuery. For some reason, I never see JavaScript errors when using jQuery and this is one of the biggest problems with working with jQuery in the first place.
There's no particular code to show, just imagine alert(areareg); where areareg is undefined or any sort of JavaScript error, and Firebug won't tell me about it. The JavaScript will simply fail without warning or notification of any sort. This is always the case, in any project where I've used jQuery and it's the only reason I don't like jQuery; because it's notoriously difficult to debug when something goes wrong.
For some reason I've even had trouble finding this question raised online, let alone answered. But I figured I'd give it a try here:
Is there any way to make jQuery stop suppressing error messages?
Am I the only one in the world who has always had this problem with jQuery?
EDIT:
I use both Firefox (with Firebug) and Chrome, and I only use the non-minified version of jQuery. Still, I have never in my entire life seen a jQuery error message of any kind, neither useful nor useless, nor in fact normal JavaScript errors, when using jQuery.

Well, despite your impression, jQuery itself doesn't do anything to "suppress" error messages. Now, Firefox does tend to throw away certain kinds of exceptions, notably like what you describe. I often find that wrapping a whole Javascript block in a try ... catch with an alert call should an exception happen is a useful way to deal with it, but it's still irritating.

I use google Chrome for my debugging, and it's pretty good, it shows all the jquery errors as well (as Alfred said, if you use minified version, you wont get any meaningful name in your errors, so it's better to use the raw source)

I am having the same problem in FF 18. I am using JSF and JQuery, though it happens even for plain JS code on the page. I intentionally put javascript code that should throw a syntax error without a word in Firebug. FF 18 has its own built-in console that looks similar to firebug. When I disabled the firebug plug-in the console.log messages started showing up. However, the errors are still not showing up. I just tried Chrome and the errors do appear there.

I've run into this problem several times. It's quite inconsistent and hard to replicate, sometimes it seems related to version issues. Settings rarely seem to make a difference, though "Break on next" sometimes (not always) identifies errors that otherwise slip through.
One thing I've noticed is, it tends to happen for code that is triggered inside a callback function, e.g. from a UI event or from an AJAX call. Sometimes Firefox / Firebug will behave like other browsers and show errors in the console, sometimes it gives nothing at all even for incredibly clear-cut cases like:
console.log('something'); // Shows up in console fine
fail // Other browsers give undefined variable error, Firefox gives nothing
console.log('something else'); // Never reached, so silent error clearly happens
The best approach I've found to this is:
Once you've found a no-show error, work back using console.trace() until you reach a point where inside a function, the error is hidden, outside, it shows, adding some code snippet like:
console.trace();
fail // cause the error, look out for a trace followed by nothing
If it's an AJAX call, manually add a basic error handler, because for some reason Firefox/Firebug is losing the default:
$.ajax({
error: function(a,b,c){
throw c;
},
other: '...settings'
}
If it's something you can't add an error handling function to, wrap it in a try... catch, for example:
try {
// whatever the code is within which there are no errors
} catch( err ){
throw err;
}
This should be enough to catch all errors where-ever they are within the scope where Firefox is losing them. Beware of cases where you have a callback within a callback though, you might need to do this twice...

Related

Uncaught TypeError without ability to find the reason

Every time I right-click anywhere in my Application, jQuery is going to throw an error at line 5095 saying:
Uncaught TypeError: undefined is not a function
To find the cause of this error I tried two ways without success:
1. Debug jQuery:
In the Dev-Tool's I debug jQuery at Line 5095. The Problem: When I move the cursor over the page, it will stop and break. I have NO possibility to get it to make a right click. Even if I press play in Chrome's Debug-Line which appears, it will instantly fire again, even if I won't move the cursor!
2. Searching the reason in my code:
Since this Error is thrown for a long time now I cannot tell where to search. I have multiple js-files. So I realized the error is being thrown when I release the mouse-button. So I searched ALL my code for ANY mouse(-up/down)-events without success (found several that wont fire if I set breakpoints)
Now I am out of ideas how to find the source of it. I thought debugging the line of jQuery where the error is thrown would give me access to the stack variables with possibly more information about its source. Any suggestions?
Please don't ask me to post code. Since I can't tell where the mistakes happen I might post thousands of lines of JavaScript. I need a logical way to find the Errorsource.
the error definitely isn't in jquery or jquery-ui files. it's most definitely in a plugin's code or your custom code.
think of where the error might be. just do a basic estimation. and put a console.log() before those lines and run it again. see if the error occurs before the console output. if it happens before, investigate the code that executes before this line and the javascript files that are included before this file. if it happens after do the opposite. You can narrow down by putting multiple console.log()s
you can look at events with
$._data(element, "events")
but you cant see where the bind is in your code
maybe someone knows

Illegal access Javascript error in Chrome

I have sporadically been getting an "illegal access" exception in Chrome (29 and 30). Others have also seen this. It seems to happen on one specific line:
Here, this is an object I defined. It has a property end which is null or a number.
Does anyone know of anything that could cause an error with that message in Chrome?
EDIT: I don't expect anyone to debug ten thousands of lines of my code. What could cause an error with that message, whether it be jumping off the moon, singing blues, etc?
There are no occurrences of "illegal" in all of the Javascript code on the page.
This error has not happened in later versions of Chrome (31+).
Hopefully this is gone for good.
According to https://github.com/highcharts/highcharts/issues/2443, this would help:
try {
delete ret['e'];
} catch (e) {} // do nothing
We can't be sure, but depending on your network speed, hardware, your DOM wasn't totally and perfectly loaded.
You was probaby using recursion, many of them, with some hard javascript computation on each.
What happened is all tags and scripts of the DOM was already loaded and parsed, so the script started anyway. But content data not fully.
The javascript addEventListener(DOMContentLoaded", ) is more watching tags and their good closures to start his job, instead of the real full data load.
This behavior is possible on other browsers.
While your script was for sure too loud on his time, the javascript engine on all browsers had evolved enough to handle it smoothly, mostly on the memory part which was clearly the funnel.

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.

Javascript not reporting errors

So, I'm writing an application that has ~5k lines of javascript... and it's stopped reporting errors. No firebug, IE triangle thing, nothing. It just won't work if there's an error. Anyone seen anything like this before? Debugging is somewhat... frustrating...
My best guess is too many layers of abstraction? But there aren't really that many.
Something else is wrong. It's not simply the size of your javascript. I'm running 70,000 lines of JavaScript in Chrome's debugger and FireFox 6's firebug and there are no debugging problems.
Look elsewhere. Is something not getting loaded? Do you need to clear cache and refresh? Try another browser (like Chrome) and see the results.
If it stopped reporting errors, its more likely those errors do not exist in your current revision, or that a block of code that you think is executing is actually never run. Set a breakpoint.
99% your script is not executing at all. You need manual trace, either with breakpoints, console.logs or alerts.
1% is that you have error handlers, who silence them. Look for suspicious try { .. } catch () {} and window.onerror.

'Invalid Argument' Error in IE, in a line number that doesn't exist

I'm getting the following error in IE 6:
Line: 454
Char: 13
Error: Invalid Argument
Code: 0
URL: xxxxx/Iframe1.aspx
and I can't for the life of me find what's causing this.
This only happens in a situation where I have a main page that has several IFrames, and it only happens when I have one particular IFrame (the one pointed to by the URL in the error message), and that IFrame is invisible at the time of loading.
I've narrowed it up to there, but I still can't find anything more specific...
The IFrame in question doesn't have 454 lines in its HTML, nor do any of the JS files referred by it.
I tried attaching VS to iexplore.exe as a debugger, and it breaks when the error occurs, but then tells me "There is no source code available for the current location"...
Any suggestions on how I can go about chasing this one?
UPDATE: I found this problem through brute-force, basically, commenting everything out and uncommenting randomly...
But the question still stands: what is the rational way to find where the error is, when IE reports the wrong line number / file?
IE's Javascript engine is disgusting when it comes to debugging. You can try enabling script debugging in the Advanced Options, and then if you have Visual Studio installed it will jump to the place of error... if you're lucky. Other times you don't get anything, especially if the code was eval()'ed.
Another thing about these line numbers is that it doesn't reflect which file the error is happening in. I've had cases where the line number was actually correct, but it was in a linked .js file, not the main file.
Try using the Microsoft Script Debugger or DebugBar (http://www.debugbar.com) which may give you some better IE6 debugging tools. They always help me with IE6.
Also, does this happen in any newer versions of IE or just in IE6?
It's virtually impossible to debug this without a live example, but one thing that often causes an "Invalid Argument" error in Internet Explorer is trying to set an incorrect value for a style property.
So something like:
document.getElementById("foo").style.borderWidth = bar + "px";
when "bar" has the value null, or undefined, or is the string "grandma", will cause it, as "grandmapx" isn't a valid value for the borderWidth style property.
IE9 has a browser mode.
Open up Developer Tools, then select the version you want to emulate in the console, reload the page with errors, and the console will show you line numbers and the correct file where the error is.
I run into this problem a lot too, and I've also resorted to commenting everything out until I find the problem. One thing that I find to be useful is to add a try/catch block to every javascript method. Sometimes I add an alert to tell what method the error came from. Still tedious, but easier than trial and error commenting. And if you add them every time you write a new method it saves a lot of time in the event errors like those occur.
function TestMethod()
{
try
{
//whatever
}
catch (ex)
{
ShowError(ex.description);
//alert("TestMethod");
}
}
A note to other readers: I recently had this "Invalid argument." error reported in IE7-9 and eventually found that it was down to the way I was using setTimeout/setInterval.
This is wrong, in IE:
var Thing = {};
Thing.myFunc = function() { ... };
setTimeout(Thing.myFunc, 1000);
Instead, wrap the callback in an anonymous function like so:
var Thing = {};
Thing.myFunc = function() { ... };
setTimeout(function() { Thing.myFunc(); }, 1000);
and no more "invalid argument" errors.
Another possibility:
I do a lot of dev between two computers, at home and at work, so I often email myself or download pages from the server to work on. Recently I realised that Vista has a habit of unilaterally applying blocks to certain files when they are downloaded in certain ways, without notifying me that it is doing this.
The result is that, for example, an HTML page wants to access the .js file in its header, but it doesn't have permission to access local files. In this case, it doesn't matter what you write in the .js file, the browser will never even read it, and an irksome Line: 0 error will result.
So before you comb your code for an error, check your HTML page's properties, and see if it hasn't been blocked by the OS....
Like NickFitz pointed out, styling was an issue with my code.
document.getElementById('sums<%= event.id %>').style.border='1px solid #3b3b3b;'
I removed the border style and my IE issues were gone.

Categories

Resources