PDA

View Full Version : How to implement Basic Debugging and ErrorHandling Functions in an App?



Dumas
7 Oct 2009, 6:27 PM
Hey Guys!
I want to implement some basic debugging functions, something like this (the code is a untested idea):


App.config = function () {
// private vars
this.debug = 1;
//...
return {
getDebug : function () { return this.debug; }
};
};
Ext.OnReady(function() {


if(App.config.getDebug===1) {
if(window.logger) {
alert('There already exists a logger object');
} else {
var logger = {};
}
if(window.logger.log) {
alert('There already exists an log function, it will be overwritten!');
}

/**
* Logging function for debugging mode, uses firebug
*
* @param message the debug message
* @param level the degugging level, can be 'info', 'debug', 'error' or 'trace'
* @return
*/
window.logger.log = function (message,level) {
if(level === undefined) { level = 'debug'; } // debug is the default
// does Firebug or Ext Debug Console exist?
if((window && window.console && window.console.firebug) || (window && window.console && Ext)){
// write message to the console or alert (depending on the error level)
switch(level) {
case 'info' : window.console.info(message); break;
case 'debug' : window.console.debug(message); break;
case 'error' : window.console.error(message); window.console.trace(); break;
case 'trace' : window.console.trace();
}
}
};
} else {
// don't display debugging infos
window.logger.log= function () {
// maybe an ajax request here to log all errors to the server
};
}

// create some shorter commands
window.logger.info = function (message) {
window.logger.log(message,'info');
};
window.logger.debug = function (message) {
window.logger.log(message,'debug');
};
window.logger.error = function (message) {
window.logger.log(message,'error');
};
window.logger.trace = function (message) {
window.logger.log(message,'trace');
};

// global error handling
window.onerror = function(message, url, link) {
if(App.config.getDebug===1) {
if(!window.console.firebug && (!Ext || !window.console)){
// there is no firebug and no Ext Debug Console, so alert for problems
alert('Following error occured: '+message+'; '+url+'; '+link);
}
return false; // show error
} else {
if(Ext && Ext.Msg && Ext.Msg.alert) {
Ext.Msg.alert('Unknown Error', 'An unknown error happend. <br />Please check your internet connection. <br />If this error happens again, please contact us!');
} else {
alert('An unknown error happend. \nPlease check your internet connection. \nIf this error happens again, please contact us!');
}
// maybe an ajax request here to log all errors to the server
return true; // hide error from browser
}
};
}); // eo onReady

// example usage
var obj1 = {
doSomething : function () {
// ...
if(error) {
logger.log(error.message, 'error');
}
}
};
obj1.doSomething();What do you think about the code?
What would you add/delete/change for a basic debugging function? What for an advanced?

thx
Dumas

Dumas
9 Oct 2009, 2:52 AM
anyone?

Condor
9 Oct 2009, 3:51 AM
Did you know that Ext has a Debugging Console (http://www.extjs.com/deploy/dev/examples/debug/debug-console.html)?

Wouldn't that be better suited than using alert and/or Ext.Msg.alert?

mschwartz
9 Oct 2009, 6:26 AM
Did you know that Ext has a Debugging Console (http://www.extjs.com/deploy/dev/examples/debug/debug-console.html)?

Wouldn't that be better suited than using alert and/or Ext.Msg.alert?

The debugging console is pretty slick, but seems like it could be improved with only a little bit of work.

The object inspector shows [object object] and doesn't let you inspect that object.

It'd be nice if the HTML inspector would highlight (like firebug) the part of the dom when you click on one of the nodes.

The Debug console would be really awesome if you could set breakpoints and then interactively call functions in your program.

Obviously no Javascripts support. This one is probably a lot harder. Like, it'd be nice to have some of the firebug capabilities for viewing the scripts in a page, setting breakpoints, tooltips to examine variables, etc.

Condor
9 Oct 2009, 6:31 AM
Feel free to contribute (I don't think the solution is as simple as you propose).

mschwartz
9 Oct 2009, 6:43 AM
Feel free to contribute (I don't think the solution is as simple as you propose).

The only non simple suggestion is the Javascript debugging and breakpoints... That might have to be done in chrome context.

Dumas
9 Oct 2009, 7:09 AM
I already discovered the Ext Debugging Console today while researching for my debugging code above and augmented my code.

The Ext.Msg.alert is ONLY for production mode ;-)

The idea on my code is something complettly different from the Ext Debugger Console.
Here's the things that my code does which is not provided by the Ext Core:
1) define a debug and a production mode, logger.log will be supressed by the production mode
2) Supress errors from the user in production mode (as far as possible). Only tell him that something broke in plain english. Also write the errors to a serverside log.


PS: This code should also work e.g. when I'm using jQuery, but the main goal is for ExtJS.