@replohq/sandbox-runtime 1.17.0 → 1.18.1

package/previewHealth.js

@@ -0,0 +1,431 @@
+import retry from "async-retry";
+import {
+  createIframeRpcChannel,
+  createIframeRpcRemote
+} from "./_vendor/schemas/iframeRpcChannel.mjs";
+import {
+  editorToPreviewHealthMethodConfig,
+  PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_ID,
+  PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_VERSION,
+  previewHealthToEditorMethodConfig
+} from "./_vendor/schemas/previewHealthIframeRpc.mjs";
+import { v4 as uuidv4 } from "uuid";
+import * as z from "zod";
+import { createStore } from "zustand/vanilla";
+import { installNextErrorFeed } from "./nextErrorFeed";
+const RECOVERY_SETTLE_MS = 300;
+const MAX_DIAGNOSTICS_PER_DOCUMENT = 30;
+const MAX_TEXT_LENGTH = 4e3;
+const HMR_PATHS = ["/_next/hmr", "/_next/webpack-hmr"];
+const HMR_RECONNECT_MIN_MS = 1e3;
+const HMR_RECONNECT_MAX_MS = 1e4;
+function truncate(value) {
+  return value.length > MAX_TEXT_LENGTH ? `${value.slice(0, MAX_TEXT_LENGTH)}\u2026` : value;
+}
+function stripAnsi(value) {
+  return value.replace(/\u001b\[[0-9;]*m/g, "");
+}
+const thrownErrorSchema = z.object({
+  message: z.string(),
+  name: z.string().nullable().catch(null),
+  stack: z.string().nullable().catch(null),
+  digest: z.string().nullable().catch(null)
+});
+const hmrBuildStatusSchema = z.object({
+  type: z.enum(["built", "sync"]),
+  errors: z.array(
+    z.union([
+      z.string(),
+      z.object({ message: z.string() }).transform(({ message }) => {
+        return message;
+      })
+    ])
+  )
+});
+class HmrSocketClosedError extends Error {
+}
+function toPreviewErrorDetail(value, componentStack) {
+  const thrown = thrownErrorSchema.safeParse(value);
+  const { message, name, stack, digest } = thrown.success ? thrown.data : { message: String(value), name: null, stack: null, digest: null };
+  return {
+    message: truncate(message),
+    name,
+    stack: stack === null ? null : truncate(stack),
+    componentStack: componentStack === null ? null : truncate(componentStack),
+    digest
+  };
+}
+function toMessageOnlyErrorDetail(message) {
+  return {
+    message,
+    name: null,
+    stack: null,
+    componentStack: null,
+    digest: null
+  };
+}
+function createEditorRemote() {
+  return createIframeRpcRemote(
+    createIframeRpcChannel({
+      subscriberWindow: window,
+      channelIdentifier: PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_ID,
+      version: PREVIEW_HEALTH_IFRAME_RPC_CHANNEL_VERSION,
+      getTargetWindow: () => window.parent,
+      targetOrigin: "*",
+      isExpectedMessage: (event) => event.source === window.parent,
+      outgoingMethods: previewHealthToEditorMethodConfig,
+      incomingMethods: editorToPreviewHealthMethodConfig,
+      handlers: {}
+    })
+  );
+}
+function getHealthKey(health) {
+  return health.status === "ok" ? "ok" : `error:${health.source}:${health.error.message}`;
+}
+function createPreviewHealthStore() {
+  return createStore((set) => {
+    return {
+      boundaries: /* @__PURE__ */ new Map(),
+      rootFailure: null,
+      buildErrors: [],
+      actions: {
+        boundaryRendered: (boundaryId) => {
+          set((state) => {
+            return {
+              boundaries: new Map(state.boundaries).set(boundaryId, {
+                status: "rendered"
+              }),
+              rootFailure: null
+            };
+          });
+        },
+        boundaryCaughtError: (boundaryId, caught) => {
+          set((state) => {
+            return {
+              boundaries: new Map(state.boundaries).set(boundaryId, {
+                status: "failed",
+                failedAt: Date.now(),
+                ...caught
+              })
+            };
+          });
+        },
+        boundaryUnmounted: (boundaryId) => {
+          set((state) => {
+            if (!state.boundaries.has(boundaryId)) {
+              return state;
+            }
+            const boundaries = new Map(state.boundaries);
+            boundaries.delete(boundaryId);
+            return { boundaries };
+          });
+        },
+        rootCaughtError: (error) => {
+          set({ rootFailure: { error } });
+        },
+        buildErrorsChanged: (buildErrors) => {
+          set({ buildErrors });
+        }
+      }
+    };
+  });
+}
+function selectPreviewHealth(state) {
+  const firstBuildError = state.buildErrors[0];
+  if (firstBuildError !== void 0) {
+    return {
+      status: "error",
+      source: "build",
+      error: toMessageOnlyErrorDetail(firstBuildError)
+    };
+  }
+  let latestFailure = null;
+  let hasRenderedBoundary = false;
+  for (const health of state.boundaries.values()) {
+    if (health.status === "rendered") {
+      hasRenderedBoundary = true;
+    } else if (!latestFailure || health.failedAt >= latestFailure.failedAt) {
+      latestFailure = health;
+    }
+  }
+  if (latestFailure) {
+    return {
+      status: "error",
+      source: "boundary",
+      error: toPreviewErrorDetail(
+        latestFailure.error,
+        latestFailure.componentStack
+      )
+    };
+  }
+  if (state.rootFailure) {
+    return {
+      status: "error",
+      source: "root",
+      error: toPreviewErrorDetail(state.rootFailure.error, null)
+    };
+  }
+  return hasRenderedBoundary ? { status: "ok" } : null;
+}
+function createPreviewHealthMonitor() {
+  const store = createPreviewHealthStore();
+  const { actions } = store.getState();
+  const documentId = uuidv4();
+  const editor = createEditorRemote();
+  let seq = 0;
+  let lastPosted = null;
+  let pendingRecovery = null;
+  const pageFailureErrors = /* @__PURE__ */ new WeakSet();
+  const diagnosticKeys = /* @__PURE__ */ new Set();
+  const postStatus = (health) => {
+    lastPosted = health;
+    seq += 1;
+    editor.statusChanged({
+      route: window.location.pathname,
+      documentId,
+      seq,
+      health
+    });
+  };
+  const cancelPendingRecovery = () => {
+    if (pendingRecovery !== null) {
+      window.clearTimeout(pendingRecovery);
+      pendingRecovery = null;
+    }
+  };
+  const publish = (health) => {
+    if (health === null) {
+      return;
+    }
+    if (lastPosted && getHealthKey(lastPosted) === getHealthKey(health)) {
+      cancelPendingRecovery();
+      return;
+    }
+    if (health.status === "ok" && lastPosted?.status === "error") {
+      pendingRecovery ??= window.setTimeout(() => {
+        pendingRecovery = null;
+        const settled = selectPreviewHealth(store.getState());
+        if (settled?.status === "ok") {
+          postStatus(settled);
+        }
+      }, RECOVERY_SETTLE_MS);
+      return;
+    }
+    cancelPendingRecovery();
+    postStatus(health);
+  };
+  const recordDiagnostic = ({
+    origin,
+    impact,
+    error
+  }) => {
+    const firstStackFrame = error.stack?.split("\n")[1]?.trim() ?? "";
+    const key = `${origin}|${error.message}|${firstStackFrame}`;
+    if (diagnosticKeys.has(key) || diagnosticKeys.size >= MAX_DIAGNOSTICS_PER_DOCUMENT) {
+      return;
+    }
+    diagnosticKeys.add(key);
+    editor.diagnosticRecorded({
+      route: window.location.pathname,
+      documentId,
+      diagnostic: { origin, impact, error, at: Date.now() }
+    });
+  };
+  const rememberPageFailure = (value) => {
+    if (typeof value === "object" && value !== null) {
+      pageFailureErrors.add(value);
+    }
+  };
+  const recordPageFailureDiagnostics = (state, previous) => {
+    if (state.rootFailure && state.rootFailure !== previous.rootFailure) {
+      rememberPageFailure(state.rootFailure.error);
+      recordDiagnostic({
+        origin: "root",
+        impact: "page",
+        error: toPreviewErrorDetail(state.rootFailure.error, null)
+      });
+    }
+    for (const [boundaryId, health] of state.boundaries) {
+      const previousHealth = previous.boundaries.get(boundaryId);
+      if (health.status === "failed" && (previousHealth?.status !== "failed" || previousHealth.error !== health.error)) {
+        rememberPageFailure(health.error);
+        recordDiagnostic({
+          origin: "boundary",
+          impact: "page",
+          error: toPreviewErrorDetail(health.error, health.componentStack)
+        });
+      }
+    }
+    if (state.buildErrors !== previous.buildErrors) {
+      const previousBuildErrors = new Set(previous.buildErrors);
+      for (const message of state.buildErrors) {
+        if (!previousBuildErrors.has(message)) {
+          recordDiagnostic({
+            origin: "build",
+            impact: "page",
+            error: toMessageOnlyErrorDetail(message)
+          });
+        }
+      }
+    }
+  };
+  const unsubscribe = store.subscribe((state, previous) => {
+    recordPageFailureDiagnostics(state, previous);
+    publish(selectPreviewHealth(state));
+  });
+  const handleNextError = (event) => {
+    if (event.kind === "rootCaught") {
+      actions.rootCaughtError(event.error);
+      return;
+    }
+    if (pageFailureErrors.has(event.error)) {
+      return;
+    }
+    recordDiagnostic({
+      origin: event.kind === "rejection" ? "rejection" : event.origin,
+      impact: "unknown",
+      error: toPreviewErrorDetail(event.error, null)
+    });
+  };
+  if (process.env.NODE_ENV !== "production") {
+    installNextErrorFeed(handleNextError);
+  }
+  const overlayStyle = document.createElement("style");
+  overlayStyle.dataset.reploPreviewHealth = "";
+  overlayStyle.textContent = "nextjs-portal{display:none!important}";
+  document.head.append(overlayStyle);
+  const stopBuildStatus = subscribeToBuildStatus({
+    onBuildErrors: actions.buildErrorsChanged
+  });
+  return {
+    actions,
+    dispose() {
+      unsubscribe();
+      stopBuildStatus();
+      overlayStyle.remove();
+      cancelPendingRecovery();
+      if (window.__reploNextErrorFeed?.listener === handleNextError) {
+        window.__reploNextErrorFeed.listener = null;
+      }
+    }
+  };
+}
+function openSocket(url) {
+  return new Promise((resolve) => {
+    const socket = new window.WebSocket(url);
+    socket.addEventListener("open", () => {
+      resolve(socket);
+    });
+    socket.addEventListener("close", () => {
+      resolve(null);
+    });
+  });
+}
+function subscribeToBuildStatus({
+  onBuildErrors
+}) {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const getUrl = (path) => {
+    return `${protocol}//${window.location.host}${path}`;
+  };
+  let isStopped = false;
+  let currentSocket = null;
+  const listen = (socket, path) => {
+    if (isStopped) {
+      socket.close();
+      return;
+    }
+    currentSocket = socket;
+    socket.addEventListener("message", (event) => {
+      const data = z.string().safeParse(event.data);
+      if (!data.success) {
+        return;
+      }
+      const status = hmrBuildStatusSchema.safeParse(JSON.parse(data.data));
+      if (status.success) {
+        onBuildErrors(
+          status.data.errors.map((message) => {
+            return truncate(stripAnsi(message));
+          })
+        );
+      }
+    });
+    socket.addEventListener("close", () => {
+      if (!isStopped) {
+        void reconnect(path);
+      }
+    });
+  };
+  const reconnect = async (path) => {
+    const socket = await retry(
+      async () => {
+        if (isStopped) {
+          return null;
+        }
+        const opened = await openSocket(getUrl(path));
+        if (opened === null) {
+          throw new HmrSocketClosedError(path);
+        }
+        return opened;
+      },
+      {
+        forever: true,
+        minTimeout: HMR_RECONNECT_MIN_MS,
+        maxTimeout: HMR_RECONNECT_MAX_MS
+      }
+    );
+    if (socket !== null) {
+      listen(socket, path);
+    }
+  };
+  const connect = async () => {
+    await retry(
+      async () => {
+        for (const path of HMR_PATHS) {
+          if (isStopped) {
+            return;
+          }
+          const socket = await openSocket(getUrl(path));
+          if (socket !== null) {
+            listen(socket, path);
+            return;
+          }
+        }
+        throw new HmrSocketClosedError(
+          "No HMR endpoint accepted the connection"
+        );
+      },
+      {
+        forever: true,
+        minTimeout: HMR_RECONNECT_MIN_MS,
+        maxTimeout: HMR_RECONNECT_MAX_MS
+      }
+    );
+  };
+  void connect();
+  return () => {
+    isStopped = true;
+    currentSocket?.close();
+  };
+}
+function getPreviewHealthMonitor() {
+  if (window.self === window.top) {
+    return null;
+  }
+  window.__reploPreviewHealthMonitor ??= createPreviewHealthMonitor();
+  return window.__reploPreviewHealthMonitor;
+}
+function getPreviewHealthActions() {
+  return getPreviewHealthMonitor()?.actions ?? null;
+}
+function resetPreviewHealthMonitorForTests() {
+  window.__reploPreviewHealthMonitor?.dispose();
+  delete window.__reploPreviewHealthMonitor;
+}
+if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
+  getPreviewHealthMonitor();
+}
+export {
+  getPreviewHealthActions,
+  resetPreviewHealthMonitorForTests
+};

