Results 1 to 7 of 7

Thread: How to implement Basic Debugging and ErrorHandling Functions in an App?

  1. #1
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589

    Default How to implement Basic Debugging and ErrorHandling Functions in an App?

    Hey Guys!
    I want to implement some basic debugging functions, something like this (the code is a untested idea):
    Code:
    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
    Last edited by Dumas; 9 Oct 2009 at 7:07 AM. Reason: development of the code 2

  2. #2
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589

    Default

    anyone?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Did you know that Ext has a Debugging Console?

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

  4. #4
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    Quote Originally Posted by Condor View Post
    Did you know that Ext has a Debugging Console?

    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.

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Feel free to contribute (I don't think the solution is as simple as you propose).

  6. #6
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    Quote Originally Posted by Condor View Post
    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.

  7. #7
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •