Error Handling in React 16

There is a new component lifecycle method componentDidCatch() in react 16 which will get called when there is an error in child component. This presentation explain how we can use Error Boundary to capture errors

Transcript

1. Error Handling in React 16
2. John Francis UI Lead at @john1jan
3. Playbook
4. Inshorts Myntra Groww
5. Developers spend 50% of their time finding errors and fixing them Cambridge University
6. Why error handling is important ? Unhappy Customers Unhappy Management Unhappy Developers
7. What’s the problem? • White Screen of death ⚰(Error in one small component renders a blank page) • Whole React component tree is crashed . • Very difficult to track the issue and debug the code in production
8. window.onerror • Not supported by all the browsers • Does not capture Cryptic “Script error” “Script error” : Happens in Firefox, Safari, and Chrome when an exception violates the browser's same-origin policy - i.e. when the error occurs in a script that's hosted on a domain other than the domain of the current page.
9. try-catch • It only works with imperative code • Doesn’t capture error due to state change in react component
10. Others • react-transform-catch-errors • react-guard • react-component-errors • react-safe-render
11. ComponentDidCatch() React 16
12. Parent Component Child Component Super Dad (react 16)
13. Enough show me the code
14. Where to use ErrorBoundary ? • Root Component (must) • Main Sections of the page like Header, Footer and Middle Content • Stand alone components like Chat Window, Search Bar • Wherever you suspect that the error might occur The granularity of error boundaries is up to you. You can wrap top level route components, you might also wrap components that might contain obscure code. Its up to you how to best handle protecting against application crashes.
17. componentDidCatch ?
20. When does error boundary catch errors ? • When there is an error in render • In lifecycle methods • In Constructor • Whole tree below them
21. When does it wont catch ? • Errors in the same component • On event handlers unless error is due to state change • Error in try catch block unless error is due to state change • Error in asynchronous code unless error is due to state change • Server side rendering
22. Demo
23. Error boundaries are a mechanism to prevent React from getting into an inconsistent state when it doesn't know what to render due to an error. -Dan Abramov
24. #11334 - componentDidCatch is not getting called when there is an error in promise #11415 - Why are Error Boundaries not triggered for event handlers? #11409 - componentDidCatch not fired as expected More information https://github.com/facebook/react/issues/
25. componentDidCatch(error, stack){ } error: actual error object stack: component stack trace of the error
26. Logging Errors Sentry Any Tracking tool like GA, Mixpanel, Firebase You can use your own Database
27. @john1jan Thank You @john1jan https://github.com/john1jan/error-handling-in-react16 Example code: More info: https://reactjs.org/docs/error-boundaries.html