42772 condition editor error handling (#502)

* fix password reset bug

* condition editor error handling

* fix syntax error

* fix syntax

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/global/ErrorBoundary.vue

@@ -8,23 +8,26 @@
     />
   </template>
   
-  <script setup lang="ts">
+<script setup>
-  const error = ref()
+    const error = ref()
-  const emit = defineEmits(['on-error'])
+    const emit = defineEmits(['on-error'])
-  function clearError() {
+    function clearError() {
-    error.value = undefined
+        error.value = undefined
-  }
-  onErrorCaptured(err => {
-    error.value = err
-    emit('on-error', err)
-    return false
-  })
-  const route = useRoute()
-  watch(
-    () => route.fullPath,
-    () => {
-      error.value = undefined
     }
-  )
+    onErrorCaptured(err => {
-  </script>
+        error.value = err
+        emit('on-error', err)
+        return false
+    })
+    const route = useRoute()
+    watch(
+        () => route.fullPath,
+        () => {
+            error.value = undefined
+        }
+    )
+    defineExpose({
+        clearError
+    })
+</script>
   

client/components/open/forms/components/FormEditorErrorHandler.vue

@@ -37,6 +37,7 @@
     clearError()
   }
   const onFormEditorError = (error) => {
+    console.error('Form Editor Error Handled', error)
     crisp.pauseChatBot()
     const eventData = {
       message: error.message,

client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue

@@ -1,40 +1,42 @@
 <template>
-  <query-builder
+  <ErrorBoundary @on-error="handleError" ref="error_boundary">
-    v-model="query"
+    <query-builder
-    :rules="rules"
+      v-model="query"
-    :config="config"
+      :rules="rules"
-    @update:model-value="onChange"
+      :config="config"
-  >
+      @update:model-value="onChange"
-    <template #groupOperator="props">
+    >
-      <div
+      <template #groupOperator="props">
-        class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-1 flex"
+        <div
-      >
+          class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-1 flex"
-        <p class="mr-2 font-semibold">
+        >
-          Operator
+          <p class="mr-2 font-semibold">
-        </p>
+            Operator
-        <select-input
+          </p>
-          wrapper-class="relative"
+          <select-input
-          :model-value="props.currentOperator"
+            wrapper-class="relative"
-          :options="props.operators"
+            :model-value="props.currentOperator"
-          emit-key="identifier"
+            :options="props.operators"
-          option-key="identifier"
+            emit-key="identifier"
-          name="operator-input"
+            option-key="identifier"
-          margin-bottom=""
+            name="operator-input"
-          @update:model-value="props.updateCurrentOperator($event)"
+            margin-bottom=""
+            @update:model-value="props.updateCurrentOperator($event)"
+          />
+        </div>
+      </template>
+      <template #groupControl="props">
+        <group-control-slot :group-ctrl="props" />
+      </template>
+      <template #rule="ruleCtrl">
+        <component
+          :is="ruleCtrl.ruleComponent"
+          :model-value="ruleCtrl.ruleData"
+          @update:model-value="ruleCtrl.updateRuleData"
         />
-      </div>
+      </template>
-    </template>
+    </query-builder>
-    <template #groupControl="props">
+  </ErrorBoundary> 
-      <group-control-slot :group-ctrl="props" />
-    </template>
-    <template #rule="ruleCtrl">
-      <component
-        :is="ruleCtrl.ruleComponent"
-        :model-value="ruleCtrl.ruleData"
-        @update:model-value="ruleCtrl.updateRuleData"
-      />
-    </template>
-  </query-builder>
 </template>
 
 <script>
@@ -130,7 +132,16 @@ export default {
     onChange() {
       this.$emit("update:modelValue", this.query)
     },
-  },
+    // If there was some changes to the structure, causing an issue, we clear the condition
+    handleError (error) {
+      this.$nextTick(() => {
+        console.error('Error with condition - clearing previous value', error)
+        this.query = null
+        this.onChange()
+        this.$refs['error_boundary'].clearError()
+      })
+    }
+  }
 }
 </script>
 <style src="query-builder-vue-3/dist/style.css" />