fix(ui): prevent unhandled promise rejections

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts

@@ -46,11 +46,12 @@ export const useImageActions = (imageDTO: ImageDTO) => {
           setHasSeed(false);
         }
 
+        // Need to catch all of these to avoid unhandled promise rejections bubbling up to instrumented error handlers
         const promptParseResults = await Promise.allSettled([
-          handlers.positivePrompt.parse(metadata),
-          handlers.negativePrompt.parse(metadata),
-          handlers.sdxlPositiveStylePrompt.parse(metadata),
-          handlers.sdxlNegativeStylePrompt.parse(metadata),
+          handlers.positivePrompt.parse(metadata).catch(() => {}),
+          handlers.negativePrompt.parse(metadata).catch(() => {}),
+          handlers.sdxlPositiveStylePrompt.parse(metadata).catch(() => {}),
+          handlers.sdxlNegativeStylePrompt.parse(metadata).catch(() => {}),
         ]);
         if (promptParseResults.some((result) => result.status === 'fulfilled')) {
           setHasPrompts(true);
@@ -97,9 +98,14 @@ export const useImageActions = (imageDTO: ImageDTO) => {
     if (!metadata) {
       return;
     }
-    handlers.seed.parse(metadata).then((seed) => {
-      handlers.seed.recall && handlers.seed.recall(seed, true);
-    });
+    handlers.seed
+      .parse(metadata)
+      .then((seed) => {
+        handlers.seed.recall?.(seed, true);
+      })
+      .catch(() => {
+        // no-op, the toast will show the error
+      });
   }, [metadata]);
 
   const recallPrompts = useCallback(() => {

invokeai/frontend/web/src/features/metadata/components/MetadataLoRAs.tsx

@@ -47,7 +47,9 @@ const MetadataViewLoRA = ({
     if (!handlers.recallItem) {
       return;
     }
-    handlers.recallItem(lora, true);
+    handlers.recallItem(lora, true).catch(() => {
+      // no-op, the toast will show the error
+    });
   }, [handlers, lora]);
 
   const [renderedValue, setRenderedValue] = useState<React.ReactNode>(null);

invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx

@@ -21,13 +21,15 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
   const [renderedValueInternal, setRenderedValueInternal] = useState<React.ReactNode>(null);
 
   useEffect(() => {
-    const _parse = async () => {
-      try {
-        const parsed = await handlers.parse(metadata);
-        setValue(parsed);
-      } catch (e) {
-        setValue(MetadataParseFailedToken);
-      }
+    const _parse = () => {
+      handlers
+        .parse(metadata)
+        .then((parsed) => {
+          setValue(parsed);
+        })
+        .catch(() => {
+          setValue(MetadataParseFailedToken);
+        });
     };
     _parse();
   }, [handlers, metadata]);
@@ -37,7 +39,7 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
   const label = useMemo(() => handlers.getLabel(), [handlers]);
 
   useEffect(() => {
-    const _renderValue = async () => {
+    const _renderValue = () => {
       if (value === MetadataParsePendingToken) {
         setRenderedValueInternal(null);
         return;
@@ -47,9 +49,14 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
         return;
       }
 
-      const rendered = await handlers.renderValue(value);
-
-      setRenderedValueInternal(rendered);
+      handlers
+        .renderValue(value)
+        .then((rendered) => {
+          setRenderedValueInternal(rendered);
+        })
+        .catch(() => {
+          // no-op
+        });
     };
 
     _renderValue();
@@ -69,7 +76,9 @@ export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandler
     if (!handlers.recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) {
       return null;
     }
-    handlers.recall(value, true);
+    handlers.recall(value, true).catch(() => {
+      // no-op, the toast will show the error
+    });
   }, [handlers, value]);
 
   const valueOrNull = useMemo(() => {