chore(web): cleanup promise handling

web/.eslintrc.cjs

@@ -13,6 +13,7 @@ module.exports = {
     sourceType: 'module',
     ecmaVersion: 2022,
     extraFileExtensions: ['.svelte'],
+    project: ['./tsconfig.json'],
   },
   env: {
     browser: true,
@@ -32,13 +33,6 @@ module.exports = {
     NodeJS: true,
   },
   rules: {
-    'unicorn/no-useless-undefined': 'off',
-    'unicorn/prefer-spread': 'off',
-    'unicorn/no-null': 'off',
-    'unicorn/prevent-abbreviations': 'off',
-    'unicorn/no-nested-ternary': 'off',
-    'unicorn/consistent-function-scoping': 'off',
-    'unicorn/prefer-top-level-await': 'off',
     '@typescript-eslint/no-unused-vars': [
       'warn',
       {
@@ -48,5 +42,17 @@ module.exports = {
       },
     ],
     curly: 2,
+    'unicorn/no-useless-undefined': 'off',
+    'unicorn/prefer-spread': 'off',
+    'unicorn/no-null': 'off',
+    'unicorn/prevent-abbreviations': 'off',
+    'unicorn/no-nested-ternary': 'off',
+    'unicorn/consistent-function-scoping': 'off',
+    'unicorn/prefer-top-level-await': 'off',
+    // TODO: set recommended-type-checked and remove these rules
+    '@typescript-eslint/await-thenable': 'error',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/require-await': 'error',
   },
 };

web/package.json

@@ -27,7 +27,7 @@
     "@socket.io/component-emitter": "^3.1.0",
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/enhanced-img": "^0.1.8",
-    "@sveltejs/kit": "^2.5.1",
+    "@sveltejs/kit": "^2.5.2",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/svelte": "^4.0.3",

web/src/hooks.client.ts

@@ -1,7 +1,6 @@
 import { isHttpError } from '@immich/sdk';
 import type { HandleClientError } from '@sveltejs/kit';
 
-const LOG_PREFIX = '[hooks.client.ts]';
 const DEFAULT_MESSAGE = 'Hmm, not sure about that. Check the logs or open a ticket?';
 
 const parseError = (error: unknown) => {
@@ -23,6 +22,6 @@ const parseError = (error: unknown) => {
 
 export const handleError: HandleClientError = ({ error }) => {
   const result = parseError(error);
-  console.error(`${LOG_PREFIX}:handleError ${result.message}`);
+  console.error(`[hooks.client.ts]:handleError ${result.message}`);
   return result;
 };

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -48,11 +48,11 @@
     await handleCommand(jobId, dto);
   };
 
-  const onConfirm = () => {
+  const onConfirm = async () => {
     if (!confirmJob) {
       return;
     }
-    handleCommand(confirmJob, { command: JobCommand.Start, force: true });
+    await handleCommand(confirmJob, { command: JobCommand.Start, force: true });
     confirmJob = null;
   };
 

web/src/lib/components/admin-page/settings/admin-settings.svelte

@@ -54,7 +54,7 @@
     });
   };
 
