iodide-project / iodide-project/iodide
catch React uncaught errors on the top level eval frame container and render a KernelErrorPane msg
- Dominant language
- JavaScript
- Stars
- 1.5k
- Forks
- 145
- PR merge metrics
- No merged PRs in 30d
Description
This will likely be a follow-on to #1106, but fairly critical to closing the loop on usability issues we haven't encountered. Filing to remind myself to tackle it.
Because of changes made in React 16, we can now catch all uncaught errors happening within React. So issues such as the `window` inspection security error and other future unforseen bugs relating to React rendering can be caught at the top level, and we can surface a useful error message of some kind.
From a end user perspective, these types of bugs usually just completely wreck the iframe, with absolutely no useful or graceful catch to alert the user what's happening. Without this, the screen simply goes blank.
I had originally envisioned #1106 as a way to helpfully alert the user that indeed something bad has happened, but I am now realizing we can easily add some simple messaging on all the panes. Maybe something like this:
```
The kernel has encountered the following error:
${error here}
Please file an [issue](link to github) and we'll get right to fixing it.
You can still save your changes to the editor.
[button: Save and Reload]
```
I think this would actually be a pretty good first issue for someone who is familiar with React, or wants to get more familiar. It involves (1) adding an `ErrorPane` component to the `eval-frame/panes` directory and (2) using `componentDidCatch` to the `EvalContainer` and gracefully show the error message rendered by `ErrorPane`.
Contributor guide
Research direction
Start in the eval-frame/panes directory and locate the EvalContainer component. Review how the top-level eval frame renders its panes, then use React's componentDidCatch to show an ErrorPane with the kernel error message instead of a blank screen. Done means uncaught React rendering errors produce a graceful, useful message to the user.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100