fix: correctly handle urlVariables errors

src-electron/main/window/window-base.ts

@@ -1,6 +1,7 @@
 import type { ElectronIpcListenKey } from 'src/types';
 
 import pkg from 'app/package.json';
+import { errorCatcher } from 'app/src-electron/utils';
 import {
   app,
   BrowserWindow,
@@ -131,6 +132,6 @@ export function closeOtherWindows(source: BrowserWindow) {
       if (win !== source) win.close();
     }
   } catch (e) {
-    console.error(e);
+    errorCatcher(e);
   }
 }

src-electron/main/window/window-state.ts

@@ -1,3 +1,4 @@
+import { errorCatcher } from 'app/src-electron/utils';
 import {
   app,
   BrowserWindow,
@@ -190,7 +191,7 @@ export class StatefulBrowserWindow {
       ensureDirSync(dirname(this.fullStoreFileName));
       writeJsonSync(this.fullStoreFileName, this.state);
     } catch (e) {
-      console.error(e);
+      errorCatcher(e);
     }
   };
 
@@ -230,7 +231,7 @@ export class StatefulBrowserWindow {
       this.state.displayBounds = display.bounds;
       this.state.displayScaleFactor = display.scaleFactor;
     } catch (e) {
-      console.error(e);
+      errorCatcher(e);
     }
   };
 

src-electron/utils.ts

@@ -84,6 +84,7 @@ export function errorCatcher(
     captureException(error, context);
   } else {
     console.error(error);
+    console.warn('context', context);
   }
 }
 

src/components/dialog/DialogDisplayPopup.vue

