Add improved error messaging to python projects

[cocomarine]

Part of https://github.com/RaspberryPiFoundation/digital-editor-issues/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: Error message UI #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.
  

• 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.
  

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]

@cocomarine Just so you know, we are still likely to want to show the normal error message too as well as the friendly one.

[Copilot]

Pull request overview

This PR adds an optional “friendly errors” feature for Python projects by integrating @raspberrypifoundation/python-friendly-error-messages (pfem), wiring a new friendly_errors_enabled web-component attribute through Redux into both Python runners, and extending the error UI to display the friendly title/summary.

Changes:

• Add pfem dependency and bundle its copydecks into the build output.
• Introduce friendlyErrorsEnabled + friendlyError Redux state and plumb the flag into PyodideRunner and SkulptRunner.
• Extend ErrorMessage to render pfem’s friendly title/summary and adjust Jest config/mocks to accommodate the new dependency (plus plotly mocking updates).

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
yarn.lock	Locks pfem dependency version.
package.json	Adds pfem dependency; adjusts Jest transformIgnorePatterns and test script.
webpack.config.js	Adds resolve rule for pfem and copies pfem copydecks into build output.
src/web-component.js	Adds friendly_errors_enabled as an observed boolean attribute.
src/containers/WebComponentLoader.jsx	Dispatches the new friendlyErrorsEnabled flag into Redux.
src/redux/EditorSlice.js	Adds Redux state + actions for friendly error support.
src/components/Editor/Runners/PythonRunner/PythonRunner.jsx	Passes friendlyErrorsEnabled into both Python runners.
src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx	Initializes pfem for Pyodide and stores friendly error output.
src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx	Initializes pfem for Skulpt and stores friendly error output.
src/components/Editor/ErrorMessage/ErrorMessage.jsx	Renders friendly error title/summary in the error panel.
src/utils/setupTests.js	Adds Jest mocks for pfem and plotly.
src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.test.js	Updates plotly expectations to assert Plotly calls.

---

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

[mwtrew]

Looking great in general! A few comments/questions but I'm happy for it to go in.