Refactor InternalError with modular suggestions

Author: alexmojaki

frontend/src/Feedback.js

@@ -8,6 +8,7 @@ import {uuidv4} from "sync-message";
 import Popup from "reactjs-popup";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faBug} from "@fortawesome/free-solid-svg-icons";
+import _ from "lodash";
 
 const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN;
 
@@ -134,3 +135,23 @@ export function FeedbackMenuButton() {
     </Popup>
   </p>;
 }
+
+export function InternalError({ranCode}) {
+  const start = _.template(terms.internal_error_start)({
+    maybeErrorReported: SENTRY_DSN ? terms.error_has_been_reported : '',
+  });
+  const suggestions = [];
+  if (ranCode) {
+    suggestions.push(terms.try_running_code_again);
+  }
+  suggestions.push(terms.refresh_and_try_again, terms.try_using_different_browser);
+  if (SENTRY_DSN) {
+    suggestions.push(terms.give_feedback_from_menu);
+  }
+  return <div>
+    <p>{start}</p>
+    <ul>
+      {suggestions.map(suggestion => <li key={suggestion}>{suggestion}</li>)}
+    </ul>
+  </div>;
+}

frontend/src/RunCode.js

@@ -3,10 +3,10 @@ import {
   bookState,
   currentStep,
   currentStepName,
-  postCodeEntry,
   loadedPromise,
   logEvent,
   moveStep,
+  postCodeEntry,
   ranCode
 } from "./book/store";
 import _ from "lodash";
@@ -15,8 +15,7 @@ import {animateScroll} from "react-scroll";
 import React from "react";
 import * as Sentry from "@sentry/react";
 import {wrapAsync} from "./frontendlib/sentry";
-import {taskClient, runCodeTask} from "./TaskClient";
-import * as terms from "./terms.json";
+import {runCodeTask, taskClient} from "./TaskClient";
 
 export const terminalRef = React.createRef();
 
@@ -215,12 +214,9 @@ export const showCodeResult = ({birdseyeUrl, passed}) => {
 }
 
 function showInternalErrorOutput(message) {
-  let instructions = process.env.REACT_APP_SENTRY_DSN ?
-    terms.report_error_instructions :
-    terms.report_error_instructions_no_feedback;
   showOutputParts([
     {text: `\n${message.trim()}\n\n`, type: 'internal_error'},
-    {text: instructions, type: 'internal_error_explanation'},
+    {text: '', type: 'internal_error_explanation'},
     {text: '>>> ', type: 'shell_prompt'},
   ]);
 }

frontend/src/english_terms.json

@@ -18,8 +18,12 @@
   "error_traceback":"Error traceback:",
   "did_you_mean": "Did you mean...",
   "similar_frames_skipped": "Similar frames skipped:",
-  "report_error_instructions": "Oops, something went wrong! The error has been reported. Here's what you can do:\n\n- Try running the code again.\n- Reload/refresh the page and try again.\n- Try using a different browser.\n- Give feedback from the top-left menu.",
-  "report_error_instructions_no_feedback": "Oops, something went wrong! Here's what you can do:\n\n- Try running the code again.\n- Reload/refresh the page and try again.\n- Try using a different browser.",
+  "internal_error_start": "Oops, something went wrong! ${maybeErrorReported} Here's what you can do:",
+  "error_has_been_reported": "The error has been reported.",
+  "try_running_code_again": "Try running the code again.",
+  "refresh_and_try_again": "Reload/refresh the page and try again.",
+  "try_using_different_browser": "Try using a different browser.",
+  "give_feedback_from_menu": "Give feedback from the top-left menu.",
   "click_for_error_details": "Click for error details",
   "give_feedback": "Give feedback",
   "feedback_email_placeholder": "Email (optional)",

frontend/src/shell/TerminalMessage.jsx

@@ -4,6 +4,7 @@ import AnsiUp from "ansi_up";
 import sourceStyles from './defs/styles/TerminalMessage'
 import * as terms from "../terms.json"
 import _ from "lodash";
+import {InternalError} from "../Feedback";
 
 const ansi_up = new AnsiUp();
 
@@ -27,7 +28,7 @@ export default class TerminalMessage extends Component {
     }
 
     if (content.type === "internal_error_explanation") {
-      return <div dangerouslySetInnerHTML={{__html: content.text}}/>
+      return <InternalError ranCode/>
     }
 
     let color = "white";

translations/english.po

@@ -19689,6 +19689,9 @@ msgstr "Enables the \"Reverse step\" and \"Skip step\" buttons."
 msgid "frontend.did_you_mean"
 msgstr "Did you mean..."
 
+msgid "frontend.error_has_been_reported"
+msgstr "The error has been reported."
+
 msgid "frontend.error_traceback"
 msgstr "Error traceback:"
 
@@ -19730,6 +19733,9 @@ msgstr "Get a hint"
 msgid "frontend.give_feedback"
 msgstr "Give feedback"
 
+msgid "frontend.give_feedback_from_menu"
+msgstr "Give feedback from the top-left menu."
+
 msgid "frontend.give_feedback_instructions"
 msgstr ""
 "Tell us what you like or don't like! If you're reporting a bug, give a detailed description of the problem:\n"
@@ -19750,6 +19756,9 @@ msgstr "Hints and Solution"
 msgid "frontend.hints_progress"
 msgstr "Shown ${numHints} of ${totalHints} hints"
 
+msgid "frontend.internal_error_start"
+msgstr "Oops, something went wrong! ${maybeErrorReported} Here's what you can do:"
+
 msgid "frontend.loading_wait"
 msgstr "Loading..."
 
@@ -19831,26 +19840,12 @@ msgstr ""
 "\n"
 "If your question is about servers (e.g. Django or Flask), web requests, databases, or a package that can't be imported here, then this tool won't work. However, just because your current code *involves* those things, that doesn't mean that's what your question is *about*. If you're having a general Python/programming/logic problem, then extract that problem from the other stuff. Python with Django is still Python. If you can't do that, then read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) before asking your question."
 
+msgid "frontend.refresh_and_try_again"
+msgstr "Reload/refresh the page and try again."
+
 msgid "frontend.repeated_frames_description"
 msgstr "${name} at line ${lineno} (${count} times)"
 
-msgid "frontend.report_error_instructions"
-msgstr ""
-"Oops, something went wrong! The error has been reported. Here's what you can do:\n"
-"\n"
-"- Try running the code again.\n"
-"- Reload/refresh the page and try again.\n"
-"- Try using a different browser.\n"
-"- Give feedback from the top-left menu."
-
-msgid "frontend.report_error_instructions_no_feedback"
-msgstr ""
-"Oops, something went wrong! Here's what you can do:\n"
-"\n"
-"- Try running the code again.\n"
-"- Reload/refresh the page and try again.\n"
-"- Try using a different browser."
-
 msgid "frontend.requirements"
 msgstr "Requirements"
 
@@ -19910,6 +19905,12 @@ msgstr ""
 "\n"
 "If you're completely new to programming, or you have doubts, just start at the beginning and click Next as you finish each page."
 
+msgid "frontend.try_running_code_again"
+msgstr "Try running the code again."
+
+msgid "frontend.try_using_different_browser"
+msgstr "Try using a different browser."
+
 msgid "frontend.verbatim"
 msgstr ""
 "This step has only one correct answer. You must run exactly the correct code, so check your spelling carefully. Only a"