The sorry state of Javascript error handling

Transcript

1. THE SORRY STATE OF JAVASCRIPT ERROR HANDLING By ( ), 2015-06-18 Dominykas Blyžė @dymonaz
2. INWH.SE/WIN
3. > t h r o w T a b l e ノಠ益ಠノ彡┻━┻ > THROW ALL THE THINGS! But then what?
4. JAVASCRIPT IS 20. READY FOR PRODUCTION. Seriously, browse the web with the developer tools console open logging errors and be truly amazed that the internet ever worked. @shanselman
5. HANDLE ALL THE THINGS? 92% of catastrophic failures are the result of incorrect error handling Simple Testing Can Prevent Most Critical Failures by Ding Yuan et al, dominykas.net/24
6. PRO-TIP Make sure stuff works without JS: Use real < a h r e f > with real URLs Use real forms with real buttons p r e v e n t D e f a u l t ( ) as a last thing
7. ERROR HANDLING IN THE NORMAL WORLD 1. Stay aware of errors 2. Provide detailed error information 3. Add exception handling code 4. If all else fails - crash with a dump
8. IN THE BROWSER WORLD... Old browsers 3rd party scripts Browser extensions Cross-domain restrictions
9. IN THE BROWSER WORLD... t h r o w n e w E r r o r vs t h r o w o l d _ T a b l e Errors in async functions Errors in callbacks Zalgo
10. IN THE BROWSER WORLD... Network errors Aggressive caching Random obscure
11. RANDOM OBSCURE XHR randomly status 0 (but error logged CORS XHR) < i f r a m e i d = " l o c a l S t o r a g e " / > l o c a l S t o r a g e max size is 0 in private mode on iOS g e t C o m p u t e d S t y l e stops being a function... Random m e s s a g e events from plugins
12. LOGGING FROM THE BROWSER
13. DO THIS TOMORROW If you're not doing it yet w i n d o w . o n e r r o r = f u n c t i o n ( e r r , u r l , l i n e ) { g a ( ' s e n d ' , ' e x c e p t i o n ' , { ' e x D e s c r i p t i o n ' : l i n e + " " + e r r } ) ; } ;
14. DO THIS NEXT WEEK Set up a proper logging endpoint Version your releases and pass on the version Make sure versions match across different bundles Don't include "data" inside the "message", i.e. l o g ( m e s s a g e S t r i n g , o b j D a t a ) ;
15. PAY ATTENTION Anything can be thrown - must be able to serialize correctly. v a r l o g M e s s a g e = e r r & & e r r . m e s s a g e ? e r r . m e s s a g e : " " + e r r ; > n u l l . t o S t r i n g ( ) T y p e E r r o r : C a n n o t r e a d p r o p e r t y ' t o S t r i n g ' o f n u l l > n e w E r r o r ( " D a m n i t " ) . t o S t r i n g ( ) ' E r r o r : D a m n i t ' > n e w E r r o r ( " D a m n i t " ) . m e s s a g e ' D a m n i t '
16. TRY At the very least they have useful blogs. Rollbar Errorception
17. DREAM C o n t e n t - S e c u r i t y - P o l i c y : s t y l e - s r c c d n . e x a m p l e . c o m ; r e p o r t - u r i / _ / c s p - r e p o r t s
18. CATCHING ERRORS
19. TRY/CATCH Ugly Sync Deoptimizes * * no big deal most of the time, but still
20. GUARD() f u n c t i o n g u a r d ( f n ) { r e t u r n f u n c t i o n ( ) { t r y { r e t u r n f n . a p p l y ( t h i s , a r g u m e n t s ) ; } c a t c h ( e r r ) { l o g E r r o r ( e r r ) ; t h r o w e r r ; } } ; } Using this for auto-wrapping is probably a bad idea.
21. USE PROMISES Wrap promise construction Reject with n e w E r r o r ( ) Don't forget to . c a t c h ( l o g A n d R e t h r o w ) Stack traces an issue (unless native) New: u n h a n d l e d R e j e c t i o n Problem: UI can't have a break in event loop
22. WINDOW.ONERROR m s g is different on every browser Yay! Uncaught Error: undefined is not an object u r l has cross-domain restrictions l i n e n o is 1, because you minified c o l n o is fairly recent e r r o r O b j is very recent
23. MEANWHILE AT W3C...
24. WINDOW.ONERROR Not the same as a d d E v e n t L i s t e n e r ( ' e r r o r ' ) TraceKit for stacks, if you can afford it Run your code in an iframe, if on a third party site r e t u r n t r u e if handled
25. WINDOW.ONERROR - CORS 1. A c c e s s - C o n t r o l - A l l o w - O r i g i n : * 2. < s c r i p t c r o s s o r i g i n = " a n o n y m o u s " >
26. WINDOW.ONERROR - CORS The script can inject itself with the attribute set s e t A t t r i b u t e ( " c r o s s o r i g i n " ) , not s c r i p t . c r o s s o r i g i n i f ( ! d o c u m e n t . c u r r e n t S c r i p t . g e t A t t r i b u t e ( " c r o s s o r i g i n " ) ) { v a r s c r i p t = d o c u m e n t . c r e a t e E l e m e n t ( " s c r i p t " ) ; s c r i p t . s r c = d o c u m e n t . c u r r e n t S c r i p t . s r c ; s c r i p t . s e t A t t r i b u t e ( " c r o s s o r i g i n " , " a n o n y m o u s " ) ; d o c u m e n t . h e a d . a p p e n d C h i l d ( s c r i p t ) ; } e l s e { / * p r o c e e d * / }
27. SOURCE MAPS b r o w s e r i f y \ - e b u n d l e / e n t r y . j s \ - t u g l i f y i f y \ - d | e x o r c i s t b u n d l e . j s . m a p > b u n d l e . j s
28. SOURCE MAPS v a r S o u r c e M a p C o n s u m e r = r e q u i r e ( " s o u r c e - m a p " ) . S o u r c e M a p C o n s u m e r ; v a r m a p = J S O N . p a r s e ( f s . r e a d F i l e S y n c ( " b u n d l e . j s . m a p " ) ) ; v a r s m c = n e w S o u r c e M a p C o n s u m e r ( m a p ) ; c o n s o l e . l o g ( s m c . o r i g i n a l P o s i t i o n F o r ( { l i n e : 5 , c o l u m n : 3 3 } ) ) ; OUTPUT { s o u r c e : ' ~ / b u n d l e / s t u f f . j s ' , l i n e : 2 , c o l u m n : 7 , n a m e : n u l l }
29. EMBULACT $ e x c e p t i o n H a n d l e r o n e r r o r Replay events
30. THROWING ERRORS
31. THROW ERRORS If you don't throw, it won't have a stack in IE
32. THROW ERRORS If it's not an error, it won't have a stack This applies to n o d e b a c k ( e r r , d a t a ) O b j e c t . c r e a t e ( E r r o r ) is not an error
33. USE ERROR CODES v a r e r r o r = n e w E r r o r ( " s n a p . . . " ) ; e r r o r . c o d e = " E _ S N A P " ; t h r o w e r r o r ;
34. THROW CUSTOM ERRORS I don't want to talk about it...
35. THROW CUSTOM ERRORS M y C u s t o m E r r o r should: Keep m e s s a g e as a first param Have a m e s s a g e property Have a n a m e = " M y C u s t o m E r r o r " property Extend E r r o r (i.e. support i n s t a n c e o f ) Work with and without n e w
36. ADD USEFUL INFO Good custom errors also should: Have a reasonable t o S t r i n g Be able to wrap around existing errors Have a stack trace
37. POOR MAN'S S T A C K T R A C E - J S f u n c t i o n C u s t o m E r r o r ( m e s s a g e ) { v a r t e m p = E r r o r . c a l l ( t h i s , m e s s a g e ) ; t e m p . n a m e = t h i s . n a m e = ' C u s t o m E r r o r ' ; t r y { t h r o w t e m p ; } c a t c h ( a f t e r T h r o w ) { t h i s . s t a c k = a f t e r T h r o w . s t a c k ; } t h i s . m e s s a g e = t e m p . m e s s a g e ; } C u s t o m E r r o r . p r o t o t y p e = O b j e c t . c r e a t e ( E r r o r . p r o t o t y p e ) ;
38. NUMBER OF BORING S T A C K LINES In Blink: name/message + 2 In Webkit: 1 In Firefox: 1 In IE: name/message + 1
39. < / ノಠ益ಠノ彡┻━┻ > Slides: dominykas.net/25 We're hiring: inwh.se/win @dymonaz ;