chore(web): cleanup promise handling (#7382)

* no-misused-promises

* no-floating-promises

* format

* revert for now

* remove load function

* require-await

* revert a few no-floating-promises changes that would cause no-misused-promises failures

* format

* fix a few more

* fix most remaining errors

* executor-queue

* executor-queue.spec

* remove duplicate comments by grouping rules

* upgrade sveltekit and enforce rules

* oops. move await

* try this

* just ignore for now since it's only a test

* run in parallel

* Update web/src/routes/admin/jobs-status/+page.svelte

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* remove Promise.resolve call

* rename function

* remove unnecessary warning silencing

* make handleError sync

* fix new errors from recently merged PR to main

* extract method

* use handlePromiseError

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/shared-components/map/map.svelte

@@ -2,7 +2,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { Theme } from '$lib/constants';
   import { colorTheme, mapSettings } from '$lib/stores/preferences.store';
-  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getMapStyle, MapTheme, type MapMarkerResponseDto } from '@immich/sdk';
   import { mdiCog, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
@@ -152,9 +152,7 @@
         applyToClusters
         asButton
         let:feature
-        on:click={(event) => {
-          handleClusterClick(event.detail.feature.properties.cluster_id, map);
-        }}
+        on:click={(event) => handlePromiseError(handleClusterClick(event.detail.feature.properties.cluster_id, map))}
       >
         <div
           class="rounded-full w-[40px] h-[40px] bg-immich-primary text-immich-gray flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"

web/src/lib/components/shared-components/navigation-loading-bar.svelte

@@ -8,8 +8,8 @@
     easing: cubicOut,
   });
 
