Add failureToastOptions prop for usePromise, useCachedPromise, and useFetch

docs/utils-reference/getting-started.md

@@ -16,6 +16,14 @@ npm install --save @raycast/utils
 
 ## Changelog
 
+### v1.16.0
+
+- Add a `failureToastOptions` prop to `useFetch`, `useCachedPromise`, and `usePromise` to make it possible to customize the error displayed instead of a generic "Failed to fetch latest data".
+
+### v1.15.0
+
+- Add `useLocalStorage` hook.
+
 ### v1.14.0
 
 - Add `useStreamJSON` hook.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raycast/utils",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Set of utilities to streamline building Raycast extensions",
   "author": "Raycast Technologies Ltd.",
   "homepage": "https://developers.raycast.com/utils-reference",

src/showFailureToast.ts

@@ -27,12 +27,15 @@ import { Clipboard, environment, open, Toast, showToast } from "@raycast/api";
  * }
  * ```
  */
-export function showFailureToast(error: unknown, options?: { title?: string; primaryAction?: Toast.ActionOptions }) {
+export function showFailureToast(
+  error: unknown,
+  options?: Partial<Pick<Toast.Options, "title" | "primaryAction" | "message">>,
+) {
   const message = error instanceof Error ? error.message : String(error);
   return showToast({
     style: Toast.Style.Failure,
     title: options?.title ?? "Something went wrong",
-    message: message,
+    message: options?.message ?? message,
     primaryAction: options?.primaryAction ?? handleErrorToastAction(error),
     secondaryAction: options?.primaryAction ? handleErrorToastAction(error) : undefined,
   });

src/useFetch.ts

@@ -126,6 +126,7 @@ export function useFetch<V = unknown, U = undefined, T extends unknown[] = unkno
     onError,
     onData,
     onWillExecute,
+    failureToastOptions,
     ...fetchOptions
   } = options || {};
 
@@ -136,6 +137,7 @@ export function useFetch<V = unknown, U = undefined, T extends unknown[] = unkno
     onError,
     onData,
     onWillExecute,
+    failureToastOptions,
   };
 
   const parseResponseRef = useLatest(parseResponse || defaultParsing);

src/usePromise.ts

@@ -1,5 +1,5 @@
 import { useEffect, useCallback, MutableRefObject, useRef, useState } from "react";
-import { environment, LaunchType } from "@raycast/api";
+import { environment, LaunchType, Toast } from "@raycast/api";
 import { useDeepMemo } from "./useDeepMemo";
 import {
   FunctionReturningPromise,
@@ -26,6 +26,11 @@ export type PromiseOptions<T extends FunctionReturningPromise | FunctionReturnin
    * wait util you have all the arguments ready to execute the function.
    */
   execute?: boolean;
+  /**
+   * Options for the generic failure toast.
+   * It allows you to customize the title, message, and primary action of the failure toast.
+   */
+  failureToastOptions?: Partial<Pick<Toast.Options, "title" | "primaryAction" | "message">>;
   /**
    * Called when an execution fails. By default it will log the error and show
    * a generic failure toast.
@@ -191,6 +196,7 @@ export function usePromise<T extends FunctionReturningPromise | FunctionReturnin
                     latestCallback.current?.(...((latestArgs.current || []) as Parameters<T>));
                   },
                 },
+                ...options?.failureToastOptions,
               });
             }
           }

tests/package.json

@@ -192,6 +192,13 @@
       "subtitle": "Utils Smoke Tests",
       "description": "Utils Smoke Tests",
       "mode": "view"
+    },
+    {
+      "name": "show-failure-toast",
+      "title": "showFailureToast",
+      "subtitle": "Utils Smoke Tests",
+      "description": "Utils Smoke Tests",
+      "mode": "view"
     }
   ],
   "dependencies": {

tests/src/show-failure-toast.tsx

@@ -0,0 +1,67 @@
+import { Action, ActionPanel, List, openCommandPreferences } from "@raycast/api";
+import { showFailureToast } from "@raycast/utils";
+
+export default function Command() {
+  return (
+    <List>
+      <List.Item
+        title="Default Failure Toast"
+        actions={
+          <ActionPanel>
+            <Action title="Show Toast" onAction={() => showFailureToast(new Error("Some Error"))} />
+          </ActionPanel>
+        }
+      />
+      <List.Item
+        title="Failure Toast with Title"
+        actions={
+          <ActionPanel>
+            <Action
+              title="Show Toast"
+              onAction={() =>
+                showFailureToast(new Error("Some Error"), {
+                  title: "Custom Title",
+                })
+              }
+            />
+          </ActionPanel>
+        }
+      />
+      <List.Item
+        title="Failure Toast with Custom Action"
+        actions={
+          <ActionPanel>
+            <Action
+              title="Show Toast"
+              onAction={() =>
+                showFailureToast(new Error("Some Error"), {
+                  primaryAction: {
+                    title: "Open Command Preferences",
+                    onAction: () => {
+                      openCommandPreferences();
+                    },
+                  },
+                })
+              }
+            />
+          </ActionPanel>
+        }
+      />
+      <List.Item
+        title="Failure Toast with Custom Message"
+        actions={
+          <ActionPanel>
+            <Action
+              title="Show Toast"
+              onAction={() =>
+                showFailureToast(new Error("Some Error"), {
+                  message: "Custom Message",
+                })
+              }
+            />
+          </ActionPanel>
+        }
+      />
+    </List>
+  );
+}