@onlook/storybook-plugin 0.4.0-beta.12 → 0.4.0-beta.14

package/dist/index.d.ts

@@ -53,6 +53,20 @@ type OnlookContainedPayload = {
     message: string;
     /** Present when the failure is attributed to a contained module (U4). */
     module?: ContainedModuleMarker;
+    /**
+     * React component stack from `onCaughtError`'s `errorInfo` (ONL-1505,
+     * additive). Present only on the `via: 'onCaughtError'` path — the legacy
+     * boundary decorator has no component stack to offer.
+     */
+    componentStack?: string;
+    /**
+     * Which catch path emitted this (ONL-1505, additive). `'onCaughtError'` =
+     * the React root hook registered via `parameters.react.rootOptions` (catches
+     * component render-throws, incl. those caught by Storybook's own
+     * renderToCanvas ErrorBoundary); `'decorator'` = the legacy
+     * OnlookContainmentBoundary decorator. Absent ⟹ legacy decorator (pre-1505).
+     */
+    via?: 'onCaughtError' | 'decorator';
 };
 type OnlookRenderedPayload = {
     storyId: string;

package/dist/preset/index.d.ts

@@ -2,9 +2,13 @@ import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-B9Eo_OIq.js
 import 'vite';
 
 declare function pluginOptionsFromPresetOptions(options: Record<string, unknown> | undefined): OnlookPluginOptions;
+type ChannelLike = {
+    on(eventName: string, listener: (...args: unknown[]) => void): unknown;
+};
+declare function experimental_serverChannel(channel: ChannelLike): Promise<ChannelLike>;
 type ViteConfigLike = {
     plugins?: unknown[];
 } & Record<string, unknown>;
 declare function viteFinal(config: ViteConfigLike, options?: Record<string, unknown>): Promise<ViteConfigLike>;
 
-export { pluginOptionsFromPresetOptions, viteFinal };
+export { experimental_serverChannel, pluginOptionsFromPresetOptions, viteFinal };

package/dist/preset/index.js

@@ -13,6 +13,15 @@ import { promisify } from 'util';
 import { chromium } from 'playwright';
 
 globalThis.require = createRequire(import.meta.url);
+
+// src/containment-contract/containment-contract.ts
+var ONLOOK_CONTAINED_MODULES_GLOBAL = "__ONLOOK_CONTAINED_MODULES__";
+var ONLOOK_CONTAINED_PROP = "__onlookContained";
+var ONLOOK_CONTAINED_EVENT = "onlook/contained";
+var ONLOOK_RENDERED_EVENT = "onlook/rendered";
+var ONLOOK_UNCONTAINED_ERROR_EVENT = "onlook/uncontained-error";
+var ONLOOK_RENDER_STATE_ATTR = "data-onlook-render-state";
+var ONLOOK_CONTAINED_CARD_ATTR = "data-onlook-contained-card";
 function componentLocPlugin(options = {}) {
   const include = options.include ?? /\.(jsx|tsx)$/;
   const traverse = traverseModule.default ?? traverseModule;
@@ -73,14 +82,6 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-
-// src/containment-contract/containment-contract.ts
-var ONLOOK_CONTAINED_MODULES_GLOBAL = "__ONLOOK_CONTAINED_MODULES__";
-var ONLOOK_CONTAINED_PROP = "__onlookContained";
-var ONLOOK_RENDER_STATE_ATTR = "data-onlook-render-state";
-var ONLOOK_CONTAINED_CARD_ATTR = "data-onlook-contained-card";
-
-// src/env-containment/env-containment.ts
 var ENV_CONTAINMENT_PLUGIN_NAME = "onlook-env-containment";
 var ENV_CONTAINMENT_VIRTUAL_PREFIX = "\0onlook-env-containment:";
 var VALID_IDENT_RE = /^[A-Za-z_$][\w$]*$/;
@@ -1431,12 +1432,12 @@ function storybookOnlookPlugin(options = {}) {
         "manifest.json"
       );
       refreshManifest(cachedManifestPath);
-      let pending2;
+      let pending3;
       const scheduleRefresh = (file) => {
         if (file !== cachedManifestPath) return;
-        if (pending2) clearTimeout(pending2);
-        pending2 = setTimeout(() => {
-          pending2 = void 0;
+        if (pending3) clearTimeout(pending3);
+        pending3 = setTimeout(() => {
+          pending3 = void 0;
           refreshManifest(cachedManifestPath);
         }, 100);
       };
@@ -1521,6 +1522,68 @@ function storybookOnlookPlugin(options = {}) {
   );
 }
 
+// src/utils/notifyStoryError/notifyStoryError.ts
+var DEBOUNCE_MS3 = 300;
+var REQUEST_TIMEOUT_MS2 = 5e3;
+var pending2 = null;
+var inFlight2 = false;
+var trailing = false;
+var latest = null;
+function notifyStoryError(payload) {
+  enqueue({ type: "STORY_ERROR", ...payload });
+}
+function notifyStoryResolved(storyId) {
+  enqueue({ type: "STORY_RESOLVED", storyId });
+}
+function enqueue(event) {
+  const proxyToken = process.env.ONBOOK_PROXY_TOKEN;
+  const broadcastUrl = process.env.ONBOOK_BROADCAST_URL;
+  if (!proxyToken || !broadcastUrl) return;
+  latest = event;
+  if (pending2) clearTimeout(pending2);
+  pending2 = setTimeout(() => {
+    pending2 = null;
+    if (inFlight2) {
+      trailing = true;
+      return;
+    }
+    void fire2(proxyToken, broadcastUrl);
+  }, DEBOUNCE_MS3);
+}
+async function fire2(proxyToken, broadcastUrl) {
+  const event = latest;
+  if (!event) return;
+  inFlight2 = true;
+  try {
+    const res = await fetch(broadcastUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${proxyToken}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ event }),
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS2)
+    });
+    if (!res.ok) {
+      console.warn("[STORYBOOK_PLUGIN] story-event broadcast non-2xx", {
+        status: res.status,
+        statusText: res.statusText
+      });
+    }
+  } catch (err) {
+    console.warn(
+      "[STORYBOOK_PLUGIN] story-event broadcast failed",
+      err instanceof Error ? err.message : String(err)
+    );
+  } finally {
+    inFlight2 = false;
+    if (trailing) {
+      trailing = false;
+      void fire2(proxyToken, broadcastUrl);
+    }
+  }
+}
+
 // src/preset/preset.ts
 var OPTION_KEY_MAP = {
   port: true,
@@ -1542,10 +1605,56 @@ function pluginOptionsFromPresetOptions(options) {
   }
   return picked;
 }
