@hyperframes/studio 0.8.177 → 0.8.179

package/src/hooks/useFileTree.test.tsx

@@ -9,7 +9,10 @@ vi.mock("../components/feedback/projectProvenance", () => ({
   captureProjectProvenance: vi.fn(),
 }));
 
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
 import { captureProjectProvenance } from "../components/feedback/projectProvenance";
+import { trackStudioEvent } from "../utils/studioTelemetry";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -244,6 +247,37 @@ describe("useFileTree.refreshFileTree", () => {
     fetchSpy.mockRestore();
   });
 
+  it("resolves when the server is gone, and reports it once per unreachable streak", async () => {
+    const track = vi.mocked(trackStudioEvent);
+    track.mockClear();
+    let serverUp = true;
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async () => {
+      if (!serverUp) throw new TypeError("Failed to fetch");
+      return new Response(JSON.stringify({ files: ["index.html"], compositions: ["index.html"] }));
+    });
+    const handleRef = await renderHarness("project-a");
+
+    serverUp = false;
+    await act(async () => {
+      await handleRef.current?.refresh();
+      await handleRef.current?.refresh();
+    });
+    expect(handleRef.current?.compositions).toEqual(["index.html"]);
+    expect(track).toHaveBeenCalledTimes(1);
+    expect(track).toHaveBeenCalledWith("file_tree_refresh_failed", {
+      error_name: "TypeError",
+      error_message: "Failed to fetch",
+    });
+
+    serverUp = true;
+    await act(async () => handleRef.current?.refresh());
+    serverUp = false;
+    await act(async () => handleRef.current?.refresh());
+    expect(track).toHaveBeenCalledTimes(2);
+
+    fetchSpy.mockRestore();
+  });
+
   it("keeps the prior compositions list when a refresh response omits the field", async () => {
     let call = 0;
     const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async () => {

package/src/hooks/useFileTree.ts

@@ -4,6 +4,8 @@ import { FONT_EXT } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import { captureProjectProvenance } from "../components/feedback/projectProvenance";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+import { errorProps } from "../utils/rejectionTelemetry";
 import { encodeUrlPath } from "@hyperframes/parsers";
 
 interface UseFileTreeOptions {
@@ -23,6 +25,19 @@ interface FetchedFileTree {
 // and defeat useMemo/useCallback deps downstream (e.g. the `assets` memo below).
 const EMPTY_FILE_LIST: string[] = [];
 
+type TreeListing = { files?: string[]; compositions?: string[] };
+
+async function readTreeListing(projectId: string, signal: AbortSignal): Promise<TreeListing> {
+  const res = await studioApiFetch(buildProjectApiPath(projectId), { signal });
+  if (!res.ok) throw new Error(`tree fetch failed: ${res.status}`);
+  return res.json();
+}
+
+function reportRefreshFailure(err: unknown): void {
+  const { error_name, error_message } = errorProps(err);
+  trackStudioEvent("file_tree_refresh_failed", { error_name, error_message });
+}
+
 /**
  * Holds the tree with the `projectId` it was fetched for; exposes empty/not-loaded
  * whenever that id doesn't match the current one, so a switch can't read another project's tree.
@@ -74,6 +89,7 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
 
   const refreshRequestRef = useRef(0);
   const refreshAbortRef = useRef<AbortController | null>(null);
+  const failureReportedRef = useRef(false);
 
   const refreshFileTree = useCallback(async () => {
     const pid = projectIdRef.current;
@@ -84,14 +100,16 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
     const requestId = ++refreshRequestRef.current;
     const controller = new AbortController();
     refreshAbortRef.current = controller;
-    let data: { files?: string[]; compositions?: string[] };
+    let data: TreeListing;
     try {
-      const res = await studioApiFetch(buildProjectApiPath(pid), { signal: controller.signal });
-      data = await res.json();
+      data = await readTreeListing(pid, controller.signal);
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError") return;
-      throw err;
+      if (!failureReportedRef.current) reportRefreshFailure(err);
+      failureReportedRef.current = true;
+      return;
     }
+    failureReportedRef.current = false;
     if (data.files && requestId === refreshRequestRef.current) {
       setFetched((prev) =>
         prev?.projectId === pid

package/src/main.tsx

@@ -6,6 +6,11 @@ import { ShowThemeToggle } from "./components/ThemeToggle";
 import { StudioErrorBoundary } from "./components/StudioErrorBoundary";
 import { readIconTokens } from "./styles/iconTokens";
 import { trackStudioEvent } from "./utils/studioTelemetry";
+import {
+  errorProps,
+  isCompositionAssetError,
+  isExtensionOnlyStack,
+} from "./utils/rejectionTelemetry";
 import { prefetchPreviewForHash } from "./utils/previewPrefetch";
 import { bindThumbnailPageLifecycle } from "./player/lib/thumbnailPageLifecycle";
 import "./styles/studio.css";
@@ -17,30 +22,6 @@ prefetchPreviewForHash(window.location.hash);
 window.addEventListener("hashchange", () => prefetchPreviewForHash(window.location.hash));
 trackStudioEvent("session_start");
 
-function errorProps(value: unknown): {
-  error_message: string;
-  error_name: string | null;
-  stack_trace: string | null;
-} {
-  if (value instanceof Error) {
-    return {
-      error_message: value.message,
-      error_name: value.name,
-      stack_trace: value.stack?.slice(0, 4000) ?? null,
-    };
-  }
-  return { error_message: String(value), error_name: null, stack_trace: null };
-}
-
-// fallow-ignore-next-line complexity
-function isCompositionAssetError(msg: string, name: string | null): boolean {
-  if (msg.includes("Error fetching") && (msg.includes("404") || msg.includes("Not Found")))
-    return true;
-  if (name === "EncodingError" || msg.includes("unsupported or unrecognizable format")) return true;
-  if (msg.includes("MEDIA_ERR_SRC_NOT_SUPPORTED")) return true;
-  return false;
-}
-
 const ERROR_CAP = 50;
 let errorCount = 0;
 let rejectionCount = 0;
@@ -114,6 +95,8 @@ window.addEventListener("unhandledrejection", (event) => {
     }
     return;
   }
+  // Not ours: an extension's own promise. Dropped before the cap so it cannot silence ours.
+  if (isExtensionOnlyStack(props.stack_trace)) return;
 
   rejectionCount++;
   if (rejectionCount > ERROR_CAP) {

package/src/player/hooks/useTimelinePlayer.ts

@@ -42,7 +42,7 @@ import { isStudioManualEditGestureLiveIn } from "../../components/editor/manualE
 import { createPreviewMessageHandler } from "./previewMessageRouter";
 import { timelineElementsChanged } from "./timelinePlayerSync";
 import { safeContentDocument } from "./timelineSyncHydration";
-import { sceneSwapFor } from "../sceneSwap";
+import { sceneSwapFor, supersededByNewerEdit } from "../sceneSwap";
 import { whileScriptWrites } from "../previewReloading";
 
 export interface UseTimelinePlayerOptions {
@@ -489,7 +489,7 @@ export function useTimelinePlayer({
   const refreshPlayer = useCallback(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
-    swapCancelRef.current?.abort(new Error("superseded by a newer edit"));
+    swapCancelRef.current?.abort(supersededByNewerEdit());
     const cancel = new AbortController();
     swapCancelRef.current = cancel;
     logReload("refreshPlayer", () => ({ stack: new Error("refreshPlayer").stack }));

package/src/player/sceneSwap.test.ts

@@ -5,7 +5,9 @@ import {
   announcePreviewDocumentLoaded,
   onPreviewContentReplaced,
   sceneSwapFor,
+  supersededByNewerEdit,
 } from "./sceneSwap";
+import { errorProps } from "../utils/rejectionTelemetry";
 
 afterEach(() => {
   vi.useRealTimers();
@@ -83,10 +85,15 @@ describe("sceneSwapFor", () => {
       .mockImplementation(async () => new Response("<html></html>"));
     const { iframe, swap } = swappableIframe();
     const cancel = new AbortController();
-    cancel.abort(new Error("superseded by a newer edit"));
-    await expect(sceneSwapFor(iframe)!("/preview", () => true, cancel.signal)).rejects.toThrow(
-      "superseded",
+    cancel.abort(supersededByNewerEdit());
+    const rejection = await sceneSwapFor(iframe)!("/preview", () => true, cancel.signal).catch(
+      (error: unknown) => error,
     );
+    // The rejection listener files AbortErrors as cancellations, never as unhandled failures.
+    expect(errorProps(rejection)).toMatchObject({
+      error_name: "AbortError",
+      error_message: "superseded by a newer edit",
+    });
     expect(fetchSpy).not.toHaveBeenCalled();
     expect(swap).not.toHaveBeenCalled();
   });

package/src/player/sceneSwap.ts

@@ -71,6 +71,9 @@ export function markScenesStale(iframe: HTMLIFrameElement | null, files: readonl
   meta.content = JSON.stringify(parts);
 }
 
+export const supersededByNewerEdit = () =>
+  new DOMException("superseded by a newer edit", "AbortError");
+
 /** Null when the preview cannot swap; rejects when superseded, cancelled or a full reload is needed. */
 export function sceneSwapFor(
   iframe: HTMLIFrameElement,

package/src/utils/rejectionTelemetry.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { isExtensionOnlyStack } from "./rejectionTelemetry";
+
+describe("isExtensionOnlyStack", () => {
+  it("is true when every V8 frame is an extension script", () => {
+    const stack = [
+      "TypeError: Cannot read properties of undefined (reading 'M_ID')",
+      "    at Y (chrome-extension://abcdefghijklmnop/executors/200.js:1:761)",
+      "    at E (chrome-extension://abcdefghijklmnop/executors/200.js:1:1442)",
+    ].join("\n");
+    expect(isExtensionOnlyStack(stack)).toBe(true);
+  });
+
+  it("is true for a wallet's single-frame connect failure", () => {
+    const stack =
+      "i: Failed to connect to MetaMask\n    at Object.connect (chrome-extension://abcdefghijklmnop/scripts/inpage.js:7:84292)";
+    expect(isExtensionOnlyStack(stack)).toBe(true);
+  });
+
+  it("reads Firefox and Safari frames", () => {
+    expect(isExtensionOnlyStack("connect@moz-extension://1234-abcd/inpage.js:3:10\n")).toBe(true);
+    expect(isExtensionOnlyStack("f@safari-web-extension://1234-abcd/content.js:1:5")).toBe(true);
+  });
+
+  it("is false when a Studio frame is in the stack, even under an extension's fetch wrapper", () => {
+    const stack = [
+      "TypeError: Failed to fetch",
+      "    at o (chrome-extension://abcdefghijklmnop/frame_ant/frame_ant.js:2:18135)",
+      "    at window.fetch (chrome-extension://abcdefghijklmnop/frame_ant/frame_ant.js:2:18200)",
+      "    at Dt (http://localhost:3002/assets/index-abc.js:49:296453)",
+    ].join("\n");
+    expect(isExtensionOnlyStack(stack)).toBe(false);
+  });
+
+  it("is false for a stack with no frames to judge", () => {
+    expect(isExtensionOnlyStack(null)).toBe(false);
+    expect(isExtensionOnlyStack("Error: chrome-extension://abcdefghijklmnop failed")).toBe(false);
+  });
+});

package/src/utils/rejectionTelemetry.ts

@@ -0,0 +1,33 @@
+export function errorProps(value: unknown): {
+  error_message: string;
+  error_name: string | null;
+  stack_trace: string | null;
+} {
+  if (value instanceof Error) {
+    return {
+      error_message: value.message,
+      error_name: value.name,
+      stack_trace: value.stack?.slice(0, 4000) ?? null,
+    };
+  }
+  return { error_message: String(value), error_name: null, stack_trace: null };
+}
+
+// fallow-ignore-next-line complexity
+export function isCompositionAssetError(msg: string, name: string | null): boolean {
+  if (msg.includes("Error fetching") && (msg.includes("404") || msg.includes("Not Found")))
+    return true;
+  if (name === "EncodingError" || msg.includes("unsupported or unrecognizable format")) return true;
+  if (msg.includes("MEDIA_ERR_SRC_NOT_SUPPORTED")) return true;
+  return false;
+}
+
+// A frame is a line ending in `:line:col`, in both the V8 (`at f (url:1:2)`) and Gecko/WebKit (`f@url:1:2`) forms.
+const STACK_FRAME = /:\d+:\d+\)?\s*$/;
+const EXTENSION_URL = /\b(?:chrome|moz|safari|safari-web)-extension:\/\//;
+
+/** True when every frame is an extension's script: a failure no Studio code took part in. */
+export function isExtensionOnlyStack(stack: string | null): boolean {
+  const frames = stack?.split("\n").filter((line) => STACK_FRAME.test(line)) ?? [];
+  return frames.length > 0 && frames.every((line) => EXTENSION_URL.test(line));
+}