When things go wrong, get errors right!

When we build React applications, the fun part is always the happy path: when everything works! But let's face it, sometimes things go wrong, and error handling can be a tricky topic. Don't worry, though - we've got you covered! In this talk, we'll dive into the world of error handling in React and explore how to make it less daunting and more enjoyable.

Transcript

1. @glnnrys · glennreyes.com When things go wrong … get errors right!
2. Glenn Reyes @glnnrys · glennreyes.com Software Engineer, Tech Speaker & Workshop Instructor
5. TypeError: Cannot read property 'name' of undefined at Slide.render (Slide.tsx:10) at Slide.render (Slide.tsx:11) at Slide.render (Slide.tsx:11) at Slide.render (Slide.tsx:11) ...
6. @glnnrys · glennreyes.com When things go wrong … get errors right!
7. Glenn Reyes @glnnrys · glennreyes.com Software Engineer, Tech Speaker & Workshop Instructor
8. RangeError: Maximum call stack size exceeded
10. That’s it! Thank you, next please! @glnnrys · glennreyes.com linktr.ee/glennreyes
17. Errors
18. Let’s talk facts.
19. Errors are shipped to production.
23. Errors can lead to confusion and frustration.
24. Errors can lead to loss of data.
25. Errors can lead to loss of trust.
26. Errors can lead to loss of time
27. Errors can lead to loss of 💰
28. Error Handling
29. More ❤ for Error Handling
30. Better Error Handling = Better UX
33. @typescript-eslint/strict-boolean-expressions
36. ✅
37. Errors in React
38. Next Remix
39. Error Boundary
41. https://www.meticulous.ai/blog/react-error-boundaries-complete-guide
43. “Class components are still supported by React, but we don’t recommend using them in new code.” - react.dev
45. Error Messages
46. github.com/yoavbls/pretty-ts-errors
47. github.com/mattpocock/ts-error-translator
48. github.com/usernamehw/vscode-error-lens
49. Error Messages
50. Better Error Messages
51. Whoops! Something went wrong.
52. Whoops Something went wrong! The third-party service you’re trying to connect with is not responding, so we can’t process your data. Try again later. Close
53. https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f
54. https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f
55. Error Messages in Forms
56. Avoid premature error messages
60. Use error styling for errors only
65. Bottom line Wait until a user moves on Provide any constraints upfront Use an asterisk for required fields Reserve error-like visual treatments for critical system- status messages
66. Let’s wrap up
67. Establish a cross-disciplinary team dedicated to error management.
68. Error handling is everyone’s responsibility.
69. Review errors. Regularly.
70. Be empathetic to the user. Avoid generic error messages
71. Whoops! Something went wrong.
72. Thank You! @glnnrys · glennreyes.com linktr.ee/glennreyes