Tracking ClientSide Errors Techniques to Track “Blackbox” Errors

Tracking ClientSide ErrorsTechniques to Track “Blackbox” Errors Presented by Eric Pascarello

Author of:

Some Background Info HTML/JavaScript Moderator at JavaRanch.com Member since 2001 Ajax Developer at market10.com The world’s first job matching site

You log errors on the ServerSide, why don’t you do it on the ClientSide?

Testing JavaScript 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 logginG • See some development tools that are must haves

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

window.onerror • Event fires for almost any JavaScript 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 arrErrors = new Array(); window.onerror = function (strErr, strURL, strLineNumber) { strMess = "URL: " + strURL + "\nline number: " + strLineNumber + "\nError Message: " + strErr; arrErrors.push(strMess); alert(arrErrors.join("\n__________\n\n")); }

See it in action • Example • ..\Desktop\ErrorExample.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.indexOf("s"); } catch(e){ alert("Name: " + e.name + "\nDesc: " + e.description + "\nMsg: " + e.msg); }

Basic Example • Example • ..\Desktop\ErrorExample2.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 xmlHttpRequest Object • Ajax Request • Great if error does not effect page functionality and user supports the xmlHttpRequest Object!

Basic idea for window.onerror window.onerror = function ( strErr, strURL, strLineNumber ) { var strErrorParams = "?clientControl=AjaxPolling" + "&clientException=true" + "&URL=" + escape(strURL) + "&lineNum=" + strLineNumber + "&msg=" + escape(strErr); var errorLoader = new net.ContentLoader_Error( "../SiteError.aspx", finishErrorRequest, ajaxErrorError, "POST", strErrorParams); }

Basic idea for try catch logging function logTryCatch(id, e) { var strErrorParams = "?clientControl=AjaxPanelUpdater" + "&clientException=true" + "&URL=" + escape(window.location.href) + "&lineNum=" + id + "&msg=" + escape(e.name + "-" + e.description + "-" + e.msg); var errorLoader = new net.ContentLoader_Error( "../SiteError.aspx", finishErrorRequest, ajaxErrorError, "POST“, strErrorParams); }

Basic idea for bad response function logBadResponse(strMessage){ var strErrorParams = "?clientControl=AjaxRSSUpdater" + "&clientException=false" + "&URL=" + escape(window.location.href) + "&msg=" + strMessage); var errorLoader = new net.ContentLoader_Error( "../SiteError.aspx" + strErrorParams, finishErrorRequest, ajaxErrorError, "POST"); }

What do you want to send/log? • Send/Log as much data as you can! • The URL, form parameters, responseText, 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 JavaScript 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 • ..\..\..\Inetpub\wwwroot\Ajax_LogErrors\Ajax_LogErrors.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/JavaScript Forum: http://www.JavaRanch.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 A1ien51 or Pascarello on following message boards/ forums • ajaxfreaks.com,ajaxforums.net,ajaxgoals.com, google groups on Ajax, webdeveloper.com, codingforums.com • AskEric@pascarello.com • CMAPS Yahoo Group

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

Tracking ClientSide Errors Techniques to Track “Blackbox” Errors