Improve friendly error message

.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/stylesheets/EditorPanel.scss

@@ -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;
   }
 }
-
-

src/assets/stylesheets/ErrorMessage.scss

@@ -1,34 +1,34 @@
-@use "./rpf_design_system/font-size" as *;
-@use "./rpf_design_system/spacing" as *;
+@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as
+  typography;
 
 .error-message {
-  color: #7e0305;
-  background-color: #fde2e1;
-  padding: $space-0-75 $space-1-25;
+  color: var(--rpf-red-900);
+  background-color: var(--rpf-red-100);
+  border-block-start: 1px solid var(--editor-color-outline);
+  padding: var(--space-1);
   overflow-y: auto;
+  scrollbar-width: thin;
+  max-block-size: 30%;
 
-  &__content {
+  &__error {
     padding: 0;
     margin: 0;
     white-space: pre-wrap;
     overflow-wrap: break-word;
+    font-weight: bold;
   }
 
-  &--medium {
-    @include font-size-1-5(regular);
-  }
-
-  &--large {
-    @include font-size-2(regular);
-  }
+  &__python {
+    display: flex;
+    gap: var(--space-1);
+    @include typography.style-1;
 
-  // Only displaying title and summary of friendlyError
-  &__friendly {
-    .pfem__why,
-    .pfem__steps,
-    .pfem__patch,
-    .pfem__details {
-      display: none;
+    &--medium {
+      @include typography.style-1;
+    }
+
+    &--large {
+      @include typography.style-2;
     }
   }
 }

src/assets/stylesheets/FriendlyErrorMessage.scss

@@ -0,0 +1,58 @@
+.friendly-error-message {
+  background-color: var(--rpf-white);
+  padding: var(--space-1) var(--space-1-5);
+  color: var(--rpf-text-primary);
+  border-radius: var(--space-1);
+  margin-block-start: var(--space-1);
+
+  &__content {
+    line-height: 1.75rem;
+
+    .pfem__title {
+      font-weight: 600;
+      display: inline;
+    }
+
+    .pfem__summary {
+      display: inline;
+
+      &::before {
+        content: " - ";
+      }
+    }
+
+    .pfem__var, .pfem__code, .pfem__file, .pfem__line {
+      font-family: var(--wc-font-family-monospace);
+      border-radius: 0.25rem;
+      padding: 0.2rem var(--space-0-5);
+    }
+
+    .pfem__var {
+      background-color: var(--rpf-green-100);
+    }
+
+    .pfem__code {
+      background-color: var(--rpf-grey-100);
+    }
+
+    .pfem__file {
+      white-space: nowrap; 
+      background-color: var(--rpf-yellow-100);
+
+      &::before {
+        content: "";
+        display: inline-block;
+        inline-size: 1em;
+        block-size: 1em;
+        background: url("../error_file.svg") no-repeat center;
+        background-size: contain;
+        margin-inline-end: 0.12rem;
+        vertical-align: middle;
+      }
+    }
+
+    .pfem__line {
+      background-color: var(--rpf-blue-100);
+    }
+  }
+}

src/assets/stylesheets/InternalStyles.scss

@@ -43,6 +43,7 @@
 @use "./EditorFinalStep.scss" as *;
 @use "./Loader.scss" as *;
 @use "./LoadFailed.scss" as *;
+@use "./FriendlyErrorMessage" as *;
 
 @use "./settings/fonts" as fonts;
 
@@ -158,7 +159,9 @@ button:focus-visible {
     // Primary button
     --rpf-button-primary-background-color: var(--editor-color-theme);
     --rpf-button-primary-background-color-focus: var(--editor-color-theme);
-    --rpf-button-primary-background-color-hover: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color-hover: var(
+      --editor-color-theme-secondary
+    );
     --rpf-button-primary-background-color-active: var(--rpf-navy-600);
     --rpf-button-primary-background-color-disabled: var(--rpf-navy-200);
     --rpf-button-primary-color-disabled: var(--rpf-grey-600);
@@ -167,10 +170,16 @@ button:focus-visible {
     // Secondary button
     --rpf-button-secondary-background-color: var(--editor-color-theme);
     --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
-    --rpf-button-secondary-background-color-hover: var(--editor-color-theme-tertiary);
+    --rpf-button-secondary-background-color-hover: var(
+      --editor-color-theme-tertiary
+    );
     --rpf-button-secondary-border-color: var(--editor-color-theme);
-    --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
-    --rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
+    --rpf-button-secondary-border-color-hover: var(
+      --editor-color-theme-secondary
+    );
+    --rpf-button-secondary-background-color-active: var(
+      --editor-color-theme-secondary
+    );
     --rpf-button-secondary-background-color-disabled: var(--rpf-grey-50);
     --rpf-button-secondary-text-color: var(--editor-color-theme);
 
@@ -230,7 +239,9 @@ button:focus-visible {
     --rpf-button-secondary-text-color: var(--rpf-white);
     --rpf-button-secondary-background-color: var(--editor-color-layer-2);
     --rpf-button-secondary-background-color-active: var(--rpf-navy-200);
-    --rpf-button-secondary-color-disabled-background: var(--editor-color-layer-3);
+    --rpf-button-secondary-color-disabled-background: var(
+      --editor-color-layer-3
+    );
     --rpf-button-secondary-background-color-hover: var(--editor-color-outline);
     --rpf-button-secondary-border-color: var(--editor-color-theme);
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme);
@@ -240,9 +251,17 @@ button:focus-visible {
     // Tertiary button
     --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
     --rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
-    --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
-    --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
+    --rpf-button-tertiary-danger-background-color-hover: rgba(
+      255,
+      255,
+      255,
+      0.1
+    );
+    --rpf-button-tertiary-danger-background-color-active: rgba(
+      255,
+      255,
+      255,
+      0.15
+    );
   }
 }
-
-