front and backend error with handleSubmit

examples/static_react_task/re-build.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+cd ../../packages/mephisto-task
+npm install
+npm run dev
+cd ../../examples/static_react_task/webapp/
+rm package-lock.json
+npm install
+npm link mephisto-task
+npm run dev
+

examples/static_react_task/webapp/src/app.jsx

@@ -11,7 +11,6 @@ import ReactDOM from "react-dom";
 import { BaseFrontend, LoadingScreen } from "./components/core_components.jsx";
 import { useMephistoTask } from "mephisto-task";
 
-
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -20,14 +19,14 @@ class ErrorBoundary extends React.Component {
 
   componentDidCatch(error, errorInfo) {
     // Catch errors in any components below and re-render with error message
-    this.props.handleError(error, errorInfo)
-    console.log("error happened in static_react_task: ", error)
-    console.log("error happened in static_react_task info: ", errorInfo)
-    this.setState({
+      this.setState({
       error: error,
       errorInfo: errorInfo
     })
-    // You can also log error messages to an error reporting service here
+    // alert Mephisto worker of a component error
+    alert("error from a component" + error)
+    // pass the error and errorInfo to the backend through /submit_task endpoint
+    this.props.handleError({error:error.message, errorInfo:errorInfo})
   }
 
   render() {
@@ -52,14 +51,18 @@ class ErrorBoundary extends React.Component {
 /* ================= Application Components ================= */
 
 function MainApp() {
+//     window.onerror = (msg, url, lineNo, columnNo, error) => {
+//     console.log(msg)
+//       alert("error from Window: " + msg)
+//     }
   const {
-    handleFatalError,
     blockedReason,
     blockedExplanation,
     isPreview,
     isLoading,
     initialTaskData,
     handleSubmit,
+    handleFatalError,
     isOnboarding,
   } = useMephistoTask();
 
@@ -89,7 +92,6 @@ function MainApp() {
       </section>
     );
   }
-
   return (
     <div>
     <ErrorBoundary handleError={handleFatalError}>

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

@@ -49,6 +49,8 @@ function SimpleFrontend({ taskData, isOnboarding, onSubmit }) {
   if (isOnboarding) {
     return <OnboardingComponent onSubmit={onSubmit} />;
   }
+  throw new Error('Test SimpleFrontend component error!');
+
   return (
     <div>
       <Directions>
@@ -62,8 +64,7 @@ function SimpleFrontend({ taskData, isOnboarding, onSubmit }) {
             <div className="control">
               <button
                 className="button is-success is-large"
-                onClick={() => {throw new Error("test Sara!");}}
-//                 onClick={() => onSubmit({ rating: "good" })}
+                onClick={() => onSubmit({ rating: "good" })}
               >
                 Mark as Good
               </button>

packages/mephisto-task/src/index.js

@@ -69,10 +69,11 @@ const useMephistoTask = function () {
   );
 
    const handleFatalError = React.useCallback(
-   (error, error_info) => {
-   console.log('inside handleFatalError ...')
-   handleSubmit( { 'error': error, 'error_info': error_info })
-   })
+   (data) => {
+       console.log('inside handleFatalError ...')
+       handleSubmit(data)
+   },
+   [state.agentId]);
 
   function handleIncomingTaskConfig(taskConfig) {
     if (taskConfig.block_mobile && isMobile()) {
@@ -114,12 +115,12 @@ const useMephistoTask = function () {
   }, []);
 
   return {
-    handleFatalError,
     ...state,
     isLoading: !state.loaded,
     blockedExplanation:
       state.blockedReason && getBlockedExplanation(state.blockedReason),
     handleSubmit,
+    handleFatalError,
   };
 };