Error message UI by maxelkins · Pull Request #1485 · RaspberryPiFoundation/editor-ui

maxelkins · 2026-05-29T16:54:40Z

Summary

~~Moves ErrorMessage to input side of editor (TBC)~~
Adds FriendlyErrorMessage component to house the output from pfem
Adds FriendlyErrorMessage to ErrorMessage (currently hidden)

Notes

Moving the error message here might be too much and confuse feedback - so might move out of this PR
HJ: new branch created by rebasing this to Add improved error messaging to python projects #1483

Copilot

Pull request overview

This PR relocates the Python error message UI from inside the runner panels (Skulpt/Pyodide) to the editor input pane (above the run bar), introduces a new FriendlyErrorMessage component (currently stubbed and feature-gated behind a hardcoded fem = false flag), and restyles ErrorMessage with the design-system typography mixin, a new red color scheme, and a cancel icon.

Changes:

Move <ErrorMessage /> out of SkulptRunner / PyodideRunner and into EditorInput; update related tests.
Add FriendlyErrorMessage component + stub API + SCSS, gated by a temporary boolean in ErrorMessage.
Restyle ErrorMessage (new colors, typography mixin, cancel icon, structural split into __python / __fem / __error).

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/web-component.html	Prettier-style reformatting; also comments out `use_editor_styles` attribute (looks unrelated/accidental).
src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx	Remove `ErrorMessage` rendering and `isOutputOnly` selector.
src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js	Replace two error-display tests with single negative assertion.
src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx	Remove `ErrorMessage` rendering in both layouts.
src/components/Editor/EditorInput/EditorInput.jsx	Render `<ErrorMessage />` inside the per-panel `Tabs` loop above `RunBar`.
src/components/Editor/EditorInput/EditorInput.test.js	Mock `EditorPanel` and add test for error placement relative to run bar.
src/components/Editor/ErrorMessage/ErrorMessage.jsx	Add cancel icon, restructure markup, gate `FriendlyErrorMessage` behind `fem = false`.
src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx	New component fetching a friendly error message via stubbed API.
src/components/Editor/FriendlyErrorMessage/friendlyErrorMessageApi.stub.js	New stub API returning a hardcoded friendly error message.
src/assets/stylesheets/ErrorMessage.scss	Switch to design-system tokens/typography mixin; add `__python` / `__fem` / `__error` styles.
src/assets/stylesheets/FriendlyErrorMessage.scss	New styles for friendly error message.
src/assets/stylesheets/InternalStyles.scss	Register new SCSS file; Prettier reformatting.
src/assets/stylesheets/EditorPanel.scss	Prettier reformatting only.
src/assets/icons/cancel_FILL.svg	New cancel/error icon asset.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

        newWebComp.setAttribute("with_projectbar", "true");
        newWebComp.setAttribute("with_sidebar", "true");
-        newWebComp.setAttribute("use_editor_styles", "true");
+        // newWebComp.setAttribute("use_editor_styles", "true");


    <div className={`error-message error-message--${settings.fontSize}`}>
-      <pre ref={message} className="error-message__content"></pre>
+      <div className="error-message__python">
+        <CancelFillIcon />


                />
              </TabPanel>
            ))}
+            <ErrorMessage />


Part of RaspberryPiFoundation/digital-editor-issues#1448 ### Changes - Added pfem package and required changes for it to run properly - Added dompurify package for sanitising HTML contents that are returned from pfem - Added `friendly_errors_enabled` attribute set to `false` by default and added to redux - The new redux state read by PythonRunner and passed as a prop to both PyodideRunner and SkulptRunner - Added pfem logic to both runners and stored the friendly error html in redux - Updated ErrorMessage component to display the friendly errors conditionally - For now, CSS used to restrict to displaying title and summary parts of friendly error html - pfem will be updated so that we can choose parts before storing in redux - ⚠️ The error messages will be formatted in another PR: #1485 ### Behaviour - When the editor-wc in the host app has `friendly_errors_enabled` attribute not set or set to `false`, it shows the original error. <img width="450" alt="Screenshot 2026-05-28 at 14 59 03" src="https://github.com/user-attachments/assets/4bff14ca-40cd-4a3e-b76e-98a69a45301e" /> - When the editor-wc in the host has `friendly_errors_enabled` attribute set to `true`, it shows the original error followed by title and summary of the new friendly error. <img width="500" alt="Screenshot 2026-06-01 at 15 16 33" src="https://github.com/user-attachments/assets/68b55121-0051-4169-84db-4abb9df4ca74" /> ### Notes on using the pfem ESM in Jest - Tried adding it to `jest.transformIgnorePatterns` in package.json, but resulted in a cascade of errors from plotly - Just moved `three` to `jest.transformIgnorePatterns` from `scripts.test` - Added global jest mocks for pfem and plotly to `setupTests.js` - Also imported plotly to `PyodideRunner/VisualOutputPane.test.js` - <- with a CJS build of pfem, these changes may be unnecessary

maxelkins · 2026-06-08T16:20:48Z

Closing off now @cocomarine continuing on #1487

