Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Logging of Javascript error on the Frontend to the Backend
/* ==========================================================
*
* Log on a remote server most of the errors in the browser
*
* @author Chris Cinelli
*
* Depends on:
* stacktrace.js - https://github.com/eriwen/javascript-stacktrace
* jsonStringify.js - http://www.thomasfrank.se/json_stringify_revisited.html
*
* ========================================================== */
(function( $ ){
var isLogOn = true;
//Compact version of Json in Errors logs
JSONstring.compactOutput = true;
function myStringify(a)
{
try {
//Try the more sophisticated JSONstring that support cyclical reference
//It has unfortunately some probles sometimes: ""Illegal operation on WrappedNative prototype object" see http://stackoverflow.com/questions/965968/serialize-internal-javascript-objects-like-range
return JSONstring.make(a);
} catch (err) {
//But if it does not work default to the browser JSON.stringify
try {
return JSON.stringify(a);
} catch (err) {
console.log("myStringify error serializing:")
console.log(a);
return "ERROR: CC.myStringify";
}
}
}
//URL of the action that log remotely
var loggingUrl = "/utility/rlog";
//Functions that are going to be accessible using CC.NameOfTheFunction
var pub = {
/*
* Remote logging
* Use CC.rlog (message), CC.rlog (type, message) or CC.rlog (type, message, notify)
* Please prefer the format with "type".
* "type" is a word that help to identify where the log is cominig from.
* "notify": if true, send also an email to developers
* @author: Chris Cinelli
*/
rlog: function(atype, amessage, notify){
if (amessage === undefined)
{ //Only 1 paramer: it is the message
amessage = atype;
atype = "Generic";
}
var param = {type: atype, message: amessage};
if(notify) param.notify = true;
$.ajax({
type: 'post',
dataType: 'text', //Just we do not want it to fail for errors server side
global: false,
url: loggingUrl,
data: param,
success: function(d) {
//Do we want to do anything? I do not think so
},
error: function(d){
//Same here
},
complete:function(d){
//Same here
}
});
},
//Enable or disable the remote logging
setRemoteLogging: function (_state){
isLogOn = !!_state;
},
stringfy: myStringify
}
window.CC = pub;
/*Let's log the jQuery ajax errors on the servers
*
* @author: Chris Cinelli
*/
$(document).ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
if (!isLogOn) return;
if(loggingUrl != ajaxSettings.url )
{
pub.rlog("ERROR", "AJAXERROR"+
"|status:"+(jqXHR ? jqXHR.status : "NONE")+
"|error:"+myStringify(thrownError)+
"|event:"+ myStringify(event)+
"|ajaxParam:"+ myStringify(ajaxSettings)+
"|message:"+(jqXHR ? jqXHR.responseText : "NONE"));
}
});
/*Let's log Javascript errors on the server
*
* @author: Chris Cinelli
*/
function JSError(msg, url, l){
if (!isLogOn) return;
try
{
var trace = printStackTrace(); //Get the stack trace using stacktrace.js
pub.rlog("ERROR", "JSERROR:[url:"+url+"|line:"+l+"|message:"+msg+"|trace:"+trace.join(' -> ')+"]", true);
} catch(err) {
try {
pub.rlog("ERROR", "AJAXERROR-EXCEPTION:"+ myStringify(err), true);
}catch(err){
pub.rlog("ERROR", "AJAXERROR-EXCEPTION-NEED-DEBUGGING2", true);
console.dir(err);
}
}
}
//Defining a global variable BEFORE including this file noErrorHandler
if (typeof noErrorHandler === 'undefined'){
window.onerror = JSError;
window.error = JSError;
}
})( window.jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.