Improve friendly error message by cocomarine · Pull Request #1487 · RaspberryPiFoundation/editor-ui

cocomarine · 2026-06-03T08:16:08Z

❗ 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
editor-ui (for http://localhost:3011/web-component.html): add newWebComp.setAttribute("friendly_errors_enabled", "true"); to createWebComponent in src/web-component.html

Decisions made upon adding pfem v. 0.7.0

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
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, 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 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

…mary

…icitly rawTraceback contains `<exec>` instead of `main.py` as the filename, for example, we can now override the filename passed to friendlyExplain()

…iFoundation/editor-ui into 1448-and-ui-branches-combined

PFEM 0.6.0 markup has improved accessibility attributes, such as aria labels and roles. Has no effect on the styling (since classes, and the markup as a whole, remain the same).

…iFoundation/editor-ui into 1448-and-ui-branches-combined

Copilot

Pull request overview

Updates the Python error UI to support pfem v0.7.0 “friendly” error messages, and repositions error display so it appears in the input panel (and appropriately in output-only mode), including mobile tab-selection behavior.

Changes:

Bumps @raspberrypifoundation/python-friendly-error-messages to 0.7.0 and updates runners to use the new adapter + sections: ["title","summary"].
Introduces FriendlyErrorMessage and refactors ErrorMessage styling/markup; moves ErrorMessage rendering into EditorInput.
Adds/updates unit + Cypress coverage for friendly errors and mobile error-tab selection.

Reviewed changes

Copilot reviewed 25 out of 28 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`.yarnrc.yml`	Pre-approves the pfem package for Yarn’s restricted installs.
`package.json`	Bumps pfem dependency to `0.7.0`.
`yarn.lock`	Lockfile update for pfem `0.7.0`.
`src/web-component.html`	Web component test page formatting tweaks and attribute changes.
`src/utils/setupTests.js`	Updates Jest mock exports for pfem adapter changes.
`src/PyodideWorker.js`	Adds `rawTraceback` to worker error payload for friendlier parsing.
`src/components/Mobile/MobileProject/MobileProject.jsx`	Switches mobile tabs to input when Python errors occur after running.
`src/components/Mobile/MobileProject/MobileProject.test.js`	Adds tests for mobile error display/tab selection.
`src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx`	Updates pfem adapter usage and friendlyExplain options; removes runner-local ErrorMessage rendering.
`src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js`	Removes outdated error-message placement tests.
`src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx`	Updates pfem adapter usage; uses `rawTraceback`; shows ErrorMessage only in output-only mode.
`src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js`	Updates error message expectations and adds friendly-error edge case tests.
`src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx`	New component to render sanitized friendly error HTML.
`src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js`	New tests for friendly error rendering + sanitization.
`src/components/Editor/ErrorMessage/ErrorMessage.jsx`	Refactors error UI markup; embeds FriendlyErrorMessage and icon.
`src/components/Editor/ErrorMessage/ErrorMessage.test.js`	Updates assertions for new class naming.
`src/components/Editor/EditorInput/EditorInput.jsx`	Renders ErrorMessage at the bottom of the input panel (above Run).
`src/components/Editor/EditorInput/EditorInput.test.js`	Adds a test asserting error message appears in EditorInput.
`src/assets/stylesheets/InternalStyles.scss`	Includes FriendlyErrorMessage styles in internal stylesheet bundle.
`src/assets/stylesheets/FriendlyErrorMessage.scss`	New styling for pfem HTML elements (title/summary/code/file/line).
`src/assets/stylesheets/ErrorMessage.scss`	Updates styling and class structure for new ErrorMessage layout.
`src/assets/stylesheets/EditorPanel.scss`	Formatting/cleanup only.
`src/assets/icons/cancel_FILL.svg`	New icon used in ErrorMessage header row.
`src/assets/error_file.svg`	New asset used to decorate file references in friendly errors.
`cypress/helpers/editor.js`	Updates selectors and adds helper for friendly error message container.
`cypress/fixtures/copydeck.json`	Adds a fixture copydeck for deterministic friendly-error Cypress tests.
`cypress/e2e/spec-wc-skulpt.cy.js`	Adds Cypress coverage for friendly errors in Skulpt.
`cypress/e2e/spec-wc-pyodide.cy.js`	Adds Cypress coverage for friendly errors in Pyodide.

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

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

zetter-rpf · 2026-06-12T10:27:18Z

+        loadCopydeckFor(navigator.language || "en", {
+          base: `${process.env.PUBLIC_URL}/python-error-copydecks/`,
+        });


We normally use locale from the i18n library rather than the navigator language - is this intentional here? I'm not sure if it will cause any problems - does loadCopydeckFor always fall back to en anyway?

zetter-rpf · 2026-06-12T10:29:15Z

        newWebComp.setAttribute("host_styles", JSON.stringify([]));
-        const scratchApiEndpoint = new URL(".", window.location.href)
-          .href
-          .replace(/\/$/, "");
+        const scratchApiEndpoint = new URL(
+          ".",
+          window.location.href,
+        ).href.replace(/\/$/, "");
        newWebComp.setAttribute("scratch_api_endpoint", scratchApiEndpoint);
-        
+
        queryParams.forEach((value, key) => {


I don't understand the reasons for these changes and a few others - do you have your linter set up correctly in your editor? Or is there a reason this file wasn't properly linted before?

Just makes it a bit harder to see what you actually have changed

zetter-rpf

Great, I like the tests you've added - clear and easy to see what they are testing.

The PR was harder to review because there are a lot of changes across different files so it's harder for me to see that we're doing everything you said in the PR description - I don't think it's worth splitting out now, but for next time it could be helpful to think about how to break something like this up into logical commits and/or PRs as your working through it.

I added a couple of minor comments, but nothing blocking.

cocomarine and others added 23 commits May 28, 2026 14:48

install pfem

188bead

update webpack config to disable ESM strict resolution for pfem

e8ed800

add pfem to skulpt runner WIP pyodide runner

cfa91e6

Merge branch 'main' into 1448-add-improved-error-messaging

e594994

fix pyodide error

088617a

Merge branch 'main' into 1448-add-improved-error-messaging

ffb0c84

add friendly error enabled attribute

3ae80e6

fix errors due to ESM to CJS transform

cb9f905

remove unnecessary mock

4bf16ec

add friendlyError to redux and show in ErrorMessage

9af9cfe

minor fixes

7c05ba7

update editorslice and errormessage tests

c1b803f

update pyodide and skulpt runner tests

0958129

plain text friendly error for now

6ff35ec

add dompurify

0ac2991

dispatch friendly error html and use css to restrict to title and sum…

64c2c4c

…mary

update runner tests

4fda69e

update editorslice test

3dc2a2e

stub out friendlyerror html in tests

5be1299

refactor: remove defaulting to editor styles

113797f

refactor: move error message to EditorInput

9a5b56c

feat: add initial FriendlyErrorMessage UI component into ErrorMessage

4971474

revert: move error back to output panel

3dbfc83

cocomarine temporarily deployed to previews/1487/merge June 3, 2026 08:16 — with GitHub Actions Inactive

use FriendlyErrorMessage component and update styling

626bd41

cocomarine temporarily deployed to previews/1487/merge June 3, 2026 10:38 — with GitHub Actions Inactive

cocomarine mentioned this pull request Jun 3, 2026

Error message UI #1485

Closed

add font size to original error message and minor fixes

9a8b187

cocomarine temporarily deployed to previews/1487/merge June 3, 2026 12:02 — with GitHub Actions Inactive

remove fem stub, add friendly test, revert error message test

8bd51f8

feat: update PFEM lib to 0.5.0, pass file to friendlyExplain() expl…

3d832eb

…icitly rawTraceback contains `<exec>` instead of `main.py` as the filename, for example, we can now override the filename passed to friendlyExplain()

grega temporarily deployed to previews/1487/merge June 10, 2026 15:21 — with GitHub Actions Inactive

cocomarine added 2 commits June 10, 2026 16:31

update test and revert back to using trace object

91d8fa3

Merge branch '1448-and-ui-branches-combined' of github.com:RaspberryP…

15b02dd

…iFoundation/editor-ui into 1448-and-ui-branches-combined

cocomarine temporarily deployed to previews/1487/merge June 10, 2026 15:33 — with GitHub Actions Inactive

add rawTrace back in and update test

13e3a78

cocomarine temporarily deployed to previews/1487/merge June 10, 2026 15:54 — with GitHub Actions Inactive

feat: bump PFEM to version 6, gaining a11y improvements

185c1f4

PFEM 0.6.0 markup has improved accessibility attributes, such as aria labels and roles. Has no effect on the styling (since classes, and the markup as a whole, remain the same).

grega temporarily deployed to previews/1487/merge June 10, 2026 17:03 — with GitHub Actions Inactive

cocomarine added 2 commits June 11, 2026 09:29

add language guard and update fixutre

1242226

Merge branch '1448-and-ui-branches-combined' of github.com:RaspberryP…

15f8aea

…iFoundation/editor-ui into 1448-and-ui-branches-combined

cocomarine temporarily deployed to previews/1487/merge June 11, 2026 08:29 — with GitHub Actions Inactive

add try catch for pfem and update test

763849e

cocomarine temporarily deployed to previews/1487/merge June 11, 2026 10:45 — with GitHub Actions Inactive

bump PFEM to version 7 for copy and variant update

93bd4fc

cocomarine temporarily deployed to previews/1487/merge June 11, 2026 11:04 — with GitHub Actions Inactive

Merge branch 'main' into 1448-and-ui-branches-combined

9f7c403

cocomarine requested a review from Copilot June 11, 2026 12:55

cocomarine temporarily deployed to previews/1487/merge June 11, 2026 12:55 — with GitHub Actions Inactive

Copilot started reviewing on behalf of cocomarine June 11, 2026 12:55 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Comment thread src/assets/stylesheets/FriendlyErrorMessage.scss

update svg path for file icon

b6a3cc9

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

cocomarine temporarily deployed to previews/1487/merge June 11, 2026 13:47 — with GitHub Actions Inactive

cocomarine marked this pull request as ready for review June 11, 2026 13:53

cocomarine changed the title ~~Error message UI rebased to 1448~~ Improve friendly error message Jun 11, 2026

Merge branch 'main' into 1448-and-ui-branches-combined

0b23980

cocomarine deployed to previews/1487/merge June 11, 2026 14:36 — with GitHub Actions View deployment

zetter-rpf reviewed Jun 12, 2026

View reviewed changes

zetter-rpf approved these changes Jun 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve friendly error message#1487

Improve friendly error message#1487
cocomarine wants to merge 65 commits into
mainfrom
1448-and-ui-branches-combined

cocomarine commented Jun 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

zetter-rpf Jun 12, 2026

Uh oh!

zetter-rpf Jun 12, 2026

Uh oh!

zetter-rpf left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

cocomarine commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to enable friendly errors

Decisions made upon adding pfem v. 0.7.0

WIP and future pfem

Screen recordings of editor with friendly messages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

zetter-rpf Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

zetter-rpf Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

zetter-rpf left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cocomarine commented Jun 3, 2026 •

edited

Loading