-  onMount(() => {
-    progress.set(90);
+  onMount(async () => {
+    await progress.set(90);
   });
 </script>
 

web/src/lib/components/shared-components/portal/portal.svelte

@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+  import { handlePromiseError } from '$lib/utils';
   import { tick } from 'svelte';
 
   /**
@@ -36,7 +37,7 @@
       }
     }
 
-    update(target);
+    handlePromiseError(update(target));
     return {
       update,
       destroy,

web/src/lib/components/shared-components/progress-bar/progress-bar.svelte

@@ -6,6 +6,8 @@
 </script>
 
 <script lang="ts">
+  import { handlePromiseError } from '$lib/utils';
+
   import { createEventDispatcher, onMount } from 'svelte';
   import { tweened } from 'svelte/motion';
 
@@ -24,14 +26,14 @@
 
   export let duration = 5;
 
-  const onChange = () => {
+  const onChange = async () => {
     progress = setDuration(duration);
-    play();
+    await play();
   };
 
   let progress = setDuration(duration);
 
-  $: duration, onChange();
+  $: duration, handlePromiseError(onChange());
 
   $: {
     if ($progress === 1) {
@@ -45,35 +47,35 @@
     paused: void;
   }>();
 
-  onMount(() => {
+  onMount(async () => {
     if (autoplay) {
-      play();
+      await play();
     }
   });
 
-  export const play = () => {
+  export const play = async () => {
     status = ProgressBarStatus.Playing;
     dispatch('playing');
-    progress.set(1);
+    await progress.set(1);
   };
 
-  export const pause = () => {
+  export const pause = async () => {
     status = ProgressBarStatus.Paused;
     dispatch('paused');
-    progress.set($progress);
+    await progress.set($progress);
   };
 
-  export const restart = (autoplay: boolean) => {
-    progress.set(0);
+  export const restart = async (autoplay: boolean) => {
+    await progress.set(0);
 
     if (autoplay) {
-      play();
+      await play();
     }
   };
 
-  export const reset = () => {
+  export const reset = async () => {
     status = ProgressBarStatus.Paused;
-    progress.set(0);
+    await progress.set(0);
   };
 
   function setDuration(newDuration: number) {

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -10,6 +10,7 @@
   import SearchFilterBox from './search-filter-box.svelte';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
+  import { handlePromiseError } from '$lib/utils';
 
   export let value = '';
   export let grayTheme: boolean;
@@ -21,13 +22,13 @@
   let showFilter = false;
   $: showClearIcon = value.length > 0;
 
-  const onSearch = (payload: SmartSearchDto | MetadataSearchDto) => {
+  const onSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
     const params = getMetadataSearchQuery(payload);
 
     showHistory = false;
     showFilter = false;
     $isSearchEnabled = false;
-    goto(`${AppRoute.SEARCH}?${params}`);
+    await goto(`${AppRoute.SEARCH}?${params}`);
   };
 
   const clearSearchTerm = (searchTerm: string) => {
@@ -63,9 +64,9 @@
     showFilter = false;
   };
 
-  const onHistoryTermClick = (searchTerm: string) => {
+  const onHistoryTermClick = async (searchTerm: string) => {
     const searchPayload = { query: searchTerm };
-    onSearch(searchPayload);
+    await onSearch(searchPayload);
   };
 
   const onFilterClick = () => {
@@ -78,7 +79,7 @@
   };
 
   const onSubmit = () => {
-    onSearch({ query: value });
+    handlePromiseError(onSearch({ query: value }));
     saveSearchTerm(value);
   };
 </script>
@@ -141,7 +142,7 @@
       <SearchHistoryBox
         on:clearAllSearchTerms={clearAllSearchTerms}
         on:clearSearchTerm={({ detail: searchTerm }) => clearSearchTerm(searchTerm)}
-        on:selectSearchTerm={({ detail: searchTerm }) => onHistoryTermClick(searchTerm)}
+        on:selectSearchTerm={({ detail: searchTerm }) => handlePromiseError(onHistoryTermClick(searchTerm))}
       />
     {/if}
   </form>

web/src/lib/components/shared-components/search-bar/search-camera-section.svelte

@@ -8,6 +8,7 @@
 <script lang="ts">
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
   import Combobox, { toComboBoxOptions } from '../combobox.svelte';
+  import { handlePromiseError } from '$lib/utils';
 
   export let filters: SearchCameraFilter;
 
@@ -16,8 +17,8 @@
 
   $: makeFilter = filters.make;
   $: modelFilter = filters.model;
-  $: updateMakes(modelFilter);
-  $: updateModels(makeFilter);
+  $: handlePromiseError(updateMakes(modelFilter));
+  $: handlePromiseError(updateModels(makeFilter));
 
   async function updateMakes(model?: string) {
     makes = await getSearchSuggestions({

web/src/lib/components/shared-components/search-bar/search-filter-box.svelte

@@ -82,7 +82,7 @@
     };
   };
 
-  const search = async () => {
+  const search = () => {
     if (filter.context && filter.personIds.size > 0) {
       handleError(
         new Error('Context search does not support people filter'),

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
   import Combobox, { toComboBoxOptions } from '../combobox.svelte';
+  import { handlePromiseError } from '$lib/utils';
 
   export let filters: SearchLocationFilter;
 
@@ -18,9 +19,9 @@
 
   $: countryFilter = filters.country;
   $: stateFilter = filters.state;
-  $: updateCountries();
-  $: updateStates(countryFilter);
-  $: updateCities(countryFilter, stateFilter);
+  $: handlePromiseError(updateCountries());
+  $: handlePromiseError(updateStates(countryFilter));
+  $: handlePromiseError(updateCities(countryFilter, stateFilter));
 
   async function updateCountries() {
     countries = await getSearchSuggestions({

web/src/lib/components/shared-components/settings/setting-accordion.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { QueryParameter } from '$lib/constants';
-  import { hasParamValue, updateParamList } from '$lib/utils';
+  import { hasParamValue, handlePromiseError, updateParamList } from '$lib/utils';
   import { slide } from 'svelte/transition';
 
   export let title: string;
@@ -12,12 +12,12 @@
   const syncFromUrl = () => (isOpen = hasParamValue(QueryParameter.IS_OPEN, key));
   const syncToUrl = (isOpen: boolean) => updateParamList({ param: QueryParameter.IS_OPEN, value: key, add: isOpen });
 
-  isOpen ? syncToUrl(true) : syncFromUrl();
+  isOpen ? handlePromiseError(syncToUrl(true)) : syncFromUrl();
   $: $page.url && syncFromUrl();
 
-  const toggle = () => {
+  const toggle = async () => {
     isOpen = !isOpen;
-    syncToUrl(isOpen);
+    await syncToUrl(isOpen);
   };
 </script>
 

web/src/lib/components/shared-components/upload-asset-preview.svelte

@@ -13,9 +13,9 @@
 
   export let uploadAsset: UploadAsset;
 
-  const handleRetry = (uploadAsset: UploadAsset) => {
+  const handleRetry = async (uploadAsset: UploadAsset) => {
     uploadAssetsStore.removeUploadAsset(uploadAsset.id);
-    fileUploadHandler([uploadAsset.file], uploadAsset.albumId);
+    await fileUploadHandler([uploadAsset.file], uploadAsset.albumId);
   };
 </script>