E nterpris e JavaS cript E rror
           Handling
            Nicholas C . Zakas
 P rincipal Front E nd E ngineer, Yahoo!
Who's this g uy?
• P rincipal Front E nd E ngineer, Yahoo!
  Front P age
• YUI C ontributor
• Author
Ques tion:
What do us ers s ee when
there's a JavaS cript error on
a web pag e?
Ans wer:
Nothing !*
“If an error is possible, someone will make it. The
   designer must assume that all possible errors
   will occur and des...
R ule #1:
As s ume your code will fail
My code is beautiful
  and never fails
As s umption?




• What if destination is null?
• What if source is null?
R ule #2:
Log errors to the s erver
S imple Log g ing
R ule #3:
You, not the brows er, handle
errors
try-catch




• Thrown errors contain extra information
• E rrors that are caught are considered to
  have been handled
window.onerror




• Last stop before browser responds
• R eturn true to indicate not to respond
• O nly supported in Inte...
E rror Lifecycle

   Browser Error


   window.onerror


      try-catch


        Error
R ule #4:
Identify where errors mig ht
occur
Types of E rrors
• Type coercion errors
Type C oercion E rrors
Types of E rrors
• Type coercion errors
• D ata type errors
Data Type E rrors
• O ften occurs with function arguments
• Typically a symptom of insufficient value
  checking
Data Type E rrors
Data Type E rrors
Data Type E rrors - Fixed
Data Type E rrors - Fixed
Types of E rrors
• Type coercion errors
• D ata type errors
• C ommunication errors
C ommunication E rrors
•   Invalid UR L/post data
•   S erver response status
•   No network connection
•   S erver respon...
Invalid UR L/Pos t Data
• Typically long string concatenations
• D on't forget to use
  encodeUR IC omponent() on each par...
S erver R es pons e S tatus
• 200 is not the only valid status that may
  be returned
  – Beware of 304
• Any other status...
S erver R es pons e S tatus
No Network C onnection
• Internet E xplorer throws an error when
  calling open() but then goes through
  normal lifecycle...
No Network C onnection
S erver R es pons e C ontent
• A status of 200/  304 is not enough
• S erver errors often return HTM L
• If possible, set ...
R ule #5:
Throw your own errors
Throw Your Own E rrors
B rows er R es ponds
Throw or Try-C atch?
• E rrors should be thrown in the low-level
  parts of the application
  – Utilities, core libraries,...
R ule #6:
Dis ting uis h fatal vers us non-
fatal
Non-Fatal E rrors
• Won't interfere with user's main tasks
• Affects only a portion of the page
  – E asily disabled/ignor...
Fatal E rrors
• The application absolutely cannot
  continue
• S ignificantly interferes with user's ability
  to be produ...
Fatal or Non-Fatal?
• D on't allow your code to determine what
  is and is not fatal
  – Watch out for loops
• The user's ...
Fatal or Non-Fatal?
R ule #7:
Provide a debug mode
Debug Mode
• Assign a variable that is globally
  available
• try-catch should re-throw the error
• window.onerror should ...
Debug Mode
Debug Mode
S ummary
R ules
1.Assume your code will fail
2.Log errors to the server
3.You, not the browser, handle errors
4.Identify where erro...
Ques tions ?
E tcetera
• M y blog:    www.nczonline.net
• M y email:   nzakas@ yahoo-inc.com
Happy debug g ing !
C reative C ommons Imag es
                     Us edcrazytales562/25148
• http:/www.flickr.com/
        /              ph...
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Upcoming SlideShare
Loading in...5
×

Enterprise JavaScript Error Handling (Ajax Experience 2008)

43,122

Published on

My presentation at Ajax Experience 2008 about error handling strategies for JavaScript.

Published in: Technology, Sports
7 Comments
107 Likes
Statistics
Notes
No Downloads
Views
Total Views
43,122
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
845
Comments
7
Likes
107
Embeds 0
No embeds

No notes for slide

