Ajax Application Errors Developer Oversight and Tracking 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
Developer Oversights Are you verifying your data? Are you verifying your data? How are you handling server errors? How are you handling server errors? Are you using a session? Are you using a session? Any ClientSide errors? Any ClientSide errors? Did you test your application in every browser? Did you test your application in every browser?
Testing JavaScript is Not Easy Browsers 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 Operating Systems and Patches Different CPUs, RAM, Memory, Multiple Programs running, Multiple browsers open, etc! Different CPUs, RAM, Memory, Multiple Programs running, Multiple browsers open, etc!
What you will get from this session: Learn about some common oversights by developers. Learn about some common oversights by developers. Learn about some strange things that occur with Ajax applications Learn about some strange things that occur with Ajax applications Learn how to track almost all of your clientside errors. 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
Developer Oversight #1 Developers forgetting that the Ajax response is not perfect Developers forgetting that the Ajax response is not perfect Example #1 from my server log Example #1 from my server log Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER <html><head> User Login User Login
Oversight #1 Solution Make sure the data is what you expect it to be! Make sure the data is what you expect it to be! Validate your data Validate your data –Use regular expressions to check for patterns –Look for key parts of the expression –Look for things that do not belong
Example #2 for Bad Responses Pop Up and Cookie Blockers are a developers problem? Pop Up and Cookie Blockers are a developers problem? Log from my server: Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: Log from my server: Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: <!-- // Start of AdSubtract JavaScript block; you can ignore this. <!-- // Start of AdSubtract JavaScript block; you can ignore this. // It is used when AdSubtract blocks cookies or pop-up windows. // It is used when AdSubtract blocks cookies or pop-up windows. document.iMokie = "cookie blocked document.iMokie = "cookie blocked
Example #3 for Bad Response Another log from my server Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: var PrxLC=new Date(0);var PrxModAtr=0; var PrxInst; if(!PrxInst ) PrxRealOpen=window.open; function PrxOMUp(){PrxLC=new Date();}function PrxNW(){ return(this.window);} function PrxOpen( Another log from my server Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: var PrxLC=new Date(0);var PrxModAtr=0; var PrxInst; if(!PrxInst ) PrxRealOpen=window.open; function PrxOMUp(){PrxLC=new Date();}function PrxNW(){ return(this.window);} function PrxOpen( So pop up blockers could end up in your response from the server! So pop up blockers could end up in your response from the server! –Reason why logging on the client is good –An outside factor you probably would have never been able to test for!
Developer Oversight #2 Sessions Time out! Sessions Time out! –As seen in oversight #1, if session expires login page is returned in the response! Sessions do not magically detect Ajax Requests and User Requests Sessions do not magically detect Ajax Requests and User Requests –Polling can cause session to auto update! –No more session security
Oversight #2 Solutions Session Expired: Session Expired: –Look for a “special key” in the response –If detected reload current page Polling Server: Polling Server: –Poll a static file that is not part of session –Build your own session management Save last user action and check with polling/page load to see if session expired Save last user action and check with polling/page load to see if session expired
Developer Oversight #3 ServerSide Errors not handled properly ServerSide Errors not handled properly If a server encounters an error during the request it will return an error message or redirect to your error page. Not good. If a server encounters an error during the request it will return an error message or redirect to your error page. Not good. Oversight #1 with bad response takes over Oversight #1 with bad response takes over Leaves user hanging! Leaves user hanging!
Oversight #3 Solution Have server log the error Have server log the error Return “Special Key” with ID back to client Return “Special Key” with ID back to client –“Server Error: See log # ” In response check for Special Key In response check for Special Key –If key is found handle the error Send to error page Send to error page OR Try to make the request again OR Try to make the request again OR “Eat” the error if the functionality is not required OR “Eat” the error if the functionality is not required
Developer Oversight #4 Not Validating the passed parameters on the server side Not Validating the passed parameters on the server side –SQL Injection –JavaScript Injection –Value hacks –JavaScript Execution –Bad user input! Solution: Validate your data! Solution: Validate your data!
2 Errors That Show Up These get posted on Forums all the time: These get posted on Forums all the time: Internet Explorer: Internet Explorer: –Automation server can't create object Mozilla Mozilla –NS_ERROR_NOT_AVAILABLE
Automation server can't create object Problem comes from ActiveX being disabled. Problem comes from ActiveX being disabled. Solution: Use Try catch try{ this.req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ this.req = false; } Solution: Use Try catch try{ this.req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e){ this.req = false; }
NS_ERROR_NOT_AVAILABLE Error occurs with reading status code Error occurs with reading status code quote from quote from Mozilla calls onload() for all HTTP transactions that succeeded. The only time it calls onerror() is when a network error happened. Inside the onerror handler, accessing the status attribute results in this exception: Error: [Exception... "Component returned failure code: 0x (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///Users/chuck/errtest.html :: anonymous :: line 114" data: no] Source File: file:///Users/chuck/errtest.html Line: 114 Mozilla calls onload() for all HTTP transactions that succeeded. The only time it calls onerror() is when a network error happened. Inside the onerror handler, accessing the status attribute results in this exception: Error: [Exception... "Component returned failure code: 0x (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///Users/chuck/errtest.html :: anonymous :: line 114" data: no] Source File: file:///Users/chuck/errtest.html Line: 114 Solution: Add try catch around status and statusText when reading it for errors! Solution: Add try catch around status and statusText when reading it for errors!
Capturing and Logging the Errors Types of Errors Types of Errors –Bad response from server –JavaScript Coding Errors Ways of Catching Errors Ways of Catching Errors –Validation –window.onerror –try{}catch(e){}
window.onerror Event fires for almost any JavaScript error Event fires for almost any JavaScript error Contains three arguments: Error Message, URL, and Line Number. 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")); } Contains three arguments: Error Message, URL, and Line Number. 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")); } Basic Example using code above: 1/ html Basic Example using code above: 1/ html 1/ html 1/ html
try{} catch(e){} try{ var a = 123; var a = 123; var b = a.indexOf("s"); var b = a.indexOf("s");}catch(e){ alert("Name: " + e.name + "\nDesc: " + e.description + "\nMsg: " + e.msg); alert("Name: " + e.name + "\nDesc: " + e.description + "\nMsg: " + e.msg);}
Sending Error to the server Ajax Request Ajax Request –Great if error does not effect page functionality and user supports XHR! Hidden Iframe Hidden Iframe –Great if error does not effect page functionality and user has problems with XHR Redirect Page Redirect Page –Functionality is hosed, nothing to do but run!
Basic idea for window.onerror var arrErrors = new Array(); window.onerror = function ( strErr, strURL, strLineNumber ) { strMess = "URL: " + strURL + "\nline number: " + strMess = "URL: " + strURL + "\nline number: " + strLineNumber + "\nError Message: " + strErr; strLineNumber + "\nError Message: " + strErr; arrErrors.push(strMess); arrErrors.push(strMess); var strErrorParams = "?clientControl=AjaxPolling" + var strErrorParams = "?clientControl=AjaxPolling" + "&clientException=true" + "&clientException=true" + "&URL=" + escape(strURL) + "&URL=" + escape(strURL) + "&lineNum=" + strLineNumber + "&lineNum=" + strLineNumber + "&msg=" + escape(strErr); "&msg=" + escape(strErr); var errorLoader = new net.ContentLoader_Error( var errorLoader = new net.ContentLoader_Error( "../SiteError.aspx" + strErrorParams, "../SiteError.aspx" + strErrorParams, finishErrorRequest, finishErrorRequest, ajaxErrorError, ajaxErrorError, "GET"); "GET");}
Basic idea for try catch logging function logTryCatch(id, e){ var strErrorParams = "?clientControl=AjaxPanelUpdater" + var strErrorParams = "?clientControl=AjaxPanelUpdater" + "&clientException=true" + "&clientException=true" + "&URL=" + escape(window.location.href) + "&URL=" + escape(window.location.href) + "&lineNum=" + id + "&lineNum=" + id + "&msg=" + escape(e.name + "-" + e.description + "&msg=" + escape(e.name + "-" + e.description + "-" + e.msg); "-" + e.msg); var errorLoader = new net.ContentLoader_Error( var errorLoader = new net.ContentLoader_Error( "../SiteError.aspx" + strErrorParams, "../SiteError.aspx" + strErrorParams, finishErrorRequest, finishErrorRequest, ajaxErrorError, ajaxErrorError, "GET"); "GET");}
Basic idea for bad response function logBadResponse(strMessage){ var strErrorParams = "?clientControl=AjaxRSSUpdater" + var strErrorParams = "?clientControl=AjaxRSSUpdater" + "&clientException=false" + "&clientException=false" + "&URL=" + escape(window.location.href) + "&URL=" + escape(window.location.href) + "&msg=" + strMessage); "&msg=" + strMessage); var errorLoader = new net.ContentLoader_Error( var errorLoader = new net.ContentLoader_Error( "../SiteError.aspx" + strErrorParams, "../SiteError.aspx" + strErrorParams, finishErrorRequest, finishErrorRequest, ajaxErrorError, ajaxErrorError, "GET"); "GET");}
What you want to send? Send as much data as you can! Send 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. 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 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) 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) Obtain the information from the query string or posted form parameters. (Depends on your implementation) Log the error! Log the error! When using XHR - send confirmation code of success! When using XHR - send confirmation code of success! Display Error Page for bad errors Display Error Page for bad errors
How to debug Errors? Some errors will be easy to solve. Some errors will be easy to solve. Others can cause you to become bald with bumps on your head! 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 – the user if you are lucky to know who caused the error and ask them what they did!
Where to find me: –Ajax Forum: –HTML/JavaScript Forum: –My Ajax Blog: –Ajax In Action: Manning has author online which is a forum to ask Dave Crane and me questions about Ajax In Action 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 ajaxfreaks.com,ajaxforums.net,ajaxgoals.com, google groups on Ajax, webdeveloper.com, codingforums.com
QUESTIONS?