Tracking Client Side Errors Techniques to Track Blackbox

Tracking Client. Side Errors Techniques to Track “Blackbox” Errors Presented by Eric Pascarello

Author of:

Some Background Info HTML/Java. Script Moderator at Java. Ranch. com Member since 2001 Ajax Developer at market 10. com The world’s first job matching site

You log errors on the Server. Side, why don’t you do it on the Client. Side?

Testing Java. Script is Not Easy • Browsers – – Firefox, Mozilla, Internet Explorer, Opera, Safari, etc Multiple Versions (Main releases, betas, etc) Different Security Settings Different Browser Plug-ins • Different Operating Systems and Patches • Different CPUs, RAM, Memory, Multiple Programs running, Multiple browsers open, etc!

What you will get from this session: • Learn how to track almost all of your clientside errors. – No more wondering why users stop on page 2 of your application and do not continue on! – Get the basic techniques you can use – See how to implement clientside error loggin. G • See some development tools that are must haves

Capturing and Logging the Errors • Types of Errors – Bad response from server – Java. Script Coding Errors • Ways of Catching Errors – Validation – window. onerror – try{}catch(e){}

window. onerror • Event fires for almost any Java. Script error – Some errors are not caught – Reasons could be error occurred before loaded • Contains three arguments – – – Error Message – message of what the error is URL – page location of where the error occurred Line Number – approximation of where it occurred

Basic window. error Example var arr. Errors = new Array(); window. onerror = function (str. Err, str. URL, str. Line. Number) { str. Mess = "URL: " + str. URL + "nline number: " + str. Line. Number + "n. Error Message: " + str. Err; arr. Errors. push(str. Mess); alert(arr. Errors. join("n_____nn")); }

See it in action • Example • . . DesktopError. Example. html

window. onerror… • window. onerror is a global way to catch an error How can we get a more “refined” way of catching an error?

try{} catch(e){} • Contains three properties – e. name – Gives type of error – e. msg– page location of where the error occurred – e. description – approximation of where it • • occurred You can not catch individual exceptions, you only have one catch to use Instead you would have to use a switch statement using the e. name inside the catch

Basic try catch Example try{ var a = 123; var b = a. index. Of("s"); } catch(e){ alert("Name: " + e. name + "n. Desc: " + e. description + "n. Msg: " + e. msg); }

Basic Example • . . DesktopError. Example 2. html

Sending Error to the server • Set Image Source – Great if you are sending small amounts of data. Very X-Browser Friendly! • Redirect Page – Functionality is hosed, nothing to do but run and inform the user of the situation! • Hidden Iframe – Great if error does not effect page functionality and user has problems/lack of support of the xml. Http. Request Object • Ajax Request – Great if error does not effect page functionality and user supports the xml. Http. Request Object!

Basic idea for window. onerror = function ( str. Err, str. URL, str. Line. Number ) { var str. Error. Params = "? client. Control=Ajax. Polling" + "&client. Exception=true" + "&URL=" + escape(str. URL) + "&line. Num=" + str. Line. Number + "&msg=" + escape(str. Err); var error. Loader = new net. Content. Loader_Error( ". . /Site. Error. aspx", finish. Error. Request, ajax. Error, "POST", str. Error. Params); }

Basic idea for try catch logging function log. Try. Catch(id, e) { var str. Error. Params = "? client. Control=Ajax. Panel. Updater" + "&client. Exception=true" + "&URL=" + escape(window. location. href) + "&line. Num=" + id + "&msg=" + escape(e. name + "-" + e. description + "-" + e. msg); var error. Loader = new net. Content. Loader_Error( ". . /Site. Error. aspx", finish. Error. Request, ajax. Error, "POST“, str. Error. Params); }

Basic idea for bad response function log. Bad. Response(str. Message){ var str. Error. Params = "? client. Control=Ajax. RSSUpdater" + "&client. Exception=false" + "&URL=" + escape(window. location. href) + "&msg=" + str. Message); var error. Loader = new net. Content. Loader_Error( ". . /Site. Error. aspx" + str. Error. Params, finish. Error. Request, ajax. Error, "POST"); }

What do you want to send/log? • Send/Log as much data as you can! – The URL, form parameters, response. Text, js files that are loaded, browser, OS, etc. • The more information you have to use gives you a better chance of finding the error. – Not as easy as looking at the Java. Script console and view source! You need to guess how the user got the error! – Error Messages from onerror and try/catch are plain! • Undefined is the best error message to see in the log! It gives you so much information to work with! (Note the sarcasm)

What to do on the server? • Obtain the information from the query string or posted form parameters. (Depends on your implementation) • Get any other available information • Log the error! • When using XHR - send confirmation code of success! • Display Error Page for bad errors

How to debug logged Errors? • Some errors will be easy to solve. • Others can cause you to become bald with bumps on your head! – Make sure to try to use the browser and OS you recorded. – Go to the page in question and mess around – Use all the information you got from the log. – Change browser settings (Security levels!) – If all else fails – email the user if you are lucky to know who caused the error and ask them what they did!

Basic Framework Idea • . . InetpubwwwrootAjax_Log. ErrorsA jax_Log. Errors. csproj

Developer Must Haves • Drip IE Leak Detector • Firefox Extensions • Adblock – Ah, just because! • Firebug • Selenium IDE • JSView • NOSCRIPT • Modify Headers

Where to find me: • • Ajax Forum: http: //www. intelliobjects. com/forums/index. php HTML/Java. Script Forum: http: //www. Java. Ranch. com My Ajax Blog: http: //radio. javaranch. com/pascarello Ajax In Action: http: //www. manning. com/crane • Manning has author online which is a forum to ask Dave Crane and me questions about Ajax In Action • Under names of A 1 ien 51 or Pascarello on following message boards/ forums • ajaxfreaks. com, ajaxforums. net, ajaxgoals. com, google groups on Ajax, webdeveloper. com, codingforums. com • Ask. Eric@pascarello. com • CMAPS Yahoo Group

Questions? • Slides and Files can be found at: http: //www. pascarello. com/presentation/CMAP_ERRORS