@@ -401,7 +401,7 @@ const setMediaBackground = (filepath: string) => {
       notifyCustomBackgroundSet();
     }
   } catch (error) {
-    console.error(error);
+    errorCatcher(error);
     if (filepath) notifyInvalidBackgroundFile();
     mediaWindowCustomBackground.value = '';
   } finally {

src/components/form-inputs/SelectInput.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import type { SettingsItemRule } from 'src/types';
+import type { SettingsItemRule, SettingsValues } from 'src/types';
 
 import { storeToRefs } from 'pinia';
 import { useLocale } from 'src/composables/useLocale';
@@ -45,7 +45,7 @@ const props = defineProps<{
   label?: null | string;
   list?: string;
   rules?: SettingsItemRule[] | undefined;
-  settingId?: string;
+  settingId?: keyof SettingsValues;
   useInput?: boolean;
 }>();
 

src/components/form-inputs/TextInput.vue

@@ -24,7 +24,11 @@
 </template>
 
 <script setup lang="ts">
-import type { SettingsItemAction, SettingsItemRule } from 'src/types';
+import type {
+  SettingsItemAction,
+  SettingsItemRule,
+  SettingsValues,
+} from 'src/types';
 
 import { storeToRefs } from 'pinia';
 import { getRules, performActions } from 'src/helpers/settings';
@@ -45,7 +49,7 @@ const customError = computed(
 );
 
 const customFailure = computed(() => {
-  if (props.settingId?.startsWith('baseUrl')) {
+  if (props.settingId === 'baseUrl') {
     return !urlVariables.value?.mediator;
   } else {
     return false;
@@ -55,7 +59,7 @@ const customFailure = computed(() => {
 const customSuccess = computed(() => {
   if (props.settingId?.startsWith('obs')) {
     return obsConnectionState.value === 'connected';
-  } else if (props.settingId?.startsWith('baseUrl')) {
+  } else if (props.settingId === 'baseUrl') {
     return !!urlVariables.value?.base && !!urlVariables.value?.mediator;
   } else {
     return false;
@@ -66,7 +70,7 @@ const props = defineProps<{
   actions?: SettingsItemAction[];
   label?: null | string;
   rules?: SettingsItemRule[];
-  settingId?: string;
+  settingId?: keyof SettingsValues;
 }>();
 
 const model = defineModel<null | string>({ required: true });

src/helpers/api.ts

@@ -9,6 +9,7 @@ import { errorCatcher } from 'src/helpers/error-catcher';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const fetchRaw = async (url: string, init?: RequestInit) => {
+  console.debug('fetchRaw', { init, url });
   return fetch(url, init);
 };
 
@@ -17,18 +18,33 @@ export const fetchJson = async <T>(
   params?: URLSearchParams,
 ): Promise<null | T> => {
   try {
+    if (!url) return null;
     const response = await fetchRaw(
       `${url}?${params ? params.toString() : ''}`,
     );
     if (response.ok) {
-      return response.json();
+      return await response.json();
     } else if (![400, 404].includes(response.status)) {
       errorCatcher(response, {
-        contexts: { fn: { name: 'fetchJson', params, url } },
+        contexts: {
+          fn: {
+            name: 'fetchJson',
+            params: Object.fromEntries(params || []),
+            url,
+          },
+        },
       });
     }
   } catch (e) {
-    errorCatcher(e, { contexts: { fn: { name: 'fetchJson', params, url } } });
+    errorCatcher(e, {
+      contexts: {
+        fn: {
+          name: 'fetchJson',
+          params: Object.fromEntries(params || []),
+          url,
+        },
+      },
+    });
   }
   return null;
 };

src/helpers/error-catcher.ts

@@ -12,6 +12,7 @@ const errorCatcher = async (
     captureException(originalError, context);
   } else {
     console.error(originalError);
+    console.warn('context', context);
   }
 };
 

src/helpers/fonts.ts

@@ -1,21 +1,44 @@
 import type { FontName } from 'src/types';
 
 import { Buffer } from 'buffer';
-import { FONT_URLS } from 'src/constants/fonts';
+import { useJwStore } from 'src/stores/jw';
 
+import { fetchRaw } from './api';
 import { errorCatcher } from './error-catcher';
 import { getFontsPath } from './fs';
 
 const { fs, path } = window.electronApi;
 
+export const setElementFont = async (fontName: FontName) => {
+  if (!fontName) return;
+
+  try {
+    const fontFace = new FontFace(
+      fontName,
+      'url("' + (await getLocalFontPath(fontName)) + '")',
+    );
+    await fontFace.load();
+    document.fonts.add(fontFace);
+  } catch (error) {
+    const fontFace = new FontFace(
+      fontName,
+      'url("' + useJwStore().fontUrls[fontName] + '")',
+    );
+    await fontFace.load();
+    document.fonts.add(fontFace);
+    errorCatcher(error);
+  }
+};
+
 const getLocalFontPath = async (fontName: FontName) => {
   const fontsDir = await getFontsPath();
   const fontFileName = `${fontName}.woff2`;
   const fontPath = path.join(fontsDir, fontFileName);
   let mustDownload = false;
+  const fontUrls = useJwStore().fontUrls;
   try {
     if (await fs.exists(fontPath)) {
-      const headReq = await fetch(FONT_URLS[fontName], {
+      const headReq = await fetchRaw(fontUrls[fontName], {
         method: 'HEAD',
       });
       if (headReq.ok) {
@@ -34,7 +57,7 @@ const getLocalFontPath = async (fontName: FontName) => {
   }
   if (mustDownload) {
     await fs.ensureDir(fontsDir);
-    const response = await fetch(FONT_URLS[fontName], {
+    const response = await fetchRaw(fontUrls[fontName], {
       method: 'GET',
     });
     if (!response.ok) {
@@ -46,5 +69,3 @@ const getLocalFontPath = async (fontName: FontName) => {
   }
   return fontPath;
 };
-
-export { getLocalFontPath };

src/helpers/jw-media.ts

@@ -1732,6 +1732,10 @@ const setUrlVariables = async (baseUrl: string | undefined) => {
     if (attributes['data-pubmedia_url']) {
       jwStore.urlVariables.pubMedia = attributes['data-pubmedia_url'];
     }
+
+    if (!jwStore.urlVariables.mediator || !jwStore.urlVariables.pubMedia) {
+      resetUrlVariables();
+    }
   } catch (e) {
     if (jwStore.urlVariables.base) {
       requestControllers

src/helpers/settings.ts

@@ -74,7 +74,7 @@ const getRules = (rules: SettingsItemRule[] | undefined) => {
           }
         })
         .filter((r): r is ValidationRule => !!r) || [];
-    return filteredRules;
+    return filteredRules.length ? filteredRules : undefined;
   } catch (error) {
     errorCatcher(error);
     return undefined;
@@ -134,7 +134,7 @@ const parseJsonSafe = <T>(json: null | string | T, fallback: T): T => {
   try {
     return typeof json === 'string' ? (JSON.parse(json) as T) : json;
   } catch (e) {
-    console.error(e);
+    errorCatcher(e);
     return fallback;
   }
 };

src/layouts/MainLayout.vue

@@ -63,7 +63,7 @@ import {
   updateLookupPeriod,
 } from 'src/helpers/date';
 import { errorCatcher } from 'src/helpers/error-catcher';
-import { getLocalFontPath } from 'src/helpers/fonts';
+import { setElementFont } from 'src/helpers/fonts';
 import {
   downloadBackgroundMusic,
   downloadSongbookVideos,
@@ -218,9 +218,11 @@ whenever(
 
 watchDebounced(
   () => [currentSettings.value?.baseUrl, currentCongregation.value],
-  ([newBaseUrl, newCongregation], [oldBaseUrl, oldCongregation]) => {
-    if (newBaseUrl !== oldBaseUrl && newCongregation === oldCongregation)
-      setUrlVariables(newBaseUrl);
+  async ([newBaseUrl, newCongregation], [oldBaseUrl, oldCongregation]) => {
+    if (newBaseUrl !== oldBaseUrl && newCongregation === oldCongregation) {
+      await setUrlVariables(newBaseUrl);
+      setElementFont('JW-Icons');
+    }
   },
   { debounce: 500 },
 );
@@ -325,20 +327,6 @@ bcClose.onmessage = (event) => {
   }
 };
 
-const loadJwIconsFont = async () => {
-  try {
-    const fontName = 'JW-Icons';
-    const fontFace = new FontFace(
-      fontName,
-      'url("' + (await getLocalFontPath(fontName)) + '")',
-    );
-    await fontFace.load();
-    document.fonts.add(fontFace);
-  } catch (error) {
-    errorCatcher(error);
-  }
-};
-
 const initListeners = () => {
   window.electronApi.onLog(({ ctx, level, msg }) => {
     console[level](`[main] ${msg}`, ctx);
@@ -401,7 +389,7 @@ onMounted(() => {
   if (!currentSettings.value) navigateToCongregationSelector();
   // add overflow hidden to body
   document.body.style.overflow = 'hidden';
-  loadJwIconsFont();
+  setElementFont('JW-Icons');
   initListeners();
 });
 

src/pages/MediaPlayerPage.vue

@@ -69,15 +69,17 @@
   </q-page-container>
 </template>
 <script setup lang="ts">
-import type { FontName } from 'src/types';
-
 import Panzoom, { type PanzoomObject } from '@panzoom/panzoom';
-import { useBroadcastChannel, watchDeep, whenever } from '@vueuse/core';
+import {
+  useBroadcastChannel,
+  watchDeep,
+  watchImmediate,
+  whenever,
+} from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { FONT_URLS } from 'src/constants/fonts';
 import { errorCatcher } from 'src/helpers/error-catcher';
-import { getLocalFontPath } from 'src/helpers/fonts';
+import { setElementFont } from 'src/helpers/fonts';
 import {
   isAudio,
   isImage,
@@ -87,7 +89,7 @@ import {
 import { createTemporaryNotification } from 'src/helpers/notifications';
 import { useCurrentStateStore } from 'src/stores/current-state';
 import { useJwStore } from 'src/stores/jw';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const currentState = useCurrentStateStore();
 const {
@@ -379,28 +381,11 @@ $q.iconMapFn = (iconName) => {
   }
 };
 
-const setElementFont = async (fontName: FontName) => {
-  if (!fontName) return;
-  try {
-    const fontFace = new FontFace(
-      fontName,
-      'url("' + (await getLocalFontPath(fontName)) + '")',
-    );
-    await fontFace.load();
-    document.fonts.add(fontFace);
-  } catch (error) {
-    const fontFace = new FontFace(
-      fontName,
-      'url("' + FONT_URLS[fontName] + '")',
-    );
-    await fontFace.load();
-    document.fonts.add(fontFace);
-    errorCatcher(error);
-  }
-};
-
-onMounted(() => {
-  setElementFont('WT-ClearText-Bold');
-  setElementFont('JW-Icons');
-});
+watchImmediate(
+  () => jwStore.urlVariables,
+  () => {
+    setElementFont('WT-ClearText-Bold');
+    setElementFont('JW-Icons');
+  },
+);
 </script>