ErrorBoundary

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 {FeedbackMenuButton} 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";
@@ -433,7 +433,9 @@ class AppComponent extends React.Component {
 
     return <div className="book-container">
       <NavBar user={this.props.user}/>
-      <AppMain {...this.props}/>
+      <ErrorBoundary canGiveFeedback>
+        <AppMain {...this.props}/>
+      </ErrorBoundary>
     </div>
   }
 }

frontend/src/Feedback.js

@@ -136,7 +136,7 @@ export function FeedbackMenuButton() {
   </p>;
 }
 
-export function InternalError({ranCode}) {
+export function InternalError({ranCode, canGiveFeedback}) {
   const start = _.template(terms.internal_error_start)({
     maybeErrorReported: SENTRY_DSN ? terms.error_has_been_reported : '',
   });
@@ -145,7 +145,7 @@ export function InternalError({ranCode}) {
     suggestions.push(terms.try_running_code_again);
   }
   suggestions.push(terms.refresh_and_try_again, terms.try_using_different_browser);
-  if (SENTRY_DSN) {
+  if (SENTRY_DSN && canGiveFeedback) {
     suggestions.push(terms.give_feedback_from_menu);
   }
   return <div>
@@ -155,3 +155,20 @@ export function InternalError({ranCode}) {
     </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/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")
 );
 

frontend/src/shell/TerminalMessage.jsx

@@ -28,7 +28,7 @@ export default class TerminalMessage extends Component {
     }
 
     if (content.type === "internal_error_explanation") {
-      return <InternalError ranCode/>
+      return <InternalError ranCode canGiveFeedback/>
     }
 
     let color = "white";