Use react-error-boundary to isolate errors #5731
Description
What specific problem does this solve?
Currently we're not using any error boundaries, this makes debugging harder because if one part of the UI crashes, the whole thing crashed with no easy way of identifying which part causes the error immediately.
This also leads to poor UX because if the UI crashes, the users will be greeted with blank screen because the UI fails to render entirely. Adding error boundary will make it so that only the part that is broken shows the error, instead of crashing the whole extension.
Additional context (optional)
I did a little bit of playing around with it, of course it should be done more granular instead of only at the top level, but for the sake of simplicity I did it at the top level.
It's much better for debugging than facing with this empty screen and having to open the console – and reproduce it, because if you didn't open the console while it happened there will be no log.
Roo Code Task Links (Optional)
No response
Request checklist
- I've searched existing Issues and Discussions for duplicates
- This describes a specific problem with clear impact and context
Interested in implementing this?
- Yes, I'd like to help implement this feature
Implementation requirements
- I understand this needs approval before implementation begins
How should this be solved? (REQUIRED if contributing, optional otherwise)
This will wrap some components with ErrorBoundary, this could be also useful for sending error logs to Sentry because sometimes the error doesn't immediately make the UI crashes, but it is there and it's better to get fixed soon.
An example for this issue: I had troubles with parseCommand not parsing correctly and it ended up crashing like the image above, but if I wrap the ChatView with ErrorBoundary it works completely fine, I can choose to ignore this error for now, but it'd be useful to have something like Sentry automatically send error report when these component-level errors happen.
How will we know it works? (Acceptance Criteria - REQUIRED if contributing, optional otherwise)
Given i'm running some task with Roo
When error happened for various different reasons
Then it should be displayed locally / component-level instead of causing the whole extension to crash with no error messages
Technical considerations (REQUIRED if contributing, optional otherwise)
We need to go through the whole webview-ui source to wrap the components where it's most likely going to be needed, such as ChatView, settings, etc.
As starter, we could probably get away with wrapping bigger chunks, as long as it doesn't crash the whole thing.
Trade-offs and risks (REQUIRED if contributing, optional otherwise)
I haven't considered any alternatives yet because I've always used react-error-boundary. There shouldn't be any performance impact either, but I can't say for sure.
We need to be careful not to overdone it so we won't ended up with a bunch of ErrorBoundary wrapped components where it doesn't make sense to do so.