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,7 +8,7 @@
     />
   </template>
   
-  <script setup lang="ts">
+<script setup>
     const error = ref()
     const emit = defineEmits(['on-error'])
     function clearError() {
@@ -26,5 +26,8 @@
             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,4 +1,5 @@
 <template>
+  <ErrorBoundary @on-error="handleError" ref="error_boundary">
     <query-builder
       v-model="query"
       :rules="rules"
@@ -35,6 +36,7 @@
         />
       </template>
     </query-builder>
+  </ErrorBoundary> 
 </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" />