Enterprise JavaScript Error Handling (Ajax Experience 2008)

  1. 1. E nterpris e JavaS cript E rror Handling Nicholas C . Zakas P rincipal Front E nd E ngineer, Yahoo!
  2. 2. Who's this g uy? • P rincipal Front E nd E ngineer, Yahoo! Front P age • YUI C ontributor • Author
  3. 3. Ques tion: What do us ers s ee when there's a JavaS cript error on a web pag e?
  4. 4. Ans wer: Nothing !*
  5. 5. “If an error is possible, someone will make it. The designer must assume that all possible errors will occur and design so as to minimize the chance of the error in the first place, or its effects once it gets made. E rrors should be easy to detect, they should have minimal consequences, and, if possible, their effects should be reversible.” -D onald A. Norman The D esign of E veryday Things
  6. 6. R ule #1: As s ume your code will fail
  7. 7. My code is beautiful and never fails
  8. 8. As s umption? • What if destination is null? • What if source is null?
  9. 9. R ule #2: Log errors to the s erver
  10. 10. S imple Log g ing
  11. 11. R ule #3: You, not the brows er, handle errors
  12. 12. try-catch • Thrown errors contain extra information • E rrors that are caught are considered to have been handled
  13. 13. window.onerror • Last stop before browser responds • R eturn true to indicate not to respond • O nly supported in Internet E xplorer and Firefox
  14. 14. E rror Lifecycle Browser Error window.onerror try-catch Error
  15. 15. R ule #4: Identify where errors mig ht occur
  16. 16. Types of E rrors • Type coercion errors
  17. 17. Type C oercion E rrors
  18. 18. Types of E rrors • Type coercion errors • D ata type errors
  19. 19. Data Type E rrors • O ften occurs with function arguments • Typically a symptom of insufficient value checking
  20. 20. Data Type E rrors
  21. 21. Data Type E rrors
  22. 22. Data Type E rrors - Fixed
  23. 23. Data Type E rrors - Fixed
  24. 24. Types of E rrors • Type coercion errors • D ata type errors • C ommunication errors
  25. 25. C ommunication E rrors • Invalid UR L/post data • S erver response status • No network connection • S erver response content
  26. 26. Invalid UR L/Pos t Data • Typically long string concatenations • D on't forget to use encodeUR IC omponent() on each part – Not encodeUR I() • M ake sure parameters are named correctly
  27. 27. S erver R es pons e S tatus • 200 is not the only valid status that may be returned – Beware of 304 • Any other status means you didn't get data
  28. 28. S erver R es pons e S tatus
  29. 29. No Network C onnection • Internet E xplorer throws an error when calling open() but then goes through normal lifecycle • Firefox fails silently but throws an error if you try to access any response property (status, statusText, responseText)
  30. 30. No Network C onnection
  31. 31. S erver R es pons e C ontent • A status of 200/ 304 is not enough • S erver errors often return HTM L • If possible, set status to 500
  32. 32. R ule #5: Throw your own errors
  33. 33. Throw Your Own E rrors
  34. 34. B rows er R es ponds
  35. 35. Throw or Try-C atch? • E rrors should be thrown in the low-level parts of the application – Utilities, core libraries, etc. • Use try-catch blocks in higher level parts – Application-specific – C lient-side business logic
  36. 36. R ule #6: Dis ting uis h fatal vers us non- fatal
  37. 37. Non-Fatal E rrors • Won't interfere with user's main tasks • Affects only a portion of the page – E asily disabled/ignored • R ecovery is possible • A repeat of the action may result in the appropriate result • D on't tell the user it isn't working unless absolutely necessary
  38. 38. Fatal E rrors • The application absolutely cannot continue • S ignificantly interferes with user's ability to be productive • O ther errors will occur if the application continues • M essage the user immediately! • R eload
  39. 39. Fatal or Non-Fatal? • D on't allow your code to determine what is and is not fatal – Watch out for loops • The user's experience comes first
  40. 40. Fatal or Non-Fatal?
  41. 41. R ule #7: Provide a debug mode
  42. 42. Debug Mode • Assign a variable that is globally available • try-catch should re-throw the error • window.onerror should return false • Allow the browser to handle the error
  43. 43. Debug Mode
  44. 44. Debug Mode
  45. 45. S ummary
  46. 46. R ules 1.Assume your code will fail 2.Log errors to the server 3.You, not the browser, handle errors 4.Identify where errors might occur 5.Throw your own errors 6.D istinguish fatal versus non-fatal 7.P rovide a debug mode
  47. 47. Ques tions ?
  48. 48. E tcetera • M y blog: www.nczonline.net • M y email: nzakas@ yahoo-inc.com
  49. 49. Happy debug g ing !
  50. 50. C reative C ommons Imag es Us edcrazytales562/25148 • http:/www.flickr.com/ / photos/ 43252/ • http:/flickr.com/ / photos/waldoj/126354436/ • http:/flickr.com/ / photos/markhillary/289294549/ • http:/flickr.com/ / photos/3fold/437853495/ • http:/flickr.com/ / photos/ianhampton/ 65178598/ • http:/flickr.com/ / photos/joshlewis/1596018210/ • http:/flickr.com/ / photos/oberazzi/318947873/ • http:/flickr.com/ / photos/ 27061495/ mc/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×