Prototype swallows javascript errors (Firefox) - javascript

Hey i'm pretty new to prototype.
The problem is that javascript errors within dom:loaded callback functions don't get displayed in firefox (webconsole/errorconsole/firebug).
Sample1:
document.observe("dom:loaded", function() {
syntax() error()
});
Sample2:
document.observe("dom:loaded", function() {
syntax(); error()
});
Now the funny thing:
If I execute Sample1 I get an javascript error "Missing ; before statement" - ofcourse there should be a semicolon before 'error()' - so this type of error seems to work. If I execute Sample2 I don't get any error (actually it's not a syntax error anymore) but I should get a "undefined variable" error which i don't get.
Any clue what's going on here?
IE prints out the error btw

what's happening is that in sample 2 when the semicolon is added the string syntax; error acts as two individual global variables, to the compiler it looks the same as window.syntax; window.error
document.observe('dom:loaded', function() {
syntax = 10; error = 5;
alert(syntax + ' ' + error);
});
Try running the above example. it will help explain the issue more clearly...

Related

Is it possible to override console logs

If I receive an error from a framework or an error from the browser. Basically a runtime error of any kind. Without modifying the framework, is it possible for me to override the console logs that these frameworks make and the browser's errors. I want to use my own framework with own error handling system when informing the user of errors of practically anything runtime (not syntax errors). I don't know if you would class it all as runtime errors because of the way javascript is executed in the browser but hopefully you will get me?
Is this possible if all the frameworks are written in Javascript?
How is this achieved?
What considerations do I have to make between different browsers?
Thanks
You are probably looking for a try-catch block:
try {
alert(foo);
} catch(e) {
alert('The code got the following error: '+e.message);
}
Whenever the code between the try {} receives an error, the catch(e) {} block will execute, with the argument e being the error object for the error that occurred. In this case, the variable foo is not defined, so executing this code will result in an alert message saying "The code got the following error: foo is not defined"
While not over-riding console.log, you may be achieve the same effect by overriding window.onerror.
From the MDN documentation
window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
// Log the error here -- perhaps using an AJAX call
}
You could try overriding the console.log() function.
//Save original reference
var originalConsole = console;
//Override
console = {};
console.log = function()
{
//According to MDN the console.log function can receive a variable number of params
for(var i=0; i<arguments.length; i++)
{
//Make your changes here, then call the original console.log function
originalConsole.log("Change something: "+arguments[i]);
}
//Or maybe do something here after parsing all the arguments
//...
}
console.log("one", "two");
JSFiddle here.
You can override the console logs by creating a "console" object and overriding it's .log() function:
var console = {};
console.log = function(){};
Some browsers require this to be added to the window object directly; so, for browser compatibility, also add:
window.console = console;
Additionally, you can override other console functions (e.g. console.info, console.warn and console.error) if you're using those too.
Also, consider reading this blog post from Udi Talias on overriding the console functions. Good and quick read!
You can custom your console.log here
// copy the original
let originalConsole = Object.assign({}, console);
// do something with your log.
console.log = (value) => {
//some cool condition
if (true) {
value = "new_log : " + value
}
originalConsole.log(value);
};

(after) jquery get script success I don't see (deliberate) errors