package/sandbox-runtime.js

@@ -7,7 +7,6 @@ import { DesignLibraryPreview } from "./design-library-preview/DesignLibraryPrev
 import { DocumentReadyBeacon } from "./DocumentReadyBeacon";
 import LinkInterceptor from "./LinkInterceptor";
 import { NavigationReceiver } from "./NavigationReceiver";
-import { NextErrorReporter } from "./NextErrorReporter";
 import { PageCaptureResponder } from "./PageCaptureResponder";
 import PostHogRelay from "./posthog-relay";
 import { EditorSelection } from "./select-mode/EditorSelection";
@@ -19,7 +18,6 @@ function SandboxRuntime({ children }) {
   const isDevServer = process.env.NODE_ENV === "development";
   return isDevServer ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(DocumentReadyBeacon, {}),
-    /* @__PURE__ */ jsx(NextErrorReporter, {}),
     /* @__PURE__ */ jsxs(ClientErrorBoundary, { resetKey: children, children: [
       /* @__PURE__ */ jsx(LinkInterceptor, {}),
       /* @__PURE__ */ jsx(NavigationReceiver, {}),

package/select-mode/hooks/useSelectionHover.js

@@ -7,6 +7,7 @@ import {
 } from "../interactions/sectionGeometry";
 import { getElementBoundingRect } from "../interactions/selectionGeometry";
 import { isSectionCanvasControl } from "../section-canvas/sectionCanvasControls";
+import { sectionCanvasStore } from "../section-canvas/sectionCanvasStore";
 import { useDisplayMode, useSelectModeStore } from "../selectModeStore";
 function useSelectionHover() {
   const store = useSelectModeStore();
@@ -31,6 +32,10 @@ function useSelectionHover() {
       getWebsiteBuilderRpc()?.hoverElement({ rect: hoverRect });
     };
     const syncCurrentHover = (pointerClientPosition = store.getState().lastPointerClientPosition) => {
+      if (sectionCanvasStore.getState().drag) {
+        postHoveredElement(null);
+        return;
+      }
       const previewSection = store.getState().sectionPreviewElement;
       if (previewSection) {
         if (previewSection.isConnected) {

package/select-mode/iframeRpcChannel.d.ts

@@ -455,9 +455,9 @@ export declare function getSelectModeIframeRpcChannel(): import("../_vendor/sche
         inputSchema: import("zod").ZodObject<{
             feedback: import("zod").ZodNullable<import("zod").ZodObject<{
                 status: import("zod").ZodEnum<{
+                    failed: "failed";
                     pending: "pending";
                     unavailable: "unavailable";
-                    failed: "failed";
                 }>;
                 rect: import("zod").ZodObject<{
                     x: import("zod").ZodNumber;