Ajax Application Errors Developer Oversight and Tracking Errors

1
Ajax Application ErrorsDeveloper Oversight and
Tracking Errors

• Presented by Eric Pascarello

2
Author of
3
Some Background Info

• HTML/JavaScript Moderator at JavaRanch.com
• Member since 2001

• Ajax Developer at market10.com
• The worlds first job matching site

4
Developer Oversights

• Are you verifying your data?
• How are you handling server errors?
• Are you using a session?
• Any ClientSide errors?
• Did you test your application in every browser?

5
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!

6
What you will get from this session

• Learn about some common oversights by developers.
• Learn about some strange things that occur with
  Ajax applications
• 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

7
Developer Oversight 1

• Developers forgetting that the Ajax response is
  not perfect
• Example 1 from my server log
• Client Error Message/Detail ERROR BAD RESPONSE
  FROM SERVER
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtmlgt
• ltheadgt
• lttitlegtUser Loginlt/titlegt

8
Oversight 1 Solution

• Make sure the data is what you expect it to be!
• Validate your data
• Use regular expressions to check for patterns
• Look for key parts of the expression
• Look for things that do not belong

9
Example 2 for Bad Responses

• Pop Up and Cookie Blockers are a developers
  problem?
• Log from my serverClient Error Message/Detail
  ERROR BAD RESPONSE FROM SERVER ltscript
  language"JavaScript"gt
• lt!-- // Start of AdSubtract JavaScript
  block you can ignore this.
• // It is used when AdSubtract blocks cookies
  or pop-up windows.
• document.iMokie "cookie blocked

10
Example 3 for Bad Response

• Another log from my serverClient Error
  Message/Detail ERROR BAD RESPONSE FROM SERVER
  lt!--//--gtltscriptgtvar PrxLCnew Date(0)var
  PrxModAtr0 var PrxInst if(!PrxInst )
  PrxRealOpenwindow.open function
  PrxOMUp()PrxLCnew Date()function PrxNW()
  return(this.window) function PrxOpen(
• 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!

11
Developer Oversight 2

• 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
• Polling can cause session to auto update!
• No more session security

12
Oversight 2 Solutions

• Session Expired
• Look for a special key in the response
• If detected reload current page
• 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

13
Developer Oversight 3

• 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.
• Oversight 1 with bad response takes over
• Leaves user hanging!

14
Oversight 3 Solution

• Have server log the error
• Return Special Key with ID back to client
• Server Error See log 3141592653589
• In response check for Special Key
• If key is found handle the error
• Send to error page
• OR Try to make the request again
• OR Eat the error if the functionality is not
  required

15
Developer Oversight 4

• Not Validating the passed parameters on the
  server side
• SQL Injection
• JavaScript Injection
• Value hacks
• JavaScript Execution
• Bad user input!
• Solution Validate your data!

16
2 Errors That Show Up

• These get posted on Forums all the time
• Internet Explorer
• Automation server can't create object
• Mozilla
• NS_ERROR_NOT_AVAILABLE

17
Automation server can't create object

• Problem comes from ActiveX being disabled.
• Solution Use Try catchtry this.req new
  ActiveXObject("Microsoft.XMLHTTP") catch(e)
  this.req false

18
NS_ERROR_NOT_AVAILABLE

• Error occurs with reading status code
• quote from https//bugzilla.mozilla.org/show_bug.c
  gi?id238559c0
• 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 0x80040111
  (NS_ERROR_NOT_AVAILABLE) nsIXMLHttpRequest.status
  " nsresult "0x80040111 (NS_ERROR_NOT_AVAILABLE)"
  location "JS frame file///Users/chuck/errtes
  t.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!

19
Capturing and Logging the Errors

• Types of Errors
• Bad response from server
• JavaScript Coding Errors
• Ways of Catching Errors
• Validation
• window.onerror
• trycatch(e)

20
window.onerror

• 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"))
• Basic Example using code above
  http//radio.javaranch.com/pascarello/2006/01/11/1
  137003773899.html

21
try catch(e)

• try
• var a 123
• var b a.indexOf("s")
• catch(e)
• alert("Name " e.name "\nDesc "
  e.description "\nMsg " e.msg)

22
Sending Error to the server

• Ajax Request
• Great if error does not effect page functionality
  and user supports XHR!
• Hidden Iframe
• Great if error does not effect page functionality
  and user has problems with XHR
• Redirect Page
• Functionality is hosed, nothing to do but run!

23
Basic idea for window.onerror

• var arrErrors new Array()
• window.onerror function ( strErr, strURL,
  strLineNumber )
• strMess "URL " strURL "\nline number "
  
• strLineNumber "\nError
  Message " strErr
• arrErrors.push(strMess)
• var strErrorParams "?clientControlAjaxPolling
  "
• 
  "clientExceptiontrue"
• "URL"
  escape(strURL)
• "lineNum"
  strLineNumber
• "msg"
  escape(strErr)
• var errorLoader new net.ContentLoader_Error(
• "../SiteError.aspx" strErrorParams,
• finishErrorRequest,
• ajaxErrorError,
• "GET")

24
Basic idea for try catch logging

• function logTryCatch(id, e)
• var strErrorParams "?clientControlAjaxPanelU
  pdater"
• "clientExceptiontrue"
• "URL" escape(window.location.href)
  
• "lineNum" id
• "msg" escape(e.name "-"
  e.description
• "-" e.msg)
• var errorLoader new net.ContentLoader_Error(
• "../SiteError.aspx" strErrorParams,
• finishErrorRequest,
• ajaxErrorError,
• "GET")

25
Basic idea for bad response

• function logBadResponse(strMessage)
• var strErrorParams "?clientControlAjaxRSSUpd
  ater"
• "clientExceptionfalse"
• "URL" escape(window.location.href)
  
• "msg" strMessage)
• var errorLoader new net.ContentLoader_Error(
• "../SiteError.aspx" strErrorParams,
• finishErrorRequest,
• ajaxErrorError,
• "GET")

26
What you want to send?

• 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.
• 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)

27
What to do on the server?

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

28
How to debug 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!

29
Where to find me

• Ajax Forum http//www.intelliobjects.com/forums/i
  ndex.php
• HTML/JavaScript Forum http//www.JavaRanch.com
• My Ajax Blog http//radio.javaranch.com/pascarell
  o
• 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

30
QUESTIONS?