I don't understand why I cant see errors from my script after success (I google this and it just comes up with lots of answers about error handling for the event of success/error on jquery get script).
If I do this with 'any' js script
$.getScript('myextrascript.js',function(){console.log('got it!');});
Emphasis on 'any' js script (I've tried at least 12 different scripts by different people) because after my script had an error that just stopped the script (I got no console error) my first thought was does this happen just with my code?
say for example my extra script had a deliberately undeclared variable in it...
myextrascript.js:
console.log('I can see this in the console no problem');
var declaired='this variable is ok';
undeclaired='this will cause an error';
console.log("I now don't see this console log because my code has stopped");
I would normally see the error in the console like
undeclaired is undefined myextrascript.js:3
But I don't see errors inside my extra scripts, Not even if I put this a line before my error
window.onerror=function(e,script,line){window.console.log("Error: "+e+" ("+script+":"+ line+")");}
Don't really have anymore ideas past this, It's really puzzling.
Solved!
"use strict";
window.onerror=function(e,script,line){window.console.log("Error: "+e+" ("+script+":"+ line+")");}
undeclaired=1;
console.log('WINNING!');
I added "use strict"; and now it its working/broken (BROKEN JUST HOW I WANT!)
Error: Uncaught ReferenceError: undeclaired is not defined (myextrascript.js:12)
Uncaught ReferenceError: undeclaired is not defined

YUI3 - Errors don't appear in Firebug - Y.on('available

solution, you have to call the parameter in the responding function from the Y.on('available', myFunction, domelement'). so function myFunction(e)
Rewriting this,
If I used the following code, (game isn't defined),
function myFunction () {
console.log(game);
}
Y.on('available',myFunction,#domElement);
I don't get an error in my console for game, which isn't defined (should be a reference error).
Any idea why? Or how I can get those errors to show in the console?

How can I override/extend ReferenceError in Chrome's JavaScript?

To make debugging easier, I'm capturing all of the console logs in Chrome so that users who submit a feedback entry will also submit all of the logs to our server. When someone encounters a problem in production, I can first and foremost get them back to work so that I can then sit down and more thoroughly go through all of the logs to determine the root cause of whatever issue the user encountered in production.
The technique I use to capture the logs involves overriding console.log so that all text entered in the first argument gets stored in an array while simultaneously invoking the legacy function so that I can still see the logs in the console too.
The problem is when there's the occasional uncaught exception. These aren't included in the uploaded logs, so it's not always clear what caused the problem. So I tried overriding ReferenceError by writing a JavaScript function that takes a function as an argument, then returns a new function that does stuff with it, like storing data in a variable, and then invoking the legacy function as the last step:
function overrideException(legacyFn) {
/** arguments for original fn **/
return function() {
var args = [];
args[0] = arguments[0];
// pass in as arguments to original function and store result to
// prove we overrode the ReferenceError
output = ">> " + legacyFn.apply(this, args).stack;
return legacyFn.apply(this, arguments);
}
}
To test the overrideException function, I ran the following code on the console:
ReferenceError = overrideException(ReferenceError);
Afterwards, I tested the returned function, the new ReferenceError, by manually throwing a ReferenceError:
throw new ReferenceError("YES!! IT WORKS! HAHAHA!");
The resulting output on the console is:
ReferenceError: YES!! IT WORKS! HAHAHA!
And checking the global variable output from the overrideException function shows that it did indeed run:
output
">> ReferenceError: YES!! IT WORKS! HAHAHA!
at ReferenceError (<anonymous>)
at new <anonymous> (<anonymous>:18:35)
at <anonymous>:2:7
at Object.InjectedScript._evaluateOn (<anonymous>:562:39)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:521:52)
at Object.InjectedScript.evaluate (<anonymous>:440:21)"
Now, here's where things start to fall apart. In our code, we're not going to know when an uncaught exception occurs, so I tested it by attempting to run a function that doesn't exist:
ttt();
Which results in:
ReferenceError: ttt is not defined
However, unlike the case where we explicitly throw an error, in this case, the function doesn't fire, and we're left with only the legacy functionality. The contents of the variable output is the same as in the first test.
So the question seems to be this: How do we override the ReferenceError functionality that the JavaScript engine uses to throw errors so that it's the same one we use when we throw a ReferenceError?
Keep in mind that my problem is limited only to Chrome at this time; I'm building a Chrome Packaged app.
I have done quite a bit of research for the same reason: I wanted to log errors and report them.
"Overriding" a native type (whether ReferenceError, String, or Array) is not possible.
Chrome binds these before any Javascript is run, so redefining window.ReferenceError has no effect.
You can extend ReferenceError with something like ReferenceError.prototype.extension = function() { return 0; }, or even override toString (for consistency, try it on the page, not the Dev Tools).
That doesn't help you much.
But not to worry....
(1) Use window.onerror to get file name, 1-indexed line number, and 0-indexed position of uncaught errors, as well as the error itself.
var errorData = [];
onerror = function(message, file, line, position, error) {
errorData.push({message:message, file:file, line:line, position:position, error:error});
};
See the fiddle for an example. Since the OP was Chrome-specific, this has only been tested to work in Chrome.
(2) Because of improvements to (1), this is no longer necessary, but I leave this second technique here for completeness, and since onerror is not guaranteed to work for all errors on all browsers. You will also sometimes see the following:
var errors = [];
function protectedFunction(f) {
return function() {
try {
f.apply(this, arguments);
} catch(e) {
errors.push(e);
throw e;
}
};
}
setTimeout = protectedFunction(setTimeout);
setInterval = protectedFunction(setInterval);
etc...
FYI, all this is very similar to what has been done in the Google Closure Compiler library, in goog.debug, created during Gmail development with the intent of doing exactly this. Of particular interest is goog.debug.ErrorHandler and goog.debug.ErrorReporter.

FullCalendar event on mouseover gives jQuery error

In under the Week-view, on event mouseOver I receive this error message in firebug:
Error: Syntax error, unrecognized expression: ,
throw new Error( "Syntax error, unrecognized expression: " + msg );
jquery-1.8.3.js (line 4680)
has anyone encountered such a problem, or is there a way to debug to origins of the error?
Thanks in advance
Sincerely
It looks like a selector bug:
$("abc, def, "); // or
$("<div,");
Is not sure.
If you look in the source code for jQuery 1.8.3 you will find these lines around line 4680:
/*LINE: 4679*/ Sizzle.error = function( msg ) {
/*LINE: 4680*/ throw new Error( "Syntax error, unrecognized expression: " + msg );
/*LINE: 4681*/ };
It's hard to debug your code from here but you could try to put arguments.callee.caller right before throw new Error:
Sizzle.error = function( msg ) {
console.log( arguments.callee.caller );
throw new Error( "Syntax error, unrecognized expression: " + msg );
};
That will tell you what function is calling this function. From there you can try to travel up using the same method. At the end you will find your problem.
What is arguments.callee.caller?
arguments is an array like property containing all the arguments parsed to a function:
function a() {}
a(1, 2, 3); // Inside a arguments will be: [1, 2, 3]
arguments have a property called callee this property contains a reference to the function called eg. it self:
function a() {} // arguments.callee === a.
arguments.callee have a non standard (but standard, just not described in ECMA) property called caller this property contains a reference to the function who is calling it on runtime.
function a() {
b()
}
function b() {}; // arguments.callee.caller === a;
a();
And some docs:
arguments
arguments.callee
Function.caller
Do you know about the console-object?
The problem was solved by going away from jQuery-Mobile and back to jQuery-UI only.
FullCalendar doesn't work properly under jQuery-Mobile.
The problem was caused by jQuery-Mobile. FullCalendar could not function properly in jQuery-Mobile environment. After going back to jQuery-UI everything worked fine again.
Thanks for your effort to help

Categories