fix: debugger initial frame load + frame ui image loading state on change

.changeset/curly-queens-thank.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/debugger": patch
+---
+
+fix: correctly manipulate url on load and also on change

.changeset/early-turkeys-impress.md

@@ -0,0 +1,5 @@
+---
+"@frames.js/render": patch
+---
+
+fix: correctly detect image change in order to properly indicate loading state

packages/debugger/app/page.tsx

@@ -14,26 +14,42 @@ import { ConnectButton, useConnectModal } from "@rainbow-me/rainbowkit";
 import { sendTransaction, switchChain } from "@wagmi/core";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount, useChainId, useConfig } from "wagmi";
 import { FrameDebugger } from "./components/frame-debugger";
 import pkg from "../package.json";
 import { useFarcasterIdentity } from "./hooks/use-farcaster-identity";
 import { MockHubActionContext } from "./utils/mock-hub-utils";
+
 const LoginWindow = dynamic(() => import("./components/create-signer"), {
   ssr: false,
 });
 
+const FALLBACK_URL = process.env.NEXT_PUBLIC_HOST || 'http://localhost:3000';
+
 export default function App({
   searchParams,
 }: {
   searchParams: Record<string, string>;
 }): JSX.Element {
   const router = useRouter();
-  const url = searchParams.url ?? null;
-  const [urlInput, setUrlInput] = useState(
-    url || process.env.NEXT_PUBLIC_HOST || "http://localhost:3000"
-  );
+  /**
+   * Parse the URL from the query string. This will also cause debugger to automatically load the frame.
+   */
+  const url = useMemo(() => {
+    try {
+      if (!searchParams.url) {
+        return undefined;
+      }
+
+      const parsedUrl = new URL(searchParams.url);
+
+      return parsedUrl.toString();
+    } catch (e) {
+      console.error(e);
+      return undefined;
+    }
+  }, [searchParams.url]);
   const [mockHubContext, setMockHubContext] = useState<
     Partial<MockHubActionContext>
   >({
@@ -59,11 +75,6 @@ export default function App({
     );
   }, []);
 
-  useEffect(() => {
-    if (url) {
-      setUrlInput(url);
-    }
-  }, [url]);
   const signerState = useFarcasterIdentity();
 
   const onTransaction: OnTransactionFunc = useCallback(
@@ -176,29 +187,37 @@ export default function App({
             className="flex flex-row"
             onSubmit={(e) => {
               e.preventDefault();
+              const newUrl = new FormData(e.currentTarget).get('url')?.toString() || '';
+
               if (
                 !(
-                  urlInput.startsWith("http://") ||
-                  urlInput.startsWith("https://")
+                  newUrl.startsWith("http://") ||
+                  newUrl.startsWith("https://")
                 )
               ) {
                 alert("URL must start with http:// or https://");
                 return;
               }
-              if (searchParams.url === urlInput) {
-                location.reload();
-              }
-              router.push(`?url=${encodeURIComponent(urlInput)}`);
+
+              try {
+                const parsedUrl = new URL(newUrl).toString();
+
+                if (searchParams.url === parsedUrl) {
+                  location.reload();
+                }
+
+                router.push(`?url=${encodeURIComponent(parsedUrl)}`);
+              } catch (e) {
+                alert('URL must be in valid format');
+                return;
+              }              
             }}
           >
             <Input
               type="text"
               name="url"
               className="w-[400px] px-2 py-1 border border-gray-400 rounded-l rounded-r-none"
-              value={urlInput}
-              onChange={(e) => {
-                setUrlInput(e.target.value);
-              }}
+              defaultValue={url ?? FALLBACK_URL}
               placeholder="Enter URL"
             />
             <Button className="rounded-l-none">Debug</Button>

packages/render/src/frame-ui.tsx

@@ -36,18 +36,32 @@ export function FrameUI({
   const isLoading = !!frameState.isLoading || isImageLoading;
 
   useEffect(() => {
-    if (frameState.frame?.image) setIsImageLoading(true);
-  }, [frameState]);
+    if (frameState.frame?.image) {
+      setIsImageLoading(true);
+    }
+  }, [frameState.frame?.image]);
 
   const resolvedTheme = getThemeWithDefaults(theme ?? {});
-  if (!frameState.homeframeUrl) return <div>Missing frame url</div>;
+
+  if (!frameState.homeframeUrl) {
+    return <div>Missing frame url</div>;
+  }
+
   if (frameState.error) {
     return <div>Failed to load Frame</div>;
   }
-  if (frameState.homeframeUrl && !frameState.frame && !frameState.isLoading)
+
+  if (frameState.homeframeUrl && !frameState.frame && !frameState.isLoading) {
     return <div>Failed to load Frame</div>;
-  if (!frameState.frame) return null;
-  if (!frameState.isFrameValid) return <div>Invalid frame</div>;
+  }
+
+  if (!frameState.frame) {
+    return null;
+  }
+
+  if (!frameState.isFrameValid) {
+    return <div>Invalid frame</div>;
+  }
 
   const ImageEl = FrameImage ? FrameImage : "img";
   return (

packages/render/src/use-frame.tsx

@@ -157,6 +157,11 @@ export function useFrame<
       let response;
       try {
         response = await fetch(proxiedUrl);
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch frame: ${response.statusText}`);
+        }
+
         newFrame = (await response.json()) as ReturnType<typeof getFrame>;
         const tend = new Date();
 
@@ -213,6 +218,11 @@ export function useFrame<
             ...frameRequest.request.body,
           }),
         });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch frame: ${response.statusText}`);
+        }
+
         const dataRes = (await response.json()) as
           | ReturnType<typeof getFrame>
           | { location: string };