Serialize errors we encounter (#66)

frontend/app.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { serializeError } from 'serialize-error'
+
 const { loading: { clearLoading }, error: { errorModalVisible, error } } = useModal()
 
 const handleError = (err: Error) => {
-  error.value = err
+  error.value = serializeError(err)
   errorModalVisible.value = true
   clearLoading()
 }

frontend/components/modal/Error.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { deserializeError } from 'serialize-error'
+
 const { error: { errorModalVisible, error: modalError } } = useModal()
 const error = useError()
 const router = useRouter()
@@ -26,7 +28,7 @@ const maybeGoBack = async () => {
 }
 
 const fullError = computed(() => {
-  const err = error.value ?? modalError.value
+  const err = error.value ?? deserializeError(modalError.value)
   if (err instanceof Error) {
     return {
       name: err.name ?? '',

frontend/composables/useModal.ts

@@ -1,4 +1,5 @@
 import { type Ref } from 'vue'
+import { type ErrorObject } from 'serialize-error'
 
 export const useModal = () => {
   const prefix = 'useModal'
@@ -22,7 +23,7 @@ export const useModal = () => {
 
   // error
   const errorModalVisible = newModalVisibilityState('errorModalVisible')
-  const error = useState<Error>('errorModal.error')
+  const error = useState<ErrorObject>('errorModal.error')
 
   // loading
   const loadingSet = useState<Set<string>>(`${prefix}.loadingSet`, () => new Set<string>())

frontend/package.json

@@ -44,6 +44,7 @@
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.32.0",
+    "serialize-error": "^11.0.3",
     "uuid": "^9.0.0",
     "vue-i18n": "^9.5.0"
   }