1. Tracking ClientSide Errors Techniques to Track “Blackbox” 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 world’s first job matching site

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

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

7. 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){}

8. 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

9. 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")); }

10. See it in action
Example
..\Desktop\ErrorExample.html

11. How can we get a more “refined” way of catching an error?
window.onerror…
window.onerror is a global way to catch an error
How can we get a more “refined” way of catching an error?

12. 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

13. Basic try catch Example
var a = 123;
var b = a.indexOf("s"); }
catch(e){
alert("Name: " + e.name + "\nDesc: " + e.description + "\nMsg: " + e.msg);

14. Basic Example
Example
..\Desktop\ErrorExample2.html

15. 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!

16. 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); }

17. 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); }

18. 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"); }

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

20. 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

21. 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 – the user if you are lucky to know who caused the error and ask them what they did!

22. Basic Framework Idea
..\..\..\Inetpub\wwwroot\Ajax_LogErrors\Ajax_LogErrors.csproj

23. Developer Must Haves Drip IE Leak Detector Firefox Extensions
Adblock – Ah, just because!
Firebug
Selenium IDE
JSView
NOSCRIPT
Modify Headers

24. 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
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
CMAPS Yahoo Group

25. Questions? Slides and Files can be found at: