Refactor unhandled block error handling in UI

Author: ml-evs

webapp/src/components/datablocks/NotImplementedBlock.vue renamed to webapp/src/components/datablocks/ErrorBlock.vue

@@ -2,9 +2,7 @@
   <DataBlockBase :item_id="item_id" :block_id="block_id">
     <div class="alert alert-danger d-flex align-items-center ml-3">
       <font-awesome-icon icon="exclamation-triangle" class="mr-2" />
-      This block type ({{ blockType }}) is not implemented/installed for
-      this&nbsp;<i>datalab</i>&nbsp;instance. Please contact
-      your&nbsp;<i>datalab</i>&nbsp;administrator.
+      <span v-html="error" />
     </div>
   </DataBlockBase>
 </template>
@@ -30,6 +28,20 @@ export default {
     block() {
       return this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id];
     },
+    not_implemented_error() {
+      return (
+        "The requested block type '" +
+        this.blockType +
+        "' is not implemented/installed for this <i>datalab</i> instance. Please contact your <i>datalab</i> administrator."
+      );
+    },
+    error() {
+      let error_message = this.$store.state.block_errors[this.block_id];
+      if (!error_message) {
+        error_message = this.not_implemented_error;
+      }
+      return error_message;
+    },
     blockType() {
       return this.block?.blocktype;
     },

webapp/src/server_fetch_utils.js

@@ -82,9 +82,6 @@ function fetch_delete(url, body) {
 
 function handleResponse(response) {
   return response.text().then((text) => {
-    console.log("fetch was successful");
-    console.log(response);
-    console.log(text);
     const data = text && JSON.parse(text);
 
     if (!response.ok) {
@@ -531,12 +528,15 @@ export async function updateBlockFromServer(
         block_id: block_id,
         isSaved: response_json.saved_successfully,
       });
-      store.commit("setBlockImplementationError", { block_id, hasError: false });
+      store.commit("setBlockError", { block_id, hasError: false, error: "" });
     })
     .catch((error) => {
       console.warn(`Failed to update block ${block_id}:`, error);
-      store.commit("setBlockImplementationError", { block_id, hasError: true });
       store.commit("setBlockNotUpdating", block_id);
+      if (!error.includes("Invalid block type")) {
+        // Do not set any error message for NotImplemented as this will be handled elsewhere
+        store.commit("setBlockError", { block_id, error: error });
+      }
     });
 }
 

webapp/src/store/index.js

@@ -54,7 +54,7 @@ export default createStore({
         rows: 20,
       },
     },
-    block_implementation_errors: {},
+    block_errors: {},
   },
   mutations: {
     setServerInfo(state, serverInfo) {
@@ -362,11 +362,12 @@ export default createStore({
         ].filter((item) => !refcodes.includes(item.refcode));
       }
     },
-    setBlockImplementationError(state, { block_id, hasError }) {
-      if (hasError) {
-        state.block_implementation_errors[block_id] = true;
+    setBlockError(state, { block_id, error = null }) {
+      if (error) {
+        console.warn("Storing block error", block_id, error);
+        state.block_errors[block_id] = "Block creation API returned error: " + error;
       } else {
-        delete state.block_implementation_errors[block_id];
+        delete state.block_errors[block_id];
       }
     },
   },

webapp/src/views/EditPage.vue

@@ -118,7 +118,7 @@ import tinymce from "tinymce/tinymce";
 
 import { itemTypes, API_URL, customBlockTypes } from "@/resources.js";
 import BokehBlock from "@/components/datablocks/BokehBlock.vue";
-import NotImplementedBlock from "@/components/datablocks/NotImplementedBlock.vue";
+import ErrorBlock from "@/components/datablocks/ErrorBlock.vue";
 import { formatDistanceToNow } from "date-fns";
 
 import StyledBlockHelp from "@/components/StyledBlockHelp";
@@ -266,13 +266,15 @@ export default {
       });
     },
     getBlockDisplayType(block_id) {
-      if (this.$store.state.block_implementation_errors[block_id]) {
-        return NotImplementedBlock;
-      }
-
       const block = this.blocks[block_id];
-      if (!block || !block.blocktype) {
-        return NotImplementedBlock;
+      if (!block) {
+        return ErrorBlock;
+      }
+      if (!(block.blocktype in this.$store.state.blocksInfos)) {
+        console.log(
+          `Block with type ${block.blocktype} does not have a valid blocktype or is not in blocksInfos.`,
+        );
+        return ErrorBlock;
       }
 
       const type = block.blocktype;