-  const resetToDefault = async (configKeys: Array<keyof SystemConfigDto>) => {
+  const resetToDefault = (configKeys: Array<keyof SystemConfigDto>) => {
     for (const key of configKeys) {
       config = { ...config, [key]: defaultConfig[key] };
     }

web/src/lib/components/album-page/album-viewer.svelte

@@ -21,6 +21,7 @@
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import UpdatePanel from '../shared-components/update-panel.svelte';
+  import { handlePromiseError } from '$lib/utils';
 
   export let sharedLink: SharedLinkResponseDto;
   export let user: UserResponseDto | undefined = undefined;
@@ -35,7 +36,7 @@
 
   dragAndDropFilesStore.subscribe((value) => {
     if (value.isDragging && value.files.length > 0) {
-      fileUploadHandler(value.files, album.id);
+      handlePromiseError(fileUploadHandler(value.files, album.id));
       dragAndDropFilesStore.set({ isDragging: false, files: [] });
     }
   });
@@ -67,7 +68,7 @@
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
 
-  onMount(async () => {
+  onMount(() => {
     document.addEventListener('keydown', onKeyboardPress);
   });
 

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getAssetType } from '$lib/utils/asset-utils';
   import { autoGrowHeight } from '$lib/utils/autogrow';
   import { clickOutside } from '$lib/utils/click-outside';
@@ -79,7 +79,7 @@
 
   $: {
     if (assetId && previousAssetId != assetId) {
-      getReactions();
+      handlePromiseError(getReactions());
       previousAssetId = assetId;
     }
   }
@@ -95,10 +95,10 @@
     }
   };
 
-  const handleEnter = (event: KeyboardEvent) => {
+  const handleEnter = async (event: KeyboardEvent) => {
     if (event.key === 'Enter') {
       event.preventDefault();
-      handleSendComment();
+      await handleSendComment();
       return;
     }
   };

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -10,7 +10,7 @@
   import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
   import { user } from '$lib/stores/user.store';
-  import { getAssetJobMessage, isSharedLink } from '$lib/utils';
+  import { getAssetJobMessage, isSharedLink, handlePromiseError } from '$lib/utils';
   import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
@@ -174,8 +174,8 @@
 
   $: {
     if (isShared && asset.id) {
-      getFavorite();
-      getNumberOfComments();
+      handlePromiseError(getFavorite());
+      handlePromiseError(getNumberOfComments());
     }
   }
 
@@ -184,9 +184,9 @@
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
         slideshowHistory.queue(asset.id);
-        handlePlaySlideshow();
+        handlePromiseError(handlePlaySlideshow());
       } else if (value === SlideshowState.StopSlideshow) {
-        handleStopSlideshow();
+        handlePromiseError(handleStopSlideshow());
       }
     });
 
@@ -226,7 +226,7 @@
     }
   });
 
-  $: asset.id && !sharedLink && handleGetAllAlbums(); // Update the album information when the asset ID changes
+  $: asset.id && !sharedLink && handlePromiseError(handleGetAllAlbums()); // Update the album information when the asset ID changes
 
   const handleGetAllAlbums = async () => {
     if (isSharedLink()) {
@@ -247,7 +247,7 @@
     isShowActivity = !isShowActivity;
   };
 
-  const handleKeypress = (event: KeyboardEvent) => {
+  const handleKeypress = async (event: KeyboardEvent) => {
     if (shouldIgnoreShortcut(event)) {
       return;
     }
@@ -264,7 +264,7 @@
       case 'a':
       case 'A': {
         if (shiftKey) {
-          toggleArchive();
+          await toggleArchive();
         }
         return;
       }
@@ -273,18 +273,18 @@
         return;
       }
       case 'ArrowRight': {
-        navigateAssetForward();
+        await navigateAssetForward();
         return;
       }
       case 'd':
       case 'D': {
         if (shiftKey) {
-          downloadFile(asset);
+          await downloadFile(asset);
         }
         return;
       }
       case 'Delete': {
-        trashOrDelete(shiftKey);
+        await trashOrDelete(shiftKey);
         return;
       }
       case 'Escape': {
@@ -296,7 +296,7 @@
         return;
       }
       case 'f': {
-        toggleFavorite();
+        await toggleFavorite();
         return;
       }
       case 'i': {
@@ -326,7 +326,7 @@
 
     slideshowHistory.queue(asset.id);
 
-    setAssetId(asset.id);
+    await setAssetId(asset.id);
     $restartSlideshowProgress = true;
   };
 
@@ -369,17 +369,17 @@
     $isShowDetail = !$isShowDetail;
   };
 
-  const trashOrDelete = (force: boolean = false) => {
+  const trashOrDelete = async (force: boolean = false) => {
     if (force || !isTrashEnabled) {
       if ($showDeleteModal) {
         isShowDeleteConfirmation = true;
         return;
       }
-      deleteAsset();
+      await deleteAsset();
       return;
     }
 
-    trashAsset();
+    await trashAsset();
     return;
   };
 
@@ -432,7 +432,7 @@
         message: asset.isFavorite ? `Added to favorites` : `Removed from favorites`,
       });
     } catch (error) {
-      await handleError(error, `Unable to ${asset.isFavorite ? `add asset to` : `remove asset from`} favorites`);
+      handleError(error, `Unable to ${asset.isFavorite ? `add asset to` : `remove asset from`} favorites`);
     }
   };
 
