Improve friendly error message (#1487)

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

Author: 4 people

.yarnrc.yml

@@ -18,4 +18,5 @@ npmMinimalAgeGate: 7d
 npmPreapprovedPackages:
   - "@raspberrypifoundation/design-system-react"
   - "@raspberrypifoundation/design-system-core"
-  - "@RaspberryPiFoundation/scratch-gui"
+  - "@RaspberryPiFoundation/scratch-gui"
+  - "@raspberrypifoundation/python-friendly-error-messages"

cypress/e2e/spec-wc-pyodide.cy.js

@@ -1,6 +1,7 @@
 import {
   getEditorShadow,
   getErrorMessage,
+  getFriendlyErrorMessage,
   getFileButtonByName,
   getProgramInput,
   getPyodideOutput,
@@ -253,3 +254,41 @@ print(text_out)
     );
   });
 });
+
+describe("When friendly errors enabled with pyodide", () => {
+  beforeEach(() => {
+    cy.intercept("GET", "**/python-error-copydecks/**", {
+      fixture: "copydeck.json",
+    }).as("copydeck");
+
+    const params = new URLSearchParams();
+    params.set("friendly_errors_enabled", "true");
+
+    cy.visit({
+      url: `${origin}?${params.toString()}`,
+      headers: {
+        "Cross-Origin-Opener-Policy": "same-origin",
+        "Cross-Origin-Embedder-Policy": "require-corp",
+      },
+    });
+    cy.window().then((win) => {
+      Object.defineProperty(win, "crossOriginIsolated", {
+        value: true,
+        configurable: true,
+      });
+    });
+    cy.wait("@copydeck");
+  });
+
+  it("shows a friendly error message when an error occurs", () => {
+    runCode("print(kitten)");
+    getErrorMessage().should(
+      "contain",
+      "NameError: name 'kitten' is not defined on line 1 of main.py",
+    );
+    getFriendlyErrorMessage().should(
+      "contain",
+      "This variable doesn't exist here",
+    );
+  });
+});

cypress/e2e/spec-wc-skulpt.cy.js

@@ -1,5 +1,6 @@
 import {
   getErrorMessage,
+  getFriendlyErrorMessage,
   getP5Canvas,
   getPythonConsoleOutput,
   getSkulptRunner,
@@ -149,3 +150,35 @@ describe("Running the code with skulpt", () => {
     );
   });
 });
+
+describe("When friendly errors enabled with skulpt", () => {
+  beforeEach(() => {
+    cy.intercept("GET", "**/python-error-copydecks/**", {
+      fixture: "copydeck.json",
+    }).as("copydeck");
+
+    const params = new URLSearchParams();
+    params.set("friendly_errors_enabled", "true");
+
+    cy.visit(`${origin}?${params.toString()}`);
+    cy.window().then((win) => {
+      Object.defineProperty(win, "crossOriginIsolated", {
+        value: false,
+        configurable: true,
+      });
+    });
+    cy.wait("@copydeck");
+  });
+
+  it("shows a friendly error message when an error occurs", () => {
+    runCode("import turtle\nprint(kitten)");
+    getErrorMessage().should(
+      "contain",
+      "NameError: name 'kitten' is not defined on line 2 of main.py",
+    );
+    getFriendlyErrorMessage().should(
+      "contain",
+      "This variable doesn't exist here",
+    );
+  });
+});

cypress/fixtures/copydeck.json

@@ -0,0 +1,46 @@
+{
+  "meta": {
+    "language": "en",
+    "version": 1
+  },
+
+  "errors": {
+    "NameError": {
+      "variants": [
+        {
+          "if": {
+            "not_message": ["is not defined"]
+          },
+          "title": "This variable doesn't exist yet",
+          "summary": "Your code uses the variable {{name}}, but it hasn't been created yet. Check {{loc}}. If you meant to print the text {{name}}, put it in double quotes.",
+          "why": "Without speech marks Python treats {{name}} as a variable, and this variable does not exist yet.",
+          "steps": [
+            "If it is meant to be text, put speech marks around {{name}}.",
+            "If it is meant to be a variable, make it first (for example: {{name}} = 0).",
+            "Check spelling and capital letters."
+          ],
+          "_placeholders": {
+            "name": "The undefined variable name, e.g. kittens",
+            "loc": "Where it was used, e.g. line 2 in main.py"
+          }
+        },
+        {
+          "if": {
+            "match_message": ["is not defined"]
+          },
+          "title": "This variable doesn't exist here",
+          "summary": "{{name}} might be created somewhere else, but you're using it at {{loc}}. If you meant the text {{name}}, put it in double quotes.",
+          "why": "A variable created in another place might not be available here.",
+          "steps": [
+            "Move the line that makes it to above where you use it.",
+            "Or set it here just before you use it."
+          ],
+          "_placeholders": {
+            "name": "The variable name used out of scope, e.g. total",
+            "loc": "Where it was referenced, e.g. line 8 in main.py"
+          }
+        }
+      ]
+    }
+  }
+}

cypress/helpers/editor.js

@@ -57,7 +57,10 @@ export const getP5Canvas = () => getEditorShadow().find(".p5Canvas");
 export const getTurtleOutput = () => getEditorShadow().find("#turtleOutput");
 
 export const getErrorMessage = () =>
-  getEditorShadow().find(".error-message__content");
+  getEditorShadow().find(".error-message__python");
+
+export const getFriendlyErrorMessage = () =>
+  getEditorShadow().find(".friendly-error-message");
 
 export const getTextOutputTab = () =>
   getPyodideOutput().findByLabelText("Text output");

package.json

@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@raspberrypifoundation/design-system-react": "^2.7.0",
-    "@raspberrypifoundation/python-friendly-error-messages": "0.1.6",
+    "@raspberrypifoundation/python-friendly-error-messages": "0.7.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",

src/PyodideWorker.js

@@ -534,7 +534,7 @@ const PyodideWorker = () => {
 
     const line = match ? parseInt(match[2], 10) : "";
 
-    return { file, line, mistake, type, info };
+    return { file, line, mistake, type, info, rawTraceback: error.message };
   };
 
   initialisePyodide();

src/assets/error_file.svg

@@ -1,5 +1,6 @@
-@forward '@raspberrypifoundation/design-system-core/scss/properties/spacing';
-@use '@raspberrypifoundation/design-system-core/scss/mixins/typography' as typography;
+@forward "@raspberrypifoundation/design-system-core/scss/properties/spacing";
+@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as
+  typography;
 
 // Scrollbar-width is needed from scrollbar to show in Chrome
 .editor-wrapper {
@@ -31,7 +32,6 @@
       overscroll-behavior-x: none;
       font-family: var(--wc-font-family-monospace);
 
-
       .cm-content {
         flex: 1;
         padding-block-start: var(--space-0-5);
@@ -60,5 +60,3 @@
     display: none;
   }
 }
-
-