+var erroredStories = /* @__PURE__ */ new Map();
+var RENDER_RESOLVE_SUPPRESS_MS = 1500;
+async function experimental_serverChannel(channel) {
+  try {
+    channel.on(ONLOOK_CONTAINED_EVENT, (...args) => {
+      const payload = args[0];
+      if (!payload) return;
+      console.error(`[ONBOOK_STORY_ERROR] contained story=${payload.storyId || "?"}`);
+      if (payload.storyId) erroredStories.set(payload.storyId, Date.now());
+      notifyStoryError({
+        storyId: payload.storyId ?? "",
+        message: payload.message ?? "Unknown story error",
+        source: "contained",
+        ...payload.componentStack ? { componentStack: payload.componentStack } : {}
+      });
+    });
+    channel.on(ONLOOK_UNCONTAINED_ERROR_EVENT, (...args) => {
+      const payload = args[0];
+      if (!payload) return;
+      console.error(`[ONBOOK_STORY_ERROR] uncontained story=${payload.storyId || "?"}`);
+      if (payload.storyId) erroredStories.set(payload.storyId, Date.now());
+      notifyStoryError({
+        storyId: payload.storyId ?? "",
+        message: payload.message ?? "Unknown story error",
+        source: "uncontained"
+      });
+    });
+    channel.on(ONLOOK_RENDERED_EVENT, (...args) => {
+      const payload = args[0];
+      if (!payload?.storyId) return;
+      const erroredAt = erroredStories.get(payload.storyId);
+      if (erroredAt === void 0) return;
+      if (Date.now() - erroredAt < RENDER_RESOLVE_SUPPRESS_MS) return;
+      erroredStories.delete(payload.storyId);
+      console.error(`[ONBOOK_STORY_ERROR] resolved story=${payload.storyId}`);
+      notifyStoryResolved(payload.storyId);
+    });
+    console.error("[ONBOOK_STORY_ERROR] server-channel error + recovery tap attached");
+  } catch (err) {
+    console.error(
+      "[ONBOOK_STORY_ERROR] failed to attach server-channel tap",
+      err instanceof Error ? err.message : String(err)
+    );
+  }
+  return channel;
+}
 async function viteFinal(config, options = {}) {
   const plugins = storybookOnlookPlugin(pluginOptionsFromPresetOptions(options));
   if (plugins.length === 0) return config;
   return { ...config, plugins: [...config.plugins ?? [], ...plugins] };
 }
 
-export { pluginOptionsFromPresetOptions, viteFinal };
+export { experimental_serverChannel, pluginOptionsFromPresetOptions, viteFinal };

package/dist/preview/index.d.ts