@@ -472,7 +472,7 @@
         message: asset.isArchived ? `Added to archive` : `Removed from archive`,
       });
     } catch (error) {
-      await handleError(error, `Unable to ${asset.isArchived ? `add asset to` : `remove asset from`} archive`);
+      handleError(error, `Unable to ${asset.isArchived ? `add asset to` : `remove asset from`} archive`);
     }
   };
 
@@ -481,7 +481,7 @@
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
       notificationController.show({ type: NotificationType.Info, message: getAssetJobMessage(name) });
     } catch (error) {
-      await handleError(error, `Unable to submit job`);
+      handleError(error, `Unable to submit job`);
     }
   };
 
@@ -492,7 +492,7 @@
   let assetViewerHtmlElement: HTMLElement;
 
   const slideshowHistory = new SlideshowHistory((assetId: string) => {
-    setAssetId(assetId);
+    handlePromiseError(setAssetId(assetId));
     $restartSlideshowProgress = true;
   });
 
@@ -550,7 +550,7 @@
       dispatch('close');
       notificationController.show({ type: NotificationType.Info, message: 'Un-stacked', timeout: 1500 });
     } catch (error) {
-      await handleError(error, `Unable to unstack`);
+      handleError(error, `Unable to unstack`);
     }
   };
 </script>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -7,7 +7,7 @@
   import { featureFlags } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
-  import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink } from '$lib/utils';
+  import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink, handlePromiseError } from '$lib/utils';
   import { delay, getAssetFilename } from '$lib/utils/asset-utils';
   import { autoGrowHeight } from '$lib/utils/autogrow';
   import { clickOutside } from '$lib/utils/click-outside';
@@ -78,7 +78,7 @@
     originalDescription = description;
   };
 
-  $: handleNewAsset(asset);
+  $: handlePromiseError(handleNewAsset(asset));
 
   $: latlng = (() => {
     const lat = asset.exifInfo?.latitude;
@@ -113,7 +113,7 @@
     switch (event.key) {
       case 'Enter': {
         if (ctrl && event.target === textArea) {
-          handleFocusOut();
+          await handleFocusOut();
         }
       }
     }

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -4,7 +4,7 @@
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
-  import { getKey } from '$lib/utils';
+  import { getKey, handlePromiseError } from '$lib/utils';
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { getBoundingBox } from '$lib/utils/people-utils';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
@@ -102,7 +102,7 @@
     }
   };
 
-  const doZoomImage = async () => {
+  const doZoomImage = () => {
     setZoomImageWheelState({
       currentZoom: $zoomImageWheelState.currentZoom === 1 ? 2 : 1,
     });
@@ -120,7 +120,7 @@
     if (state.currentZoom > 1 && isWebCompatibleImage(asset) && !hasZoomed && !$alwaysLoadOriginalFile) {
       hasZoomed = true;
 
-      loadAssetData({ loadOriginal: true });
+      handlePromiseError(loadAssetData({ loadOriginal: true }));
     }
   });
 </script>

web/src/lib/components/asset-viewer/video-viewer.svelte

@@ -20,7 +20,7 @@
       video.muted = false;
       dispatch('onVideoStarted');
     } catch (error) {
-      await handleError(error, 'Unable to play video');
+      handleError(error, 'Unable to play video');
     } finally {
       isVideoLoading = false;
     }