-
- {friendlyErrorHtml && (
-
) : null;
};
diff --git a/src/components/Editor/ErrorMessage/ErrorMessage.test.js b/src/components/Editor/ErrorMessage/ErrorMessage.test.js
index f9fe32a43..439b70155 100644
--- a/src/components/Editor/ErrorMessage/ErrorMessage.test.js
+++ b/src/components/Editor/ErrorMessage/ErrorMessage.test.js
@@ -33,7 +33,7 @@ describe("When error is set", () => {
test("Font size class is set correctly", () => {
const errorMessage = screen.queryByText("Oops").parentElement;
- expect(errorMessage).toHaveClass("error-message--myFontSize");
+ expect(errorMessage).toHaveClass("error-message__python--myFontSize");
});
test("Does not display friendly error elements", () => {
diff --git a/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx
new file mode 100644
index 000000000..3c074917b
--- /dev/null
+++ b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import "../../../assets/stylesheets/FriendlyErrorMessage.scss";
+import DOMPurify from "dompurify";
+
+const FriendlyErrorMessage = () => {
+ const friendlyError = useSelector((state) => state.editor.friendlyError);
+
+ const friendlyErrorHtml = friendlyError?.html
+ ? DOMPurify.sanitize(friendlyError.html)
+ : null;
+
+ return friendlyErrorHtml ? (
+
+ ) : null;
+};
+
+export default FriendlyErrorMessage;
diff --git a/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js
new file mode 100644
index 000000000..745e82374
--- /dev/null
+++ b/src/components/Editor/FriendlyErrorMessage/FriendlyErrorMessage.test.js
@@ -0,0 +1,85 @@
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { render, screen } from "@testing-library/react";
+import FriendlyErrorMessage from "./FriendlyErrorMessage";
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+describe("When friendlyError is set", () => {
+ beforeEach(() => {
+ const initialState = {
+ editor: {
+ error: "An error occurred",
+ friendlyError: {
+ html: '
Friendly Error Title
This is a more user-friendly explanation of the error.
A variable created in another place might not be available here.
- Move the line that makes it to above where you use it.
- Or set it here just before you use it.
kettle = 0
Original error
An error occurred
',
+ },
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Friendly error title and summary display", () => {
+ expect(screen.getByText("Friendly Error Title")).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ "This is a more user-friendly explanation of the error.",
+ ),
+ ).toBeInTheDocument();
+ });
+
+ it("strips unsafe scripts", () => {
+ const initialState = {
+ editor: {
+ error: "An error occurred",
+ friendlyError: {
+ html: `
+
Friendly Error Title
+
+
+
Bad link
+ `,
+ },
+ },
+ };
+ const store = mockStore(initialState);
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container.querySelector("script")).not.toBeInTheDocument();
+ expect(container.querySelector("[onerror]")).not.toBeInTheDocument();
+ expect(
+ container.querySelector('a[href^="javascript:"]'),
+ ).not.toBeInTheDocument();
+ });
+});
+
+describe("When friendlyError is not set", () => {
+ beforeEach(() => {
+ const initialState = {
+ editor: {
+ error: "Oops",
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Does not display friendly error elements", () => {
+ expect(
+ document.querySelector(".friendly-error-message"),
+ ).not.toBeInTheDocument();
+ });
+});
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index ebdcf013c..4a75f3e89 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -15,7 +15,7 @@ import {
import {
loadCopydeckFor,
registerAdapter,
- pyodideAdapter,
+ cpythonAdapter,
friendlyExplain,
} from "@raspberrypifoundation/python-friendly-error-messages";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
@@ -49,10 +49,15 @@ const PyodideRunner = ({
useEffect(() => {
if (friendlyErrorsEnabled) {
- loadCopydeckFor(navigator.language, {
- base: `${process.env.PUBLIC_URL}/python-error-copydecks/`,
- });
- registerAdapter("pyodide", pyodideAdapter);
+ try {
+ loadCopydeckFor(navigator.language || "en", {
+ base: `${process.env.PUBLIC_URL}/python-error-copydecks/`,
+ });
+ registerAdapter("pyodide", cpythonAdapter);
+ } catch {
+ console.error("Could not load friendly error copydeck");
+ dispatch(setFriendlyError(null));
+ }
}
}, [friendlyErrorsEnabled]);
@@ -81,6 +86,7 @@ const PyodideRunner = ({
const userId = user?.profile?.user;
const isSplitView = useSelector((s) => s.editor.isSplitView);
const isEmbedded = useSelector((s) => s.editor.isEmbedded);
+ const isOutputOnly = useSelector((s) => s.editor.isOutputOnly);
const reactAppApiEndpoint = useSelector((s) => s.editor.reactAppApiEndpoint);
const codeRunTriggered = useSelector((s) => s.editor.codeRunTriggered);
const codeRunStopped = useSelector((s) => s.editor.codeRunStopped);
@@ -121,6 +127,7 @@ const PyodideRunner = ({
data.mistake,
data.type,
data.info,
+ data.rawTraceback,
);
break;
case "handleFileWrite":
@@ -210,7 +217,7 @@ const PyodideRunner = ({
node.scrollTop = node.scrollHeight;
};
- const handleError = (file, line, mistake, type, info) => {
+ const handleError = (file, line, mistake, type, info, rawTraceback) => {
let errorMessage;
if (type === "KeyboardInterrupt") {
@@ -233,14 +240,20 @@ const PyodideRunner = ({
projectCode?.find((c) => c.name === "main" && c.extension === "py")
?.content ?? "";
- const friendlyError = friendlyExplain({
- error: errorMessage,
- code: inputCode,
- runtime: "pyodide",
- });
+ try {
+ const friendlyError = friendlyExplain({
+ error: rawTraceback,
+ file: file,
+ code: inputCode,
+ runtime: "pyodide",
+ sections: ["title", "summary"],
+ });
- if (friendlyError?.html) {
- dispatch(setFriendlyError({ html: friendlyError.html }));
+ if (friendlyError?.html) {
+ dispatch(setFriendlyError({ html: friendlyError.html }));
+ }
+ } catch {
+ console.error("Could not parse friendly error");
}
}
}
@@ -460,7 +473,7 @@ const PyodideRunner = ({
)}