Merge pull request alexmojaki#402 from alexmojaki/error-boundary

Error boundary

Author: alexmojaki

frontend/src/App.js

@@ -47,7 +47,7 @@ import {
 import {HintsAssistant} from "./Hints";
 import Toggle from 'react-toggle'
 import "react-toggle/style.css"
-import {feedbackContentStyle, FeedbackModal} from "./Feedback";
+import {ErrorBoundary, FeedbackMenuButton} from "./Feedback";
 import birdseyeIcon from "./img/birdseye_icon.png";
 import languageIcon from "./img/language.png";
 import {interrupt, runCode, terminalRef} from "./RunCode";
@@ -427,59 +427,73 @@ const CourseText = (
 
 class AppComponent extends React.Component {
   render() {
-    const {
-      editorContent,
-      assistant,
-      specialMessages,
-      questionWizard,
-      pages,
-      user,
-      prediction,
-      route,
-      previousRoute,
-      running,
-    } = this.props;
-    if (route === "toc") {
+    if (this.props.route === "toc") {
       return <TableOfContents/>
     }
-    const isQuestionWizard = route === "question";
-    const fullIde = route === "ide";
-
-    const page = currentPage();
-    const step = currentStep();
-
-    let showEditor, showSnoop, showPythonTutor, showBirdseye, showQuestionButton;
-    if (fullIde || isQuestionWizard) {
-      showEditor = true;
-      showSnoop = true;
-      showPythonTutor = true;
-      showBirdseye = true;
-      showQuestionButton = !(isQuestionWizard || previousRoute === "question");
-    } else if (step.text.length) {
-      showEditor = page.index >= pages.WritingPrograms.index;
-      const snoopPageIndex = pages.UnderstandingProgramsWithSnoop.index;
-      showSnoop = page.index > snoopPageIndex ||
-        (page.index === snoopPageIndex && step.index >= 1);
-      showPythonTutor = page.index >= pages.UnderstandingProgramsWithPythonTutor.index;
-      showBirdseye = page.index >= pages.IntroducingBirdseye.index;
-      showQuestionButton = page.index > pages.IntroducingBirdseye.index;
-    }
 
-    const cantUseEditor = prediction.state === "waiting" || prediction.state === "showingResult";
     return <div className="book-container">
-      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+      <NavBar user={this.props.user}/>
+      <ErrorBoundary canGiveFeedback>
+        <AppMain {...this.props}/>
+      </ErrorBoundary>
+    </div>
+  }
+}
+
+function NavBar({user}) {
+  return <nav className="navbar navbar-expand-lg navbar-light bg-light">
         <span className="nav-item custom-popup">
           <MenuPopup user={user}/>
         </span>
-        <span className="nav-item navbar-text">
+    <span className="nav-item navbar-text">
           <HeaderLoginInfo email={user.email}/>
         </span>
-        <a className="nav-item nav-link" href="#toc">
-          <FontAwesomeIcon icon={faListOl}/> {terms.table_of_contents}
-        </a>
-      </nav>
+    <a className="nav-item nav-link" href="#toc">
+      <FontAwesomeIcon icon={faListOl}/> {terms.table_of_contents}
+    </a>
+  </nav>;
+}
+
+function AppMain(
+  {
+    editorContent,
+    assistant,
+    specialMessages,
+    questionWizard,
+    pages,
+    user,
+    prediction,
+    route,
+    previousRoute,
+    running,
+  }) {
+  const isQuestionWizard = route === "question";
+  const fullIde = route === "ide";
+
+  const page = currentPage();
+  const step = currentStep();
+
+  let showEditor, showSnoop, showPythonTutor, showBirdseye, showQuestionButton;
+  if (fullIde || isQuestionWizard) {
+    showEditor = true;
+    showSnoop = true;
+    showPythonTutor = true;
+    showBirdseye = true;
+    showQuestionButton = !(isQuestionWizard || previousRoute === "question");
+  } else if (step.text.length) {
+    showEditor = page.index >= pages.WritingPrograms.index;
+    const snoopPageIndex = pages.UnderstandingProgramsWithSnoop.index;
+    showSnoop = page.index > snoopPageIndex ||
+      (page.index === snoopPageIndex && step.index >= 1);
+    showPythonTutor = page.index >= pages.UnderstandingProgramsWithPythonTutor.index;
+    showBirdseye = page.index >= pages.IntroducingBirdseye.index;
+    showQuestionButton = page.index > pages.IntroducingBirdseye.index;
+  }
+
+  const cantUseEditor = prediction.state === "waiting" || prediction.state === "showingResult";
 
-      {!fullIde &&
+  return <>
+    {!fullIde &&
       <div className="book-text markdown-body">
         {isQuestionWizard ?
           <QuestionWizard {...questionWizard}/>
@@ -497,47 +511,44 @@ class AppComponent extends React.Component {
         }
       </div>
 
-      }
+    }
 
-      <EditorButtons {...{
-        showBirdseye,
-        showEditor,
-        showSnoop,
-        showPythonTutor,
-        showQuestionButton,
-        disabled: cantUseEditor,
-        running,
-      }}/>
-
-      <div className={`ide ide-${fullIde ? 'full' : 'half'}`}>
-        <div className="editor-and-terminal">
-          {showEditor &&
-           <Editor value={editorContent} readOnly={cantUseEditor}/>
-          }
-          <div className="terminal" style={{height: showEditor ? undefined : "100%"}}>
-            <Shell/>
-          </div>
+    <EditorButtons {...{
+      showBirdseye,
+      showEditor,
+      showSnoop,
+      showPythonTutor,
+      showQuestionButton,
+      disabled: cantUseEditor,
+      running,
+    }}/>
+
+    <div className={`ide ide-${fullIde ? 'full' : 'half'}`}>
+      <div className="editor-and-terminal">
+        {showEditor &&
+          <Editor value={editorContent} readOnly={cantUseEditor}/>
+        }
+        <div className="terminal" style={{height: showEditor ? undefined : "100%"}}>
+          <Shell/>
         </div>
       </div>
+    </div>
 
-      <a className="btn btn-primary full-ide-button"
-         href={"#" + (!fullIde ? "ide" : (specialHash(previousRoute) ? previousRoute : page.slug))}>
-        <FontAwesomeIcon icon={fullIde ? faCompress : faExpand}/>
-      </a>
+    <a className="btn btn-primary full-ide-button"
+       href={"#" + (!fullIde ? "ide" : (specialHash(previousRoute) ? previousRoute : page.slug))}>
+      <FontAwesomeIcon icon={fullIde ? faCompress : faExpand}/>
+    </a>
 
-      <>
-        {specialMessages.map((message, index) =>
-          <Popup
-            key={index}
-            open={true}
-            onClose={() => closeSpecialMessage(index)}
-          >
-            <SpecialMessageModal message={message}/>
-          </Popup>
-        )}
-      </>
-    </div>
-  }
+    {specialMessages.map((message, index) =>
+      <Popup
+        key={index}
+        open={true}
+        onClose={() => closeSpecialMessage(index)}
+      >
+        <SpecialMessageModal message={message}/>
+      </Popup>
+    )}
+  </>;
 }
 
 const StepButton = ({delta, label}) =>
@@ -595,20 +606,7 @@ const MenuPopup = ({user}) =>
             <SettingsModal user={user}/>
           </Popup>
         </p>
-        {process.env.REACT_APP_SENTRY_DSN && <p>
-          <Popup
-            trigger={
-              <button className="btn btn-success">
-                <FontAwesomeIcon icon={faBug}/> {terms.feedback}
-              </button>
-            }
-            modal
-            nested
-            contentStyle={feedbackContentStyle}
-          >
-            {close => <FeedbackModal close={close}/>}
-          </Popup>
-        </p>}
+        <FeedbackMenuButton/>
         {
           otherVisibleLanguages.map(lang =>
             <p key={lang.code}>

frontend/src/Feedback.js

@@ -5,9 +5,15 @@ import axios from "axios";
 import * as terms from "./terms.json"
 import * as Sentry from "@sentry/react";
 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;
 
-export const FeedbackModal = ({close}) => {
+
+const FeedbackModal = ({close}) => {
   const email = useInput(bookState.user.email || "", {
     placeholder: terms.feedback_email_placeholder,
     type: 'text',
@@ -60,7 +66,7 @@ ${description.value.trim()}`;
               },
               {
                 headers: {
-                  Authorization: 'DSN ' + process.env.REACT_APP_SENTRY_DSN,
+                  Authorization: 'DSN ' + SENTRY_DSN,
                 }
               }
             );
@@ -103,10 +109,66 @@ ${description.value.trim()}`;
   );
 };
 
-
-export const feedbackContentStyle = {
+const feedbackContentStyle = {
   maxHeight: "90vh",
   overflow: "auto",
   background: "white",
   border: "solid 1px lightgray",
 }
+
+export function FeedbackMenuButton() {
+  if (!SENTRY_DSN) {
+    return null;
+  }
+  return <p>
+    <Popup
+      trigger={
+        <button className="btn btn-success">
+          <FontAwesomeIcon icon={faBug}/> {terms.feedback}
+        </button>
+      }
+      modal
+      nested
+      contentStyle={feedbackContentStyle}
+    >
+      {close => <FeedbackModal close={close}/>}
+    </Popup>
+  </p>;
+}
+
+export function InternalError({ranCode, canGiveFeedback}) {
+  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 && canGiveFeedback) {
+    suggestions.push(terms.give_feedback_from_menu);
+  }
+  return <div>
+    <p>{start}</p>
+    <ul>
+      {suggestions.map(suggestion => <li key={suggestion}>{suggestion}</li>)}
+    </ul>
+  </div>;
+}
+
+export function ErrorBoundary({children, canGiveFeedback}) {
+  return <Sentry.ErrorBoundary fallback={
+    ({error}) => <ErrorFallback {...{error, canGiveFeedback}}/>
+  }>
+    {children}
+  </Sentry.ErrorBoundary>;
+}
+
+function ErrorFallback({error, canGiveFeedback}) {
+  return <div style={{margin: "4em"}}>
+    <div className="alert alert-danger" role="alert">
+      <pre><code>{error.toString()}</code></pre>
+    </div>
+    <InternalError canGiveFeedback={canGiveFeedback}/>
+  </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/index.js

@@ -3,15 +3,18 @@ import ReactDOM from 'react-dom';
 import {App} from './App';
 import {Provider} from "react-redux";
 import {store} from "./store";
+import {ErrorBoundary} from "./Feedback";
 
 
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 
 ReactDOM.render(
-    <Provider store={store}>
+  <Provider store={store}>
+    <ErrorBoundary>
       <App/>
-    </Provider>,
+    </ErrorBoundary>
+  </Provider>,
   document.getElementById("root")
 );