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. When things go wrong,


    get errors right!
    @glnnrys

    View Slide

  2. When things go wrong,


    get errors right!
    @glnnrys

    View Slide

  3. Glenn Reyes
    Developer Relations @ Kadena


    React, GraphQL, TypeScript & Design Systems
    @glnnrys

    View Slide

  4. View Slide

  5. View Slide

  6. 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 Slide

  7. When things go wrong,


    get errors right!
    @glnnrys

    View Slide

  8. Glenn Reyes
    Developer Relations @ Kadena


    React, GraphQL, TypeScript & Design Systems
    @glnnrys

    View Slide

  9. RangeError: Maximum call stack size exceeded

    View Slide

  10. View Slide

  11. That’s it!


    Thank you, next.
    Glenn Reyes · Developer Relations @ Kadena

    @glnnrys · glennreyes.com

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. Errors

    View Slide

  19. Let’s talk facts.

    View Slide

  20. Errors are shipped

    to production.

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. Errors can lead to

    confusion and frustration.

    View Slide

  25. Errors can lead to

    loss of data.

    View Slide

  26. Errors can lead to

    loss of trust.

    View Slide

  27. Errors can lead to

    loss of time

    View Slide

  28. Errors can lead to

    loss of 💰

    View Slide

  29. Error Handling

    View Slide

  30. More ❤ for Error Handling

    View Slide

  31. Better Error Handling


    =


    Better UX

    View Slide

  32. View Slide

  33. View Slide

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

    View Slide

  35. View Slide

  36. View Slide


  37. View Slide

  38. Errors in React

    View Slide

  39. Next Remix

    View Slide

  40. Error Boundary

    View Slide

  41. View Slide

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

    View Slide

  43. View Slide

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

    View Slide

  45. View Slide

  46. Error Messages

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. Error Messages

    View Slide

  51. Better Error Messages

    View Slide

  52. Whoops! Something went wrong.

    View Slide

  53. 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 Slide

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

    View Slide

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

    View Slide

  56. Error Messages in Forms

    View Slide

  57. Avoid premature error messages

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. Use error styling for errors only

    View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. 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 Slide

  67. Let’s wrap up

    View Slide

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

    View Slide

  69. Error handling is

    View Slide

  70. Review errors. Regularly.

    View Slide

  71. Be empathetic to the user.


    Avoid generic error messages

    View Slide

  72. Whoops! Something went wrong.

    View Slide

  73. Thank you!
    Glenn Reyes · @glnnrys · glennreyes.com


    Developer Relations @ Kadena



    View Slide