@cfp-studio/iframe 18.4.5 → 18.4.6

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/hmrPayload.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_d5dfe5fcbde62b2ff1de970aa6c74477/node_modules/vite/types/hmrPayload.d.ts
 interface UpdatePayload {
   type: 'update';
   updates: Update[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfp-studio/iframe",
-  "version": "18.4.5",
+  "version": "18.4.6",
   "license": "MIT",
   "files": [
     "dist",
@@ -10,7 +10,7 @@
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "dependencies": {
-    "@cfp-studio/analyzer-api": "0.1.15",
+    "@cfp-studio/analyzer-api": "0.1.16",
     "@cfp-studio/fiber-reader": "0.3.0"
   },
   "devDependencies": {

package/preview/__previewjs_internal__/index.ts

@@ -1,4 +1,4 @@
-import { clearErrorPanel } from "@cfp-studio/analyzer-api";
+import { clearErrorPanel } from "@cfp-studio/analyzer-api/error-panel";
 
 import { overrideCopyCutPaste } from "./copy-cut-paste";
 import { setUpLinkInterception } from "./links";

package/preview/__previewjs_internal__/logs.ts

@@ -2,6 +2,7 @@
 import type { LogLevel } from "../../src";
 // @ts-ignore
 import inspect from "./object-inspect";
+import { postToParent } from "./runtime-bridge";
 
 // 注意: 请与 vite 保持同步:
 // https://github.com/vitejs/vite/blob/2de425d0288bfae345c5ced5c84cf67ffccaef48/packages/vite/src/client/client.ts#L117
@@ -31,12 +32,21 @@ export function setUpLogInterception() {
 						return;
 					}
 				}
+				const message = formatLogMessage(...args);
 				window.__PREVIEWJS_IFRAME__.reportEvent({
 					kind: "log-message",
 					level,
-					message: formatLogMessage(...args),
+					message,
 					timestamp: Date.now(),
 				});
+				// 同时往上广播一份给宿主（`docs/todo/38` 的 P1）。
+				//
+				// 为什么需要两条路：`reportEvent` 只落到 iframe 自己的 `state.logs`，
+				// 而 `app/client/src/main.ts` 的 `onStateUpdate` 从未消费它 ——
+				// 组件的 console 输出在宿主完全不可见，用户只能开 Webview DevTools。
+				// 这里走 `cfp-*` 前缀是为了复用已有的转发链：
+				//   iframe → app/client 的通用转发 → webview 的 classifyShellMessage → 宿主
+				publishLogToHost(level, message);
 			} finally {
 				console[level] = self;
 			}
@@ -129,3 +139,58 @@ function formatValue(value: any) {
 	}
 	return formatted;
 }
+
+/**
+ * 把一条 console 消息广播给宿主。
+ *
+ * ## 为什么单独一个函数
+ *
+ * `reportEvent` 那条路（`state.logs`）与这条（`cfp-log`）**消费者不重叠**：
+ * 前者留在 iframe 内部供 UI 用，后者往上传。和 `cfp-rendered` 的双通路是同一个模式，
+ * 见 `docs/analysis/preview-event-channels.md`。
+ *
+ * ## 为什么要限流
+ *
+ * 组件在 render 里打 `console.log` 时，一次刷新可能几十条。不设上限的话
+ * `OutputChannel` 会瞬间被刷满、`postMessage` 也会拖慢渲染。这里按
+ * {@link LOG_BURST_WINDOW_MS} 的窗口做**简单丢弃计数**：超限后只统计，
+ * 窗口结束时补一条汇总。
+ *
+ * 不追求精确（不需要漏桶/令牌桶）：排查时要的是「知道有过量日志 + 看到样本」，
+ * 不是一份完整的日志归档。
+ */
+const LOG_BURST_WINDOW_MS = 1_000;
+/** 一个窗口内最多转发多少条。超出部分计数后丢弃。 */
+const LOG_BURST_LIMIT = 50;
+
+let burstWindowStart = 0;
+let burstCount = 0;
+let droppedInWindow = 0;
+
+function publishLogToHost(level: LogLevel, message: string): void {
+	try {
+		const now = Date.now();
+		if (now - burstWindowStart > LOG_BURST_WINDOW_MS) {
+			// 上一个窗口结束时若有丢弃，补一条汇总（用 warn，确保宿主默认看得见）。
+			if (droppedInWindow > 0) {
+				postToParent({
+					kind: "cfp-log",
+					level: "warn",
+					message: `[预览页日志过多] 上一秒另有 ${droppedInWindow} 条被丢弃（上限 ${LOG_BURST_LIMIT}/秒）`,
+					timestamp: now,
+				});
+			}
+			burstWindowStart = now;
+			burstCount = 0;
+			droppedInWindow = 0;
+		}
+		if (burstCount >= LOG_BURST_LIMIT) {
+			droppedInWindow += 1;
+			return;
+		}
+		burstCount += 1;
+		postToParent({ kind: "cfp-log", level, message, timestamp: now });
+	} catch {
+		// 上报失败绝不能影响页面本身 —— console 拦截已经改了全局行为，这里必须静默。
+	}
+}