Transcript Slide 1

Tracking ClientSide Errors
Techniques 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\A
jax_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
• [email protected]
• CMAPS Yahoo Group
Questions?
• Slides and Files can be found at:
http://www.pascarello.com/presentation/CMAP_ERRORS