@khanacademy/perseus 17.3.1 → 17.3.3

package/dist/server-item-renderer.d.ts

@@ -1,11 +1,11 @@
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 /**
- * A copy of the ItemRenderer which renders its question renderer and hints
- * renderer normally instead of ReactDOM.render()ing them into elements in the
- * DOM.
+ * The main item (aka Exercise) renderer in Perseus. This component renders its
+ * question renderer and hints renderer using standard React practices (an
+ * earlier ItemRenderer component used to use jQuery and ReactDOM.render()ing
+ * to render into elements it didn't own.
  *
- * This allows this component to be used in server-rendering of a perseus
- * exercise.
+ * This component is compatible with server-rendering of a perseus exercise.
  */
 import * as React from "react";
 import Renderer from "./renderer";

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.3.1",
+    "version": "17.3.3",
     "publishConfig": {
         "access": "public"
     },

package/src/__tests__/error-boundary.test.tsx

@@ -0,0 +1,76 @@
+import {screen, render} from "@testing-library/react";
+import * as React from "react";
+
+import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+import ErrorBoundary from "../error-boundary";
+
+import "@testing-library/jest-dom";
+
+const ProblematicComponent = () => {
+    throw new Error("I can haz error");
+};
+
+describe("error boundary", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render children", () => {
+        render(
+            <ErrorBoundary>
+                <span>Hello world</span>
+            </ErrorBoundary>,
+        );
+
+        expect(screen.getByText("Hello world")).toBeInTheDocument();
+    });
+
+    it("should render error icon when children error", () => {
+        render(
+            <ErrorBoundary>
+                <ProblematicComponent />
+            </ErrorBoundary>,
+        );
+
+        expect(screen.getByRole("img")).toBeInTheDocument();
+        expect(screen.getByTitle("Rendering Error!")).toBeInTheDocument();
+    });
+
+    it("should call the onError callback when children error", () => {
+        const onErrorCallback = jest.fn();
+
+        render(
+            <ErrorBoundary onError={onErrorCallback}>
+                <ProblematicComponent />
+            </ErrorBoundary>,
+        );
+
+        expect(onErrorCallback).toHaveBeenCalled();
+    });
+
+    it("should log the error when children error", () => {
+        const errorSpy = jest.spyOn(testDependencies.Log, "error");
+
+        render(
+            <ErrorBoundary>
+                <ProblematicComponent />
+            </ErrorBoundary>,
+        );
+
+        expect(errorSpy).toHaveBeenCalledWith(
+            "Unhandled Perseus error: I can haz error",
+            "Internal",
+            {
+                cause: expect.anything(),
+                loggedMetadata: {
+                    componentStack: `
+    in ProblematicComponent
+    in ErrorBoundary`,
+                },
+            },
+        );
+    });
+});

package/src/error-boundary.tsx

@@ -22,13 +22,27 @@ class ErrorBoundary extends React.Component<Props, State> {
     componentDidCatch(error: Error, info: any) {
         this.setState({error: error.toString()});
         this.props.onError?.(error, info);
-        Log.error("Perseus error boundary caught error", Errors.Internal, {
-            cause: error,
-            loggedMetadata: {
-                componentStack: info.componentStack,
-                ...this.props.metadata,
+        Log.error(
+            // NOTE(jeremy): We concatenate the error messsage here. Typical
+            // Khan Academy error handling guidance says that you should never
+            // "build" the error message that might be sent to our error
+            // reporting tool (currently Sentry). However, if we don't
+            // differentiate between the different errors that are thrown, they
+            // all end up being grouped as a single Sentry event, which is very
+            // unhelpful.
+            "Unhandled Perseus error: " + error.message,
+            Errors.Internal,
+            {
+                cause: error,
+                loggedMetadata: {
+                    componentStack:
+                        !!info && "componentStack" in info
+                            ? info.componentStack
+                            : "componentStack not provided",
+                    ...this.props.metadata,
+                },
             },
-        });
+        );
     }
 
     render(): React.ReactNode {
@@ -39,7 +53,8 @@ class ErrorBoundary extends React.Component<Props, State> {
             // errors into inline elements.
             // TODO(michaelpolyak): Link error icon to "Report a problem".
             return (
-                <svg height="16" width="16" viewBox="0 0 16 16">
+                <svg height="16" width="16" viewBox="0 0 16 16" role={"img"}>
+                    <title>Rendering Error!</title>
                     <path
                         d="m8 16c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-3c0.55 0 1-0.45 1-1s-0.45-1-1-1-1 0.45-1 1 0.45 1 1 1zm0-9c-0.55 0-1 0.45-1 1v4c0 0.55.45 1 1 1s1-0.45 1-1v-4c0-0.55-0.45-1-1-1z"
                         fill="#d92916"

package/src/server-item-renderer.tsx

@@ -2,12 +2,12 @@
 import * as PerseusLinter from "@khanacademy/perseus-linter";
 import {StyleSheet, css} from "aphrodite";
 /**
- * A copy of the ItemRenderer which renders its question renderer and hints
- * renderer normally instead of ReactDOM.render()ing them into elements in the
- * DOM.
+ * The main item (aka Exercise) renderer in Perseus. This component renders its
+ * question renderer and hints renderer using standard React practices (an
+ * earlier ItemRenderer component used to use jQuery and ReactDOM.render()ing
+ * to render into elements it didn't own.
  *
- * This allows this component to be used in server-rendering of a perseus
- * exercise.
+ * This component is compatible with server-rendering of a perseus exercise.
  */
 import * as React from "react";
 import _ from "underscore";

package/src/styles/articles.less

@@ -2,7 +2,24 @@
 @import "./variables.less";
 @import "./util.less";
 
-// Article Renderer
+// Common styles for _all_ of Perseus
+.framework-perseus {
+    code {
+        font-family: Courier, monospace;
+    }
+
+    pre {
+        background-color: @gray95;
+        border-radius: 4px;
+        color: @gray17;
+        font-size: 18px;
+        padding: 16px;
+        white-space: pre;
+        overflow: auto;
+    }
+}
+
+// Desktop Articles
 .framework-perseus.perseus-article:not(.perseus-mobile) {
     @textColor: #21242c;
     .body-text() {
@@ -190,25 +207,12 @@
         }
     }
 
-    code {
-        font-family: Courier, monospace;
-    }
-
     pre {
-        background-color: @gray95;
-        border-radius: 4px;
-        color: @gray17;
-        font-size: 18px;
-        padding: 16px;
-        white-space: pre;
-        overflow: auto;
         margin: 0 -16px 32px -16px;
     }
 }
 
-// HACK(emily): This is a copy of a bunch of the mixins from the block of
-// styles down below. However, those styles are limited to mobile devices
-// only, so this block is for non-mobile devices.
+// Desktop Exercises
 .framework-perseus:not(.perseus-article):not(.perseus-mobile) {
     // Mixins
     .text(@fontSize; @lineHeight; @color) {
@@ -251,6 +255,7 @@
     .choice-text(14px, 1.25);
 }
 
+// Mobile Articles and Exercises
 .framework-perseus.perseus-mobile {
     .perseus-article {
         .perseus-widget-container {