new endpoint for frontend error log to server

examples/static_react_task/webapp/src/app.jsx

@@ -51,10 +51,7 @@ 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 {
     blockedReason,
     blockedExplanation,
@@ -66,6 +63,24 @@ 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;
+})
+// Test case for type 3 error
+// throw new Error("test error event_handler");
+
   if (blockedReason !== null) {
     return (
       <section className="hero is-medium is-danger">

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

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

mephisto/core/supervisor.py

@@ -22,6 +22,7 @@
     PACKET_TYPE_SUBMIT_ONBOARDING,
     PACKET_TYPE_REQUEST_ACTION,
     PACKET_TYPE_UPDATE_AGENT_STATUS,
+    PACKET_TYPE_ERROR_LOG,
 )
 from mephisto.data_model.worker import Worker
 from mephisto.data_model.qualification import worker_is_qualified
@@ -633,14 +634,22 @@ def _get_init_data(self, packet, channel_info: ChannelInfo):
                 packet.receiver_id = agent_id
                 agent_info.agent.pending_observations.append(packet)
 
+    @staticmethod
+    def _log_frontend_error(packet):
+        error_msg = packet.data['final_data'].get("errorMsg")
+        error_stack = packet.data['final_data'].get("error")
+        logger.info(f"[FRONT_END_ERROR]: {error_msg}")
+        logger.info(f"[FRONT_END_ERROR_Trace]: {error_stack}")
+
     def _on_message(self, packet: Packet, channel_info: ChannelInfo):
         """Handle incoming messages from the channel"""
         # TODO(#102) this method currently assumes that the packet's sender_id will
         # always be a valid agent in our list of agent_infos. At the moment this
         # is a valid assumption, but will not be on recovery from catastrophic failure.
         if packet.type == PACKET_TYPE_AGENT_ACTION:
-            logger.info(f"[SARA] sent packet is {packet}")
             self._on_act(packet, channel_info)
+        elif packet.type == PACKET_TYPE_ERROR_LOG:
+            self._log_frontend_error(packet)
         elif packet.type == PACKET_TYPE_NEW_AGENT:
             self._register_agent(packet, channel_info)
         elif packet.type == PACKET_TYPE_SUBMIT_ONBOARDING:

mephisto/data_model/packet.py

@@ -18,6 +18,7 @@
 PACKET_TYPE_ALIVE = "alive"
 PACKET_TYPE_PROVIDER_DETAILS = "provider_details"
 PACKET_TYPE_SUBMIT_ONBOARDING = "submit_onboarding"
+PACKET_TYPE_ERROR_LOG = "log_error"
 
 
 class Packet:

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

@@ -81,6 +81,7 @@ const PACKET_TYPE_ALIVE = 'alive'
 const PACKET_TYPE_PROVIDER_DETAILS = 'provider_details'
 const PACKET_TYPE_SUBMIT_ONBOARDING = 'submit_onboarding'
 const PACKET_TYPE_HEARTBEAT = 'heartbeat'
+const PACKET_TYPE_ERROR_LOG = 'log_error'
 
 // State for agents tracked by the server
 class LocalAgentState {
@@ -294,6 +295,8 @@ wss.on('connection', function(socket) {
           update_wanted_acts(packet.sender_id, false);
           send_status_for_agent(packet.sender_id);
         }
+      } else if(packet['packet_type'] == PACKET_TYPE_ERROR_LOG) {
+         handle_forward(packet);
       } else if (packet['packet_type'] == PACKET_TYPE_ALIVE) {
         debug_log('Agent alive: ', packet);
         handle_alive(socket, packet);
@@ -476,6 +479,20 @@ 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;
+  let log_packet = {
+    packet_type: PACKET_TYPE_ERROR_LOG,
+    sender_id: agent_id,
+    receiver_id: SYSTEM_SOCKET_ID,
+    data: provider_data,
+  };
+  _send_message(mephisto_socket, log_packet);
+  res.json({status: 'Error log sent!'})
+});
+
 // Quick status check for this server
 app.get('/is_alive', function(req, res) {
   res.json({status: 'Alive!'});

packages/mephisto-task/src/index.js

@@ -12,6 +12,7 @@ import {
   isMobile,
   getInitTaskData,
   postCompleteTask,
+  postErrorLog,
   postCompleteOnboarding,
   getBlockedExplanation,
 } from "./utils";
@@ -71,7 +72,8 @@ const useMephistoTask = function () {
    const handleFatalError = React.useCallback(
    (data) => {
        console.log('inside handleFatalError ...')
-       handleSubmit(data)
+       postErrorLog(state.agentId, data)
+//       handleSubmit(data)
    },
    [state.agentId]);
 

packages/mephisto-task/src/utils.js

@@ -132,6 +132,16 @@ export function postCompleteTask(agent_id, complete_data) {
     });
 }
 
+export function postErrorLog(agent_id, complete_data) {
+  return postData("/log_error", {
+    USED_AGENT_ID: agent_id,
+    final_data: complete_data,
+  })
+    .then(function (data) {
+      console.log("Error log sent to server");
+    });
+}
+
 export function getBlockedExplanation(reason) {
   const explanations = {
     no_mobile: