Serialize errors we encounter

This PR makes it so that we serialize errors if we're going to send them across the SSR boundary. The problem this fixes is that some errors (like Nuxt reporting composable usage outside a `setup` function) have functions and other non-POJO/non-serializable info with them, which makes our `useState<Error>` implode, ironically hiding the original error.

This introduces a new non-dev dependency (which I don't do lightly) on `serialize-error`, a small (<1kB min + gzip'd) and popular dependency for doing the surprisingly nontrivial task of serializing different types of errors and preserving type information.

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"
   }