@@ -44,6 +44,20 @@ type OnlookContainedPayload = {
     message: string;
     /** Present when the failure is attributed to a contained module (U4). */
     module?: ContainedModuleMarker;
+    /**
+     * React component stack from `onCaughtError`'s `errorInfo` (ONL-1505,
+     * additive). Present only on the `via: 'onCaughtError'` path — the legacy
+     * boundary decorator has no component stack to offer.
+     */
+    componentStack?: string;
+    /**
+     * Which catch path emitted this (ONL-1505, additive). `'onCaughtError'` =
+     * the React root hook registered via `parameters.react.rootOptions` (catches
+     * component render-throws, incl. those caught by Storybook's own
+     * renderToCanvas ErrorBoundary); `'decorator'` = the legacy
+     * OnlookContainmentBoundary decorator. Absent ⟹ legacy decorator (pre-1505).
+     */
+    via?: 'onCaughtError' | 'decorator';
 };
 type OnlookRenderedPayload = {
     storyId: string;
@@ -92,7 +106,7 @@ declare class OnlookContainmentBoundary extends React.Component<BoundaryProps, B
     private renderedSignalSent;
     constructor(props: BoundaryProps);
     static getDerivedStateFromError(error: unknown): BoundaryState;
-    componentDidCatch(error: unknown): void;
+    componentDidCatch(): void;
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
@@ -134,6 +148,27 @@ declare function getPreviewChannel(): ChannelLike | null;
  * stay byte-stable.
  */
 declare function isSnapshotEnvironment(): boolean;
+/** Trim a React component stack to a payload-sized summary. */
+declare function summarizeComponentStack(stack: unknown, maxLength?: number): string | undefined;
+/**
+ * React root `onCaughtError` handler (ONL-1505). Registered via the preview
+ * annotations' `parameters.react.rootOptions.onCaughtError`, which
+ * `@storybook/react`'s `renderToCanvas` threads verbatim into `createRoot`.
+ *
+ * React 19 calls this for ANY error caught by an error boundary in the story
+ * tree — crucially including Storybook's own `renderToCanvas` ErrorBoundary,
+ * which is what catches a component render-throw. This is the ONLY node-
+ * reachable signal for render-crashes: `window.onerror` fires only for
+ * UNCAUGHT errors, and the channel `storyThrewException` / `storyErrored`
+ * events don't fire for boundary-caught render-throws. We re-emit as the
+ * existing `onlook/contained` event (tagged `via: 'onCaughtError'`) so the
+ * node-side server-channel tap needs no change.
+ *
+ * Registering `onCaughtError` replaces React's default (which logs caught
+ * errors to `console.error`), so we re-log for dev parity — keeping the
+ * iframe console behavior unchanged and giving the live tap a second marker.
+ */
+declare function handleRootCaughtError(error: unknown, componentStack?: unknown): void;
 /**
  * Attribute an error to a contained module (U4's env-containment stand-ins).
  * Primary: the marker the stand-in attaches at `error.__onlookContained`.
@@ -152,5 +187,14 @@ declare function onlookBeforeAll(): void;
 
 declare const decorators: (typeof onlookContainmentDecorator)[];
 declare const beforeAll: typeof onlookBeforeAll;
+declare const parameters: {
+    react: {
+        rootOptions: {
+            onCaughtError: (error: unknown, errorInfo?: {
+                componentStack?: string;
+            }) => void;
+        };
+    };
+};
 
-export { ContainmentCard, ONLOOK_CONTAINED_CARD_ATTR, ONLOOK_CONTAINED_EVENT, ONLOOK_CONTAINMENT_CONTRACT_GLOBAL, ONLOOK_CONTAINMENT_CONTRACT_VERSION, ONLOOK_RENDERED_EVENT, ONLOOK_RENDER_STATE_ATTR, ONLOOK_RENDER_STORY_ATTR, ONLOOK_UNCONTAINED_ERROR_EVENT, type OnlookContainedPayload, OnlookContainmentBoundary, type OnlookContainmentContract, type OnlookRenderState, type OnlookRenderedPayload, type OnlookUncontainedErrorPayload, attributeErrorToModule, beforeAll, decorators, getPreviewChannel, installUncontainedErrorRelay, isSnapshotEnvironment, onlookBeforeAll, onlookContainmentDecorator };
+export { ContainmentCard, ONLOOK_CONTAINED_CARD_ATTR, ONLOOK_CONTAINED_EVENT, ONLOOK_CONTAINMENT_CONTRACT_GLOBAL, ONLOOK_CONTAINMENT_CONTRACT_VERSION, ONLOOK_RENDERED_EVENT, ONLOOK_RENDER_STATE_ATTR, ONLOOK_RENDER_STORY_ATTR, ONLOOK_UNCONTAINED_ERROR_EVENT, type OnlookContainedPayload, OnlookContainmentBoundary, type OnlookContainmentContract, type OnlookRenderState, type OnlookRenderedPayload, type OnlookUncontainedErrorPayload, attributeErrorToModule, beforeAll, decorators, getPreviewChannel, handleRootCaughtError, installUncontainedErrorRelay, isSnapshotEnvironment, onlookBeforeAll, onlookContainmentDecorator, parameters, summarizeComponentStack };

package/dist/preview/index.js

@@ -85,6 +85,31 @@ function emitRendered(storyId) {
     contractVersion: ONLOOK_CONTAINMENT_CONTRACT_VERSION
   });
 }
+function summarizeComponentStack(stack, maxLength = 2e3) {
+  if (typeof stack !== "string") return void 0;
+  const trimmed = stack.trim();
+  if (!trimmed) return void 0;
+  return trimmed.length > maxLength ? `${trimmed.slice(0, maxLength - 1)}\u2026` : trimmed;
+}
+function handleRootCaughtError(error, componentStack) {
+  try {
+    console.error(error);
+  } catch {
+  }
+  const storyId = currentStoryId();
+  const stack = summarizeComponentStack(componentStack);
+  const module = attributeErrorToModule(error);
+  emitContained({
+    storyId: storyId ?? "",
+    contractVersion: ONLOOK_CONTAINMENT_CONTRACT_VERSION,
+    message: summarizeError(error),
+    ...module ? { module } : {},
+    ...stack ? { componentStack: stack } : {}
+  });
+  if (storyId) {
+    queueMicrotask(() => setRenderState("contained", storyId));
+  }
+}
 function summarizeError(error, maxLength = 400) {
   const raw = error instanceof Error ? error.message : typeof error === "string" ? error : String(error);
   const oneline = raw.trim();
@@ -242,15 +267,8 @@ var OnlookContainmentBoundary = class extends React.Component {
   static getDerivedStateFromError(error) {
     return { error, hasError: true };
   }
-  componentDidCatch(error) {
-    const module = attributeErrorToModule(error);
+  componentDidCatch() {
     setRenderState("contained", this.props.storyId);
-    emitContained({
-      storyId: this.props.storyId,
-      contractVersion: ONLOOK_CONTAINMENT_CONTRACT_VERSION,
-      message: summarizeError(error),
-      ...module ? { module } : {}
-    });
   }
   componentDidMount() {
     exposeContract();
@@ -298,5 +316,12 @@ function onlookContainmentDecorator(Story, context) {
 // src/preview/index.ts
 var decorators = [onlookContainmentDecorator];
 var beforeAll = onlookBeforeAll;
+var parameters = {
+  react: {
+    rootOptions: {
+      onCaughtError: (error, errorInfo) => handleRootCaughtError(error, errorInfo?.componentStack)
+    }
+  }
+};
 
-export { ContainmentCard, ONLOOK_CONTAINED_CARD_ATTR, ONLOOK_CONTAINED_EVENT, ONLOOK_CONTAINMENT_CONTRACT_GLOBAL, ONLOOK_CONTAINMENT_CONTRACT_VERSION, ONLOOK_RENDERED_EVENT, ONLOOK_RENDER_STATE_ATTR, ONLOOK_RENDER_STORY_ATTR, ONLOOK_UNCONTAINED_ERROR_EVENT, OnlookContainmentBoundary, attributeErrorToModule, beforeAll, decorators, getPreviewChannel, installUncontainedErrorRelay, isSnapshotEnvironment, onlookBeforeAll, onlookContainmentDecorator };
+export { ContainmentCard, ONLOOK_CONTAINED_CARD_ATTR, ONLOOK_CONTAINED_EVENT, ONLOOK_CONTAINMENT_CONTRACT_GLOBAL, ONLOOK_CONTAINMENT_CONTRACT_VERSION, ONLOOK_RENDERED_EVENT, ONLOOK_RENDER_STATE_ATTR, ONLOOK_RENDER_STORY_ATTR, ONLOOK_UNCONTAINED_ERROR_EVENT, OnlookContainmentBoundary, attributeErrorToModule, beforeAll, decorators, getPreviewChannel, handleRootCaughtError, installUncontainedErrorRelay, isSnapshotEnvironment, onlookBeforeAll, onlookContainmentDecorator, parameters, summarizeComponentStack };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.12",
+  "version": "0.4.0-beta.14",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -10,6 +10,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./package.json": "./package.json",
     "./preset": {
       "types": "./dist/preset/index.d.ts",
       "default": "./dist/preset/index.js"