Part of RaspberryPiFoundation/digital-editor-issues#1448 ### Changes - Added pfem package and required changes for it to run properly - Added dompurify package for sanitising HTML contents that are returned from pfem - Added `friendly_errors_enabled` attribute set to `false` by default and added to redux - The new redux state read by PythonRunner and passed as a prop to both PyodideRunner and SkulptRunner - Added pfem logic to both runners and stored the friendly error html in redux - Updated ErrorMessage component to display the friendly errors conditionally - For now, CSS used to restrict to displaying title and summary parts of friendly error html - pfem will be updated so that we can choose parts before storing in redux - ⚠️ The error messages will be formatted in another PR: #1485 ### Behaviour - When the editor-wc in the host app has `friendly_errors_enabled` attribute not set or set to `false`, it shows the original error. <img width="450" alt="Screenshot 2026-05-28 at 14 59 03" src="https://github.com/user-attachments/assets/4bff14ca-40cd-4a3e-b76e-98a69a45301e" /> - When the editor-wc in the host has `friendly_errors_enabled` attribute set to `true`, it shows the original error followed by title and summary of the new friendly error. <img width="500" alt="Screenshot 2026-06-01 at 15 16 33" src="https://github.com/user-attachments/assets/68b55121-0051-4169-84db-4abb9df4ca74" /> ### Notes on using the pfem ESM in Jest - Tried adding it to `jest.transformIgnorePatterns` in package.json, but resulted in a cascade of errors from plotly - Just moved `three` to `jest.transformIgnorePatterns` from `scripts.test` - Added global jest mocks for pfem and plotly to `setupTests.js` - Also imported plotly to `PyodideRunner/VisualOutputPane.test.js` - <- with a CJS build of pfem, these changes may be unnecessary

❗ This branch was created by rebasing #1485 to #1483. ### How to enable friendly errors - editor-standalone (for editor): add `friendly_errors_enabled: true` to `options` in src/components/Editor/Project/Project.jsx ### Decisions made upon adding [pfem v. 0.7.0](https://github.com/RaspberryPiFoundation/python-friendly-error-messages/releases) - For now, we are showing `title` and `summary` of friendly errors (potentially `why` bit might also be added later on) - `ErrorMessage` now optionally includes `FriendlyErrorMessage` - The new attribute added and set to `true` in in src/web-component.html (for http://localhost:3011/web-component.html) - Moved `ErrorMessage` to the bottom of input panel above Run button - In mobile screens (`MobileProject`), when the error is triggered after run, the input panel becomes the selected tab so that users can see the error (if no error triggered, the output panel becomes selected) - For Skulpt runner, [the logic of showing error when not in output only mode is now removed](https://github.com/RaspberryPiFoundation/editor-ui/pull/1487/changes#diff-b905586781d8ed679facb77f80b18decb431bb0c1c9576b34e43745c3348a6ab), keeping the same behaviour of no error in output only mode. - For Pyodide runner, [a logic for showing error message when in output only mode](https://github.com/RaspberryPiFoundation/editor-ui/pull/1487/changes#diff-9950a7b6007ef96b6e4ca4e8e0ad4461249437b7121f74511804b3b0139ada2a) is now added - As in `WebcomponentProject.jsx`, EditorInput is not rendered at all in output only mode, resulting in `ErrorMessage` displayed only by Output panel of Pyodide - When there are multiple Python files: - An error from `main.py` shows first. - When there are errors only in files other than `main.py`, they will show (one at a time). - Whatever error is shown will stay even when you select other tabs within the input panel. ### WIP and future pfem - More discussion needed in terms of the possibility of adding `why` of friendly error, copy and UI ### Screen recordings of editor with friendly messages - Multiple python files https://github.com/user-attachments/assets/a70727a4-121a-4c05-859f-f60f2cc29046 - Responsiveness https://github.com/user-attachments/assets/6697cfd4-fca9-4c04-af66-92b181a8e34d - Mobile screen (< 600 px) https://github.com/user-attachments/assets/48736879-ff09-439d-8b1f-fb633a215333 --------- Co-authored-by: Max Elkins <max.elkins@raspberrypi.org> Co-authored-by: Greg Annandale <greg@raspberrypi.org> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

maxelkins added 3 commits May 29, 2026 16:05

refactor: remove defaulting to editor styles

e04bbd6

refactor: move error message to EditorInput

7eb9020

feat: add initial FriendlyErrorMessage UI component into ErrorMessage

3bb7922

Copilot AI review requested due to automatic review settings May 29, 2026 16:54

Copilot started reviewing on behalf of maxelkins May 29, 2026 16:54 View session

maxelkins temporarily deployed to previews/1485/merge May 29, 2026 16:54 — with GitHub Actions Inactive

maxelkins marked this pull request as draft May 29, 2026 16:55

Copilot AI reviewed May 29, 2026

View reviewed changes

cocomarine mentioned this pull request Jun 1, 2026

Add improved error messaging to python projects #1483

Merged

revert: move error back to output panel

384c80a

maxelkins temporarily deployed to previews/1485/merge June 2, 2026 08:42 — with GitHub Actions Inactive

Merge branch 'main' into error-message-ui

4d768af

cocomarine deployed to previews/1485/merge June 3, 2026 07:56 — with GitHub Actions View deployment

cocomarine mentioned this pull request Jun 3, 2026

Improve friendly error message #1487

Merged

maxelkins closed this Jun 8, 2026

cocomarine deleted the error-message-ui branch July 2, 2026 21:23

Navigation Menu

Uh oh!

Error message UI - #1485

Error message UI#1485
maxelkins wants to merge 5 commits into
mainfrom
error-message-ui

maxelkins commented May 29, 2026 •

edited by cocomarine

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

maxelkins commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

maxelkins commented May 29, 2026 • edited by cocomarine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

maxelkins commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maxelkins commented May 29, 2026 •

edited by cocomarine

Loading