Best Approach for error handling
Hi guys, what is the right approach for error handling, would really appreciate if someone can help me think this through
1. Using Context api to manage error state globally
2. Managing error locally at component level
6 Replies
The front end is the tricky bit IMHO.
I think at a function/promise level.
It really really depends what is going on the page let's say you want 3 things to happen and 1 of them is critical for the user to achieve something, like buying a product what they want, and 2 of them are trivial, like changing the theme or, logging to Google tag manager.
If they can't do their action you need to tell the user, possibly give them the ability to retry or point them to FAQs etc. For everything else they don't need to know don't freak them out.
In all scenarios you want to know. So you want to wrap everything that could possibly error, or just catch all your promises and async stuff send the errors to something like sentry or datadog ideally with enough contextual info, or even better uploaded source maps, so you can figure out what went wrong and how to fix it.
If you do this uncaught errors should be rare.
makes sense, what would your preference be for normal api errors and success messages if they are not doing 2 or 3 things
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Are you talking about submitting forms for example?
You do different things in different scenarios, so form success would redirect the user or show a success toast message and the failure would show an error message as close to the problem as possible, so if it was a submission error right next to the submit button, if it was a validation issue right next to the input with the issue and scroll the user to the problem.
May be I'm not up to date with the latest way of using error boundaries, onCaughtError or whatever it's called only works on old class style components so I only ever used it top level. But if that ever catches something it means there is a promise without a catch or something else that I probably should fix.
I should clarify you might be doing 2-3 things in the code which could throw an error and only 1 of them the user cares about. It's not the user doing 1 or more things.
Thanks for clarifying this, I think keeping the state close to the problem makes sense, form errors can be definitely at a local level
one last question
Let's say I have a page and that page has a form component
Do you prefer to call the handleSubmit of the form at the parent level/page level or at the form level?
Form validation messages aren't strictly speaking JS errors.
Field by field, validate on field blur, not on change. Always validate on blur because if you set the aria alert stuff you don't want screen readers screaming errors on every key stroke
Let users know they need to fix something as soon as possible not 3 pages later