organizing error handlers final location

examples/static_react_task/webapp/src/app.jsx

@@ -9,42 +9,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { BaseFrontend, LoadingScreen } from "./components/core_components.jsx";
-import { useMephistoTask } from "mephisto-task";
-
-class ErrorBoundary extends React.Component {
-
-  state = { error: null, errorInfo: null };
-
-  componentDidCatch(error, errorInfo) {
-    // Catch errors in any components below and re-render with error message
-      this.setState({
-      error: error,
-      errorInfo: errorInfo
-    })
-    // alert Mephisto worker of a component error
-    alert("Error from the frontend occurred: " + error)
-    // pass the error and errorInfo to the backend through /submit_task endpoint
-    this.props.handleError({error:error.message, errorInfo:errorInfo})
-  }
-
-  render() {
-    if (this.state.errorInfo) {
-      // Error path
-      return (
-        <div>
-          <h2>Something went wrong.</h2>
-          <details style={{ whiteSpace: 'pre-wrap' }}>
-            {this.state.error && this.state.error.toString()}
-            <br />
-            {this.state.errorInfo.componentStack}
-          </details>
-        </div>
-      );
-    }
-    // Normally, just render children
-    return this.props.children;
-  }
-}
+import { useMephistoTask, ErrorBoundary } from "mephisto-task";
 
 /* ================= Application Components ================= */
 
@@ -61,22 +26,6 @@ function MainApp() {
     isOnboarding,
   } = useMephistoTask();
 
-
-// Adding event listener instead of using window.onerror prevents the error to be caught twice
-window.addEventListener('error', function (event) {
-  if (event.error.hasBeenCaught !== undefined){
-    return false
-  }
-  event.error.hasBeenCaught = true
-  if (confirm("Do you want to report the error?")) {
-          console.log("You pressed OK!");
-          handleFatalError({errorMsg: event.error.message, error: event.error.stack})
-        } else {
-          console.log("You pressed Cancel!");
-        }
-        return true;
-})
-
   if (blockedReason !== null) {
     return (
       <section className="hero is-medium is-danger">

examples/static_react_task/webapp/src/components/core_components.jsx

@@ -66,9 +66,7 @@ function SimpleFrontend({ taskData, isOnboarding, onSubmit }) {
             <div className="control">
               <button
                 className="button is-success is-large"
-                // Test for type 2 errors
-                onClick={()=> {throw new Error("test error event_handler");}}
-//                 onClick={() => onSubmit({ rating: "good" })}
+                onClick={() => onSubmit({ rating: "good" })}
               >
                 Mark as Good
               </button>

mephisto/server/architects/router/deploy/server.js

@@ -487,9 +487,7 @@ app.post('/submit_task', upload.any(), function(req, res) {
 });
 
 app.post('/log_error', function(req, res) {
-  var provider_data = req.body;
-  let agent_id = provider_data.USED_AGENT_ID;
-  delete provider_data.USED_AGENT_ID;
+  const { USED_AGENT_ID: agent_id, ...provider_data } = req.body
   let log_packet = {
     packet_type: PACKET_TYPE_ERROR_LOG,
     sender_id: agent_id,

packages/mephisto-task/src/index.js

@@ -15,6 +15,7 @@ import {
   postErrorLog,
   postCompleteOnboarding,
   getBlockedExplanation,
+  ErrorBoundary,
 } from "./utils";
 
 export * from "./MephistoContext";
@@ -71,11 +72,22 @@ const useMephistoTask = function () {
 
    const handleFatalError = React.useCallback(
    (data) => {
-       console.log('inside handleFatalError ...')
        postErrorLog(state.agentId, data)
    },
    [state.agentId]);
 
+    // Adding event listener instead of using window.onerror prevents the error to be caught twice
+    window.addEventListener('error', function (event) {
+      if (event.error.hasBeenCaught !== undefined){
+        return false
+      }
+      event.error.hasBeenCaught = true
+      if (confirm("Do you want to report the error?")) {
+              handleFatalError({errorMsg: event.error.message, error: event.error.stack})
+            }
+            return true;
+    })
+
   function handleIncomingTaskConfig(taskConfig) {
     if (taskConfig.block_mobile && isMobile()) {
       setState({ blockedReason: "no_mobile" });
@@ -125,4 +137,4 @@ const useMephistoTask = function () {
   };
 };
 
-export { useMephistoTask };
+export { useMephistoTask , ErrorBoundary};

packages/mephisto-task/src/utils.js

@@ -3,10 +3,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+import React from "react";
 import Bowser from "bowser";
 const axios = require("axios");
 
+
 /*
   The following global methods are to be specified in wrap_crowd_source.js
   They are sideloaded and exposed as global import during the build process:
@@ -160,3 +161,38 @@ export function getBlockedExplanation(reason) {
     return `Sorry, you are not able to work on this task. (code: ${reason})`;
   }
 }
+
+export class ErrorBoundary extends React.Component {
+
+  state = { error: null, errorInfo: null };
+
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+      this.setState({
+      error: error,
+      errorInfo: errorInfo
+    })
+    // alert Mephisto worker of a component error
+    alert("Error from the frontend occurred: " + error)
+    // pass the error and errorInfo to the backend through /submit_task endpoint
+    this.props.handleError({error:error.message, errorInfo:errorInfo})
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo.componentStack}
+          </details>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}