Upgrade to Pro — share decks privately, control downloads, hide ads and more …

When things go wrong, get errors right!

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.

Glenn Reyes

May 09, 2023
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

Transcript

  1. @glnnrys · glennreyes.com
    When things go wrong …
    get errors right!

    View full-size slide

  2. Glenn Reyes
    @glnnrys · glennreyes.com
    Software Engineer, Tech Speaker &
    Workshop Instructor

    View full-size slide

  3. 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)
    ...

    View full-size slide

  4. @glnnrys · glennreyes.com
    When things go wrong …
    get errors right!

    View full-size slide

  5. Glenn Reyes
    @glnnrys · glennreyes.com
    Software Engineer, Tech Speaker &
    Workshop Instructor

    View full-size slide

  6. RangeError: Maximum call stack size exceeded

    View full-size slide

  7. That’s it!
    Thank you, next please!
    @glnnrys · glennreyes.com
    linktr.ee/glennreyes

    View full-size slide

  8. Let’s talk facts.

    View full-size slide

  9. Errors are shipped
    to production.

    View full-size slide

  10. Errors can lead to
    confusion and frustration.

    View full-size slide

  11. Errors can lead to
    loss of data.

    View full-size slide

  12. Errors can lead to
    loss of trust.

    View full-size slide

  13. Errors can lead to
    loss of time

    View full-size slide

  14. Errors can lead to
    loss of 💰

    View full-size slide

  15. Error Handling

    View full-size slide

  16. More ❤ for Error Handling

    View full-size slide

  17. Better Error Handling
    =
    Better UX

    View full-size slide

  18. @typescript-eslint/strict-boolean-expressions

    View full-size slide

  19. Errors in React

    View full-size slide

  20. Error Boundary

    View full-size slide

  21. https://www.meticulous.ai/blog/react-error-boundaries-complete-guide

    View full-size slide

  22. “Class components are still supported by React, but we
    don’t recommend using them in new code.” - react.dev

    View full-size slide

  23. Error Messages

    View full-size slide

  24. github.com/yoavbls/pretty-ts-errors

    View full-size slide

  25. github.com/mattpocock/ts-error-translator

    View full-size slide

  26. github.com/usernamehw/vscode-error-lens

    View full-size slide

  27. Error Messages

    View full-size slide

  28. Better Error Messages

    View full-size slide

  29. Whoops! Something went wrong.

    View full-size slide

  30. 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

    View full-size slide

  31. https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f

    View full-size slide

  32. https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f

    View full-size slide

  33. Error Messages in Forms

    View full-size slide

  34. Avoid premature error messages

    View full-size slide

  35. Use error styling for errors only

    View full-size slide

  36. 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

    View full-size slide

  37. Let’s wrap up

    View full-size slide

  38. Establish a cross-disciplinary team
    dedicated to error management.

    View full-size slide

  39. Error handling is
    everyone’s responsibility.

    View full-size slide

  40. Review errors. Regularly.

    View full-size slide

  41. Be empathetic to the user.
    Avoid generic error messages

    View full-size slide

  42. Whoops! Something went wrong.

    View full-size slide

  43. Thank You!
    @glnnrys · glennreyes.com
    linktr.ee/glennreyes

    View full-size slide