This document discusses how to gracefully handle errors with React. It defines what errors are and different types of errors. It introduces error boundaries in React, which are components that catch JavaScript errors anywhere in their child component tree. Error boundaries display a fallback UI and prevent errors from crashing the whole application. The document recommends making reusable error boundary components and discusses best practices around error handling in React.

1. How to gracefully handle errors with React
Ishank Bahl
github.com/ishankbahl
twitter.com/ishankbahl97

2. Errors
● Loss of revenue
● Unhappy customers
● Unhappy developers

3. Cost of Errors
● Bugs cost economy $312 billion per year
● Developers spend 50% of their programming time finding and fixing bugs
Source: Cambridge University

4. What is an Error?
● Incorrect result
● Unintended behaviour
● Inconsistent state

5. Error Handling
● Give a feedback to the users
● Discover errors quickly
● Store informations to reproduce problems

6. Types of Errors
● Unexpected
● Operational

7. Unexpected Errors

8. Challenges of Errors in React
● Uncaught errors result in unmounting of the whole React component tree.
● Errors don’t bubble up in components. ( Why not try...catch )
● Try...catch suits imperative code, react components are declarative.

9. Error Boundaries
● Catch JavaScript errors
● Log these errors
● Display Fallback UI

10. Lifecycle methods

11. ● Invoked after an error has been thrown
● Side-effects are permitted
● Should be used for logging errors
Example :-

12. ● Invoked after an error has been thrown
● Should return a value to update state

14. Used as a regular component

15. ● Error boundaries catch errors anywhere in their child component tree
● They catch errors during rendering, in lifecycle methods, and in constructors
of the whole tree below them. (not in event handlers, async code etc)

16. Error Boundaries
Best way to use error boundaries is to make a reusable component.

17. Demo
codepen link

19. Error Boundaries
● Error Boundaries do not catch Errors thrown in Event handlers, Async Code
● As these don’t occur during rendering cycle
● Use try...catch for event handlers

20. Operational errors

21. Global Errors
● Generics Errors which come back from backend
● Like user is not signed in
● Should be stored in outermost stateful component
● Design implementation can be anything

24. Just pass setError down from Application.js to set a global error

25. Bonus

26. 404 Pages

27. 404 Pages

28. Thank you
Ishank Bahl
github.com/ishankbahl
twitter.com/ishankbahl97