better error msgs

Author: firu11

package.json

@@ -13,7 +13,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "format": "prettier --write src/ index.html tsconfig.json vite.config.ts .prettierrc.json",
-    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.2.6/core.wasm",
+    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.3.0/core.wasm",
     "fetch-wasm-latest": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/latest/download/core.wasm"
   },
   "dependencies": {

src/App.vue

@@ -7,11 +7,11 @@ import { createCalendarOnce } from '@/utils';
 import { syncAllWrapper } from '@/services/gitSync';
 import { settings } from '@/services/settings';
 import { useAlertModal } from '@/composables/modals/useAlertModal';
+import { logError } from '@/services/errorHandling';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
 import { loadCalendars } from '@/services/calendarCache';
 
 const { alert } = useAlertModal();
-
 const coreReady = ref(false); // waits for loadCalendars etc.
 
 async function sync() {
@@ -34,7 +34,8 @@ onBeforeMount(async () => {
 
     coreReady.value = true;
   } catch (err) {
-    alert(String(err));
+    logError(err);
+    alert(err);
   }
 });
 </script>

src/assets/locales/cs.json

@@ -160,7 +160,15 @@
     "errorICalFileRequired": "Vyberte soubor iCalendar s příponou .ics, který chcete importovat.",
     "errorICalDestinationRequired": "Vyberte dostupný zapisovatelný kalendář jako cíl importu.",
     "errorEncryptionKeyRequired": "Pokud je šifrování zapnuté, zadejte šifrovací klíč.",
-    "noWritableCalendars": "Před importem souboru vytvořte zapisovatelný kalendář."
+    "noWritableCalendars": "Před importem souboru vytvořte zapisovatelný kalendář.",
+    "coreError": {
+      "calendar": "Kalendář „{name}“: {message}",
+      "network": "Vzdálená služba není dostupná. Zkontrolujte URL, síťové připojení a nastavení proxy a zkuste to znovu.",
+      "auth": "Ověření se nezdařilo. Zkontrolujte přihlašovací údaje a zkuste to znovu.",
+      "forbidden": "Připojení k tomuto vzdálenému hostiteli není povoleno. Zkontrolujte URL a zkuste to znovu.",
+      "validation": "Operace obsahuje neplatná data. Zkontrolujte zadané údaje a zkuste to znovu.",
+      "storage": "Data kalendáře se nepodařilo načíst nebo uložit. Zkontrolujte dostupné úložiště a zkuste to znovu."
+    }
   },
   "colors": {
     "blue": "Modrá",

src/assets/locales/en.json

@@ -160,7 +160,15 @@
     "errorICalFileRequired": "Select an iCalendar file with the .ics extension to import.",
     "errorICalDestinationRequired": "Select an available writable calendar as the import destination.",
     "errorEncryptionKeyRequired": "Enter an encryption key when encryption is enabled.",
-    "noWritableCalendars": "Create a writable calendar before importing a file."
+    "noWritableCalendars": "Create a writable calendar before importing a file.",
+    "coreError": {
+      "calendar": "Calendar “{name}”: {message}",
+      "network": "Could not reach the remote service. Check the URL, network connection, and proxy settings, then try again.",
+      "auth": "Authentication failed. Check your credentials and try again.",
+      "forbidden": "Connections to this remote host are not allowed. Check the URL and try again.",
+      "validation": "The operation contains invalid data. Check your input and try again.",
+      "storage": "Calendar data could not be read or saved. Check the available storage and try again."
+    }
   },
   "colors": {
     "blue": "Blue",

src/components/DataManagement.vue

@@ -6,6 +6,7 @@ import { exportICal, exportZip } from '@/utils';
 import { CalendarCore } from '@/wasm/core-wrapper';
 import { useAlertModal } from '@/composables/modals/useAlertModal';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
+import { logError } from '@/services/errorHandling';
 
 type ExportFormat = 'zip' | 'ical';
 
@@ -43,7 +44,8 @@ async function exportCalendar() {
     }
   } catch (err) {
     if (!(err instanceof DOMException && err.name === 'AbortError')) {
-      await alert(String(err));
+      logError(err, selectedCalendarName.value);
+      alert(err, selectedCalendarName.value);
     }
   } finally {
     isExporting.value = false;
@@ -72,7 +74,8 @@ async function selectZip(event: Event) {
     notifyEventsChanged();
     await alert(t('settings.dataManagement.restoreSuccess'));
   } catch (err) {
-    await alert(String(err));
+    logError(err);
+    alert(err);
   } finally {
     isRestoring.value = false;
   }

src/components/modals/CalendarModal.vue

@@ -9,6 +9,7 @@ import { useI18n } from 'vue-i18n';
 import { syncAllWrapper } from '@/services/gitSync';
 import { cachedCalendars, refreshCalendars } from '@/services/calendarCache';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
+import { logError } from '@/services/errorHandling';
 
 const { t } = useI18n();
 const thisModal = useCalendarModal();
@@ -123,12 +124,20 @@ async function saveCalendar() {
     notifyEventsChanged();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    const calendarName = affectedCalendarName();
+    logError(err, calendarName);
+    alert(err, calendarName);
   } finally {
     isSaving.value = false;
   }
 }
 
+function affectedCalendarName(): string | undefined {
+  if (isICalFile.value) return form.destination || undefined;
+  if (form.how === 'Clone') return undefined;
+  return form.name || originalCalendar.value?.name;
+}
+
 async function createCalendar() {
   console.log('creating calendar', form.name, form.remoteURL);
 
@@ -211,7 +220,9 @@ async function deleteCal() {
     notifyEventsChanged();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    const calendarName = originalCalendar.value?.name;
+    logError(err, calendarName);
+    alert(err, calendarName);
   } finally {
     isDeleting.value = false;
   }

src/components/modals/EventModal.vue

@@ -9,6 +9,7 @@ import StrategyModal from '@/components/modals/StrategyModal.vue';
 import RepeatModal from '@/components/modals/RepeatModal.vue';
 import { useStrategyModal } from '@/composables/modals/useStrategyModal';
 import { useAlertModal } from '@/composables/modals/useAlertModal';
+import { logError } from '@/services/errorHandling';
 import { syncAllWrapper } from '@/services/gitSync';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
@@ -338,7 +339,8 @@ async function saveEvent() {
     void syncAllWrapper();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    logError(err, event.calendar);
+    alert(err, event.calendar);
   } finally {
     isSaving.value = false;
   }
@@ -367,7 +369,8 @@ async function deleteEvent() {
     void syncAllWrapper();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    logError(err, event.calendar);
+    alert(err, event.calendar);
   } finally {
     isDeleting.value = false;
   }
@@ -392,7 +395,8 @@ async function updateWithStrategy(strategy: UpdateStrategy) {
     void syncAllWrapper();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    logError(err, form.calendar);
+    alert(err, form.calendar);
   } finally {
     isUpdatingWithStrategy.value = false;
   }

src/components/modals/TagModal.vue

@@ -4,6 +4,7 @@ import { useAlertModal } from '@/composables/modals/useAlertModal';
 import { useTagModal } from '@/composables/modals/useTagModal';
 import { refreshCalendars } from '@/services/calendarCache';
 import { syncAllWrapper } from '@/services/gitSync';
+import { logError } from '@/services/errorHandling';
 import type { Tag } from '@/types/core';
 import { CalendarCore } from '@/wasm/core-wrapper';
 import { cloneDeep } from 'lodash-es';
@@ -77,7 +78,8 @@ async function saveTag() {
     refreshCalendars();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    logError(err, thisModal.calendarName.value);
+    alert(err, thisModal.calendarName.value);
   } finally {
     isSaving.value = false;
   }
@@ -103,7 +105,8 @@ async function deleteTag() {
     refreshCalendars();
     thisModal.close();
   } catch (err) {
-    alert(String(err));
+    logError(err, thisModal.calendarName.value);
+    alert(err, thisModal.calendarName.value);
   } finally {
     isDeleting.value = false;
   }

src/composables/modals/useAlertModal.ts

@@ -1,3 +1,4 @@
+import { formatErrorForUser } from '@/services/errorHandling';
 import { reactive } from 'vue';
 
 type ModalState = {
@@ -18,11 +19,11 @@ const modalState = reactive<ModalState>({
 });
 
 export function useAlertModal() {
-  function alert(message: string): Promise<void> {
+  function alert(message: unknown, calendarName?: string): Promise<void> {
     return new Promise((resolve) => {
       modalState.isOpen = true;
       modalState.type = 'alert';
-      modalState.message = message;
+      modalState.message = formatErrorForUser(message, calendarName);
       modalState.confirmText = 'OK';
       modalState.cancelText = '';
       modalState.resolve = () => resolve();

src/composables/useCalendarDrag.ts

@@ -2,6 +2,7 @@ import { computed, onScopeDispose, ref, shallowRef } from 'vue';
 import { DateTime } from 'luxon';
 
 import { useAlertModal } from '@/composables/modals/useAlertModal';
+import { logError } from '@/services/errorHandling';
 import { useEventModal } from '@/composables/modals/useEventModal';
 import { getCalendar } from '@/services/calendarCache';
 import { syncAllWrapper } from '@/services/gitSync';
@@ -484,7 +485,8 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
       await CalendarCore.updateEvent(completedEvent);
     } catch (error) {
       reset();
-      await alert(String(error));
+      logError(error, completedEvent.calendar);
+      alert(error, completedEvent.calendar);
       return;
     }
 
@@ -493,7 +495,8 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     } catch (error) {
       reset();
       void syncAllWrapper();
-      await alert(String(error));
+      logError(error, completedEvent.calendar);
+      alert(error, completedEvent.calendar);
       return;
     }