Michele (Mee-keh-leh)
Front End Developer at YPlan
Member of:
● WEBdeBS + WEBdeLDN
● React.js Italia
Follow me @MicheleBertoli
Slide 3
Slide 3 text
January 2017
Slide 4
Slide 4 text
Poll
Which talk would be more interesting?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Errors are bad
● Unhappy customers
● Unhappy developers
Slide 8
Slide 8 text
Let’s talk about errors
Slide 9
Slide 9 text
JavaScript Debugging
Normally, errors will happen, every time you try to
write some new JavaScript code.
source: w3schools.com
Slide 10
Slide 10 text
Cost of errors
● Bugs cost economy $312 billion per year
● Developers spend 50% of their programming time
finding and fixing bugs
source: Cambridge University
Slide 11
Slide 11 text
What is an error?
● Incorrect result
● Unintended behaviour
● Inconsistent state
Slide 12
Slide 12 text
Types of errors
● Operational
● Unexpected
Slide 13
Slide 13 text
The problem
● Your code will fail
● The problem is not handling the errors
● Users find the bugs for you
Slide 14
Slide 14 text
Error handling
● Give a feedback to the users
● Discover errors quickly
● Store informations to reproduce problems
window.onerror
message: Error message (string)
source: URL of the script (string)
lineno: Line number (number)
colno: Column number for the line (number)
error: Error Object (object)
Error Object
message*: Human-readable description
fileName*: Name of the file
lineNumber*: Line number
* Optional
Slide 23
Slide 23 text
Different origin
● Script error
● “crossorigin” attribute
● CORS HTTP response headers
Slide 24
Slide 24 text
The best error handler ever
window.onerror = message => (
window.location.href = (
`http://stackoverflow.com/search?q=[js]${message}`
)
)
Slide 25
Slide 25 text
Stack Trace (or it didn’t happen)
Slide 26
Slide 26 text
Example
Error: Component error
at ReactComponentErrors.throwError
(http://localhost:8080/bundle.js:27522:16)
at ReactComponentErrors.componentWillReceiveProps
(http://localhost:8080/bundle.js:27516:18)
at ReactComponentErrors.component.(anonymous function)
(http://localhost:8080/bundle.js:27591:22)
at ReactCompositeComponentWrapper.updateComponent
(http://localhost:8080/bundle.js:19709:13)
Slide 27
Slide 27 text
Error.prototype.stack
● Non-standard property
● Different formats
Slide 28
Slide 28 text
console.log(new Error().stack)
Error
at :1:13
Chrome
Features
● Wraps the lifecycle methods into a try...catch block
● Configurable error handler
● Passes component name, method, props and Error
Object to the handler
Slide 61
Slide 61 text
MicheleBertoli/react-poop
import poop from 'react-poop'
class MyComponent extends React.Component {
...
}
export default poop(MyComponent)
Slide 62
Slide 62 text
Features
● Wraps the render method into a try...catch block
● Works with stateless functional components
● Nonsense
Erdux
“Unpredictable state container for JavaScript apps”
Redux-inspired state container based on Error
Objects and the Global handler.
Slide 81
Slide 81 text
Redux Erdux
Dispatch Actions Errors
Update Subscription window.onerror
State management Reducers Reducers
Useful Yes No
Slide 82
Slide 82 text
Erdux
class IncrementAction extends Error {}
const increment = document.getElementById('increment')
increment.addEventListener(
'click',
() => { throw new IncrementAction() }
)
Slide 83
Slide 83 text
Erdux
const reducer = (state, error) => {
switch (error.constructor) {
case IncrementAction:
return state + 1
default:
return state
}
}
Slide 84
Slide 84 text
Approved
Slide 85
Slide 85 text
Recap
Slide 86
Slide 86 text
FAQ
Are you telling me to put try...catch blocks
everywhere? NOPE!
Slide 87
Slide 87 text
Proper Error Handling
● Your code will fail
● Find the right balance between performance and
error handling
● Think about the users first
● Never stop experimenting (and sharing)