As I have been struggling with JS errors on the client side, I worked
on receiving errors. Without this, it is very hard to understand what
is going on on the client side.
First, I only sent the info from the console console. But I realized
lately that I did not receive JS errors and the it was actually
possible to get them too.
The trick is to use the window.onerror event. However, an APE program
works on two levels, the main page and the APE iframe. So we need to
define a function for the event in both cases.
So here is my solution to logging all JS errors on the client side and
sending to the developer.
1) FIRST PART : some js code to put early in the page.
////////////////////////////////////
// JS error management
//////////////////////////////////
g_js_error_count=0;
// what is a window (it will be either the main window or the
iframe.contentWindow of the APE iframe)
// window_name is the name of this window for having a reference in
the database of logs
function manage_js_errors(what, window_name)
{
what.onerror = function(errorMessage, url, line) {
g_js_error_count++;
var loggerUrl = "log_javascript_errors.php";
var parameters = "?description=" + escape(errorMessage)
+ "&url=" + escape(url)
+ "&line=" + escape(line)
+ "&match_id=" + m_id
+ "&game_id=" + g_id
+ "&window=" + window_name
var log_string="";
log_string+="JS ERROR JS ERROR ERROR ERROR ERROR ERROR ERROR
ERROR ERROR ERROR"+"\n";
log_string+="description: "+errorMessage+"\n";
log_string+="url: "+url+"\n";
log_string+="line: "+line+"\n";
log_string+="window_name: "+window_name+"\n";
// This logs my own variable for later use in get_log()
if (g_use_debug_log)
{
g_debug_log=g_debug_log+log_string+"\n";
}
// This logs the error into the console (optional)
if(typeof window.console != 'undefined'
&& typeof window.console.log != 'undefined')
{
console.log(log_string);
}
if (g_js_error_count<=4) // Prevents sending too many js
errors
{
These two line codes are more or less redundant. That's
for historical reason. You can merge the two if you like.
/** Send only the JS error to server */
new Image().src = loggerUrl + parameters;
// Send console log to the server (with JS error that
has just been added)
get_log("JS ERROR");
}
};
}
This calls the previous function immediately so that JS error logs are
stored immediately for the main window
manage_js_errors(window, "Main window");
//$("test_error").innerHTML // Uncomment this to generate an error on
the main page.
2) SECOND PART: activate the error management function for the APE
iframe.
I use Mootools to load APE. Here is how I modified the load function.
Beware! There is a trick for IE9 (that does not behave like others):
The problem with IE9 is that iframe.windowContent is not accessible
until APE is fully loaded (and we are out of the load function).
Fortunately, it is loaded when the "load" event is triggered. Our
solution is to call
In load:function()
g_iframe_errors_ok=true;
try
{
manage_js_errors(iframe.contentWindow, "APE iframe");
// This will fail in IE9. In this case, we will do it
later (see below)
// When it will be accepted.
// Strangely enough, we cannot do it yet at the end of
this function
// It has to be done after the event load is fired
}
catch(err)
{
g_iframe_errors_ok=false;
}
iframe.addEvent('load', function()
{
// Beware! This will generate an error if
config.frequency is bigger than ths biggest frequency in the hosts
file
// (if we use a hosts file of course, which is what I
do on Windows rather than a DNS service, the proper solution).
if (!iframe.contentWindow.APE)
{
// I have not tested this, this is the normal code
of APE, not modified.
setTimeout(iframe.onload, 100);//Sometimes IE fire
the onload event, but the iframe is not loaded -_-
}
else
{
//setTimeout("tt",5000); // To try and generate an
error on the APE iframe, uncomment this line :)
// if the manager_js_errors function could not be
called earlier, we do it now:
if (g_iframe_errors_ok==false)
manage_js_errors(iframe.contentWindow, "APE iframe");
iframe.contentWindow.APE.init(config);
}
});
3) THIRD PART: a get_log() function
the get_log() function called in manage_js_errors() is below. It uses
Ajax and a form but obviously, the image.src solution seen above
should work too.
g_debug_log contains my complete "normal" logs. I populate it while
the program executes. manage_js_errors() has also added the
function get_log(cas)
{
$("input_debug_cas").value=cas;
var currentTime=new Date();
var month = currentTime.getMonth()+1;
var day = currentTime.getDate();
var hour = currentTime.getHours();
var minute = currentTime.getMinutes();
var second = currentTime.getSeconds();
if (second<10) second="0"+second;
if (minute<10) minute="0"+minute;
cas=day +"/"+month +" " + hour+":"+minute+":"+second+ " " + cas
+"\n";
$("input_debug_log").value=g_debug_log+" --- "+ cas;
var myHTMLRequest = new Request.HTML( {
url: "send_full_logs.php",
update: $("debug_log_res"),
onComplete: function( response )
{
$("input_debug_log").value=g_debug_log;
}
}).post($("form_debug_log"));
}
4) FOURTH PART: building the PHP files
Of course, you need to write the PHP file(s) that will actually logs
the info into a database (or send an email). I let you do that.
- log_javascript_errors.php
OR/AND
- send_full_logs.php
I hope that this is ok. Enjoy this code!
--
You received this message because you are subscribed to the Google
Groups "APE Project" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/ape-project?hl=en
---
APE Project (Ajax Push Engine)
Official website : http://www.ape-project.org/
Git Hub : http://github.com/APE-Project/
