Show error message on React render error instead of empty screen #843
Conversation
chrarnoldus
requested review from
catrielmuller,
Copilot,
hassoncs and
markijbema
|
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an error boundary to provide a user-visible error message when a React render error occurs, replacing the previous empty screen behavior. Key changes include:
- Addition of the KiloCodeErrorBoundary component in TypeScript.
- Integration of the error boundary into the main App component.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| webview-ui/src/kilocode/KiloCodeErrorBoundary.tsx | Introduces a React error boundary component that displays error details. |
| webview-ui/src/App.tsx | Wraps the application component tree with the error boundary. |
| this.state = {} | ||
| } | ||
|
|
||
| static getDerivedStateFromError(error: unknown) { |
There was a problem hiding this comment.
Consider adding a componentDidCatch lifecycle method to log error details (error and errorInfo) for better debugging, as getDerivedStateFromError only updates the state.
There was a problem hiding this comment.
we don't have telemetry currently
hassoncs
left a comment
hassoncs
left a comment
There was a problem hiding this comment.
Great idea! I'm kinda shocked we didn't have something like this already!
markijbema
left a comment
markijbema
left a comment
There was a problem hiding this comment.
Do you think this fixes the blank screen of death? That would at least make debugging the root cause a lot easier
That's what I hope. Throwing an exception from render code did result in a blank screen. |
|
your test looks really good one it is in F5/debug mode, but did you try building the application and trigger the error? Correct me if I'm wrong, but your stack trace will not be readable because of production minification and such. |
|
The stack trace won't be readable, but the message will be I hope. |
|
You could try this library: https://www.stacktracejs.com/ but I'm not sure if we ship the required source maps (we probably should though) |
awesome thank you for your help! |
#735