55919 form editor error boundary (#494)

* fix password reset bug

* form editor error boundary

* fix crisp

* fix layout on create and edit pages

---------

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

client/components/open/forms/components/FormEditor.vue

@@ -81,6 +81,7 @@
         </v-button>
       </div>
     </div>
+    <FormEditorErrorHandler>
 
     <div class="w-full flex grow overflow-y-scroll relative bg-gray-50">
       <div
@@ -116,6 +117,7 @@
         @close="showFormErrorModal = false"
       />
     </div>
+  </FormEditorErrorHandler>
   </div>
   <div
     v-else
@@ -141,10 +143,12 @@ import FormAccess from "./form-components/FormAccess.vue"
 import { validatePropertiesLogic } from "~/composables/forms/validatePropertiesLogic.js"
 import opnformConfig from "~/opnform.config.js"
 import { captureException } from "@sentry/core"
+import FormEditorErrorHandler from '~/components/open/forms/components/FormEditorErrorHandler.vue'
 
 export default {
   name: "FormEditor",
   components: {
+    FormEditorErrorHandler,
     UndoRedo,
     FormEditorSidebar,
     FormEditorPreview,
@@ -250,9 +254,6 @@ export default {
         },
       ]
     },
-    helpUrl() {
-      return this.opnformConfig.links.help
-    },
   },
 
   watch: {},

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

@@ -0,0 +1,69 @@
+<template>
+    <ErrorBoundary @on-error="onFormEditorError">
+  
+      <template #error="{ error, clearError }">
+        <div class="flex-grow w-full flex items-center justify-center flex-col gap-4">
+          <h1 class="text-blue-800 text-2xl font-medium">Oops! Something went wrong.</h1>
+          <p class="text-gray-500 max-w-lg text-center">It looks like your last action caused an issue on our side. We
+            apologize for
+            the
+            inconvenience.</p>
+          <div class="flex gap-2 mt-4">
+            <UButton icon="i-material-symbols-undo" @click="clearEditorError(error, clearError)">Go back one step
+            </UButton>
+            <UButton variant="outline" icon="i-heroicons-chat-bubble-left-right-16-solid"
+                     @click="onErrorContact(error)">
+              Report this error
+            </UButton>
+          </div>
+        </div>
+      </template>
+  
+      <slot />
+    </ErrorBoundary>
+  </template>
+  
+  <script setup>
+  import { computed } from 'vue'
+  const crisp = useCrisp()
+  const workingFormStore = useWorkingFormStore()
+  const authStore = useAuthStore()
+  const form = storeToRefs(workingFormStore).content
+  const user = computed(() => authStore.user)
+  // Clear error and go back 1 step in history
+  const clearEditorError = (error, clearError) => {
+    crisp.enableChatbot()
+    workingFormStore.undo()
+    clearError()
+  }
+  const onFormEditorError = (error) => {
+    crisp.pauseChatBot()
+    const eventData = {
+      message: error.message,
+      // take first 200 characters
+      stack: error.stack.substring(0, 100)
+    }
+    try {
+      crisp.pushEvent('form-editor-error', eventData)
+    } catch (e) {
+      console.error('Failed to send event to crisp', e, eventData)
+    }
+  }
+  const onErrorContact = (error) => {
+    console.log('Contacting via crisp for an error', error)
+    crisp.pauseChatBot()
+    let errorReport = 'Hi there, I have a technical issue with the form editor.'
+    if (form.value.slug) {
+      errorReport += ` The form I am editing is: \`${form.value.slug}\`.`
+    }
+    errorReport += ` And here are technical details about the error: \`\`\`${error.stack}\`\`\``
+    try {
+      crisp.openAndShowChat(errorReport)
+      crisp.showMessage(`Hi there, we're very sorry to hear you experienced an issue with NoteForms.
+          We'll be in touch about it very soon! In the meantime, I recommend that you try going back one step, and save your changes.`, 2000)
+    } catch (e) {
+      console.error('Crisp error', e)
+    }
+  }
+  </script>
+