Slide 1

Download Report

Transcript Slide 1 

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?
• How are you handling server errors?
• Are you using a session?
• Any ClientSide errors?
• Did you test your application in every
browser?
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 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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>User Login</title>
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
Example #2 for Bad Responses
• Pop Up and Cookie Blockers are a
developers problem?
• Log from my server:
Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER:
<script language="JavaScript">
<!-- // Start of AdSubtract JavaScript block; you can ignore this.
// It is used when AdSubtract blocks cookies or pop-up windows.
document.iMokie = "cookie blocked
Example #3 for Bad Response
• Another log from my server
Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: <!-//--><script>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!
– 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!
– 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
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
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!
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
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!
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
Automation server can't create object
• Problem comes from ActiveX being
disabled.
• 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
• quote from
https://bugzilla.mozilla.org/show_bug.cgi?id=238559#c0
• 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/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!
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
• 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/1
1/1137003773899.html
try{} catch(e){}
try{
var a = 123;
var b = a.indexOf("s");
}
catch(e){
alert("Name: " + e.name + "\nDesc: " + e.description + "\nMsg: " +
e.msg);
}
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!
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 = "?clientControl=AjaxPolling" +
"&clientException=true" +
"&URL=" + escape(strURL) +
"&lineNum=" + strLineNumber +
"&msg=" + escape(strErr);
var errorLoader = new net.ContentLoader_Error(
"../SiteError.aspx" + strErrorParams,
finishErrorRequest,
ajaxErrorError,
"GET");
}
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" + strErrorParams,
finishErrorRequest,
ajaxErrorError,
"GET");
}
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,
"GET");
}
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)
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
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!
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
QUESTIONS?