@lark-apaas/client-toolkit 1.1.24 → 1.1.25-alpha.1

package/lib/components/AppContainer/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ConfigProvider } from "antd";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import IframeBridge from "./IframeBridge.js";
@@ -15,6 +15,7 @@ import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
 import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
+import { ServerLogPoller } from "../../server-log/index.js";
 registerDayjsPlugins();
 initAxiosConfig();
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
@@ -30,6 +31,7 @@ const readCssVarColor = (varName, fallback)=>{
 const App = (props)=>{
     const { themeMeta = {} } = props;
     useAppInfo();
+    const serverLogPollerRef = useRef(null);
     const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
         rem: '0.625'
     };
@@ -41,6 +43,30 @@ const App = (props)=>{
             borderRadius: radiusToken
         }
     };
+    useEffect(()=>{
+        if ('production' !== process.env.NODE_ENV && window.parent !== window) {
+            try {
+                const backendUrl = window.location.origin;
+                serverLogPollerRef.current = new ServerLogPoller({
+                    serverUrl: backendUrl,
+                    apiPath: '/dev/logs/server-logs',
+                    pollInterval: 2000,
+                    limit: 100,
+                    debug: true
+                });
+                serverLogPollerRef.current.start();
+                console.log('[AppContainer] Server log poller started');
+            } catch (error) {
+                console.error('[AppContainer] Failed to start server log poller:', error);
+            }
+            return ()=>{
+                if (serverLogPollerRef.current) {
+                    serverLogPollerRef.current.stop();
+                    console.log('[AppContainer] Server log poller stopped');
+                }
+            };
+        }
+    }, []);
     useEffect(()=>{
         if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
             setTimeout(()=>{

package/lib/server-log/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Server Log 模块
+ *
+ * 通过 HTTP 轮询方式获取服务端日志并转发给父窗口
+ */
+export { ServerLogPoller } from './poller';
+export type { ServerLogPollerOptions } from './poller';
+export type { ServerLog, ServerLogLevel, ServerLogSource, ServerLogMeta, ServerLogPostMessage, ClientToServerMessage, ServerToClientMessage, } from './types';
+export { ServerLogPoller as default } from './poller';

package/lib/server-log/index.js

@@ -0,0 +1,2 @@
+import { ServerLogPoller } from "./poller.js";
+export { ServerLogPoller, ServerLogPoller as default };

package/lib/server-log/poller.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Server Log Poller (HTTP 轮询版本)
+ *
+ * 职责：
+ * 1. 定期轮询后端 HTTP API (/dev/logs/server-logs)
+ * 2. 获取新的服务端日志
+ * 3. 将接收到的日志通过 postMessage 转发给父窗口 (miaoda)
+ * 4. 管理连接状态并通知父窗口
+ *
+ * 与 ServerLogForwarder 的区别：
+ * - 使用 HTTP 轮询代替 WebSocket
+ * - 无需 socket.io-client 依赖
+ * - 更简单、更稳定、更易调试
+ */
+export interface ServerLogPollerOptions {
+    /**
+     * 后端服务器 URL
+     * @example 'http://localhost:3000'
+     */
+    serverUrl: string;
+    /**
+     * API 路径
+     * @default '/dev/logs/server-logs'
+     */
+    apiPath?: string;
+    /**
+     * 轮询间隔（毫秒）
+     * @default 2000
+     */
+    pollInterval?: number;
+    /**
+     * 每次获取的日志数量
+     * @default 100
+     */
+    limit?: number;
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+}
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+export declare class ServerLogPoller {
+    private intervalId;
+    private status;
+    private lastTimestamp;
+    private options;
+    private isPolling;
+    constructor(options: ServerLogPollerOptions);
+    /**
+     * 启动轮询器
+     */
+    start(): void;
+    /**
+     * 停止轮询器
+     */
+    stop(): void;
+    /**
+     * 获取当前连接状态
+     */
+    getStatus(): ConnectionStatus;
+    /**
+     * 执行一次轮询
+     */
+    private poll;
+    /**
+     * 转发日志到父窗口
+     */
+    private forwardLog;
+    /**
+     * 更新连接状态并通知父窗口
+     */
+    private updateStatus;
+    /**
+     * 发送消息到父窗口
+     */
+    private postToParent;
+    /**
+     * 调试日志
+     */
+    private log;
+    /**
+     * 错误日志
+     */
+    private error;
+}
+export {};

package/lib/server-log/poller.js

@@ -0,0 +1,133 @@
+class ServerLogPoller {
+    intervalId = null;
+    status = 'disconnected';
+    lastTimestamp = 0;
+    options;
+    isPolling = false;
+    constructor(options){
+        this.options = {
+            serverUrl: options.serverUrl,
+            apiPath: (process.env.CLIENT_BASE_PATH || '') + (options.apiPath || '/dev/logs/server-logs'),
+            pollInterval: options.pollInterval || 2000,
+            limit: options.limit || 100,
+            debug: options.debug ?? false
+        };
+    }
+    start() {
+        if (this.isPolling) return void this.log('Poller already started');
+        this.isPolling = true;
+        this.updateStatus('connecting');
+        this.log('Starting server log poller...', {
+            serverUrl: this.options.serverUrl,
+            apiPath: this.options.apiPath,
+            pollInterval: this.options.pollInterval
+        });
+        this.poll();
+        this.intervalId = window.setInterval(()=>{
+            this.poll();
+        }, this.options.pollInterval);
+    }
+    stop() {
+        if (!this.isPolling) return void this.log('Poller not running');
+        this.log('Stopping server log poller...');
+        if (null !== this.intervalId) {
+            window.clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+        this.isPolling = false;
+        this.updateStatus('disconnected');
+    }
+    getStatus() {
+        return this.status;
+    }
+    async poll() {
+        try {
+            const url = `${this.options.serverUrl}${this.options.apiPath}?limit=${this.options.limit}&sources=server,trace,server-std,client-std`;
+            this.log('Polling...', {
+                url
+            });
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    Accept: 'application/json'
+                },
+                signal: AbortSignal.timeout(5000)
+            });
+            if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            const data = await response.json();
+            this.log('Received logs', {
+                count: data.logs.length,
+                total: data.total,
+                hasMore: data.hasMore
+            });
+            const newLogs = data.logs.filter((log)=>log.timestamp > this.lastTimestamp);
+            if (newLogs.length > 0) {
+                this.lastTimestamp = Math.max(...newLogs.map((log)=>log.timestamp));
+                newLogs.sort((a, b)=>a.timestamp - b.timestamp);
+                this.log(`Forwarding ${newLogs.length} new logs`);
+                newLogs.forEach((log)=>{
+                    this.forwardLog(log);
+                });
+            }
+            if ('connected' !== this.status) {
+                this.updateStatus('connected');
+                if (0 === this.lastTimestamp && data.logs.length > 0) this.lastTimestamp = Math.max(...data.logs.map((log)=>log.timestamp));
+            }
+        } catch (error) {
+            this.error('Poll failed', error);
+            if ('error' !== this.status) {
+                this.updateStatus('error');
+                this.postToParent({
+                    type: 'SERVER_LOG_CONNECTION',
+                    status: 'error',
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+        }
+    }
+    forwardLog(log) {
+        try {
+            this.log('Forwarding log to parent window', {
+                type: 'SERVER_LOG',
+                logId: log.id,
+                level: log.level,
+                tags: log.tags
+            });
+            this.postToParent({
+                type: 'SERVER_LOG',
+                payload: JSON.stringify(log)
+            });
+            this.log('Log forwarded successfully');
+        } catch (e) {
+            this.error('Failed to forward log', e);
+        }
+    }
+    updateStatus(status) {
+        const previousStatus = this.status;
+        this.status = status;
+        if (previousStatus !== status) {
+            this.log(`Status changed: ${previousStatus} → ${status}`);
+            this.postToParent({
+                type: 'SERVER_LOG_CONNECTION',
+                status
+            });
+        }
+    }
+    postToParent(message) {
+        if (window.parent === window) return;
+        try {
+            window.parent.postMessage(message, '*');
+        } catch (e) {
+            this.error('postMessage error', e);
+        }
+    }
+    log(message, data) {
+        if (this.options.debug) if (data) console.log(`[ServerLogPoller] ${message}`, data);
+        else console.log(`[ServerLogPoller] ${message}`);
+    }
+    error(message, error) {
+        if (error) console.error(`[ServerLogPoller] ${message}`, error);
+        else console.error(`[ServerLogPoller] ${message}`);
+    }
+}
+export { ServerLogPoller };

package/lib/server-log/types.d.ts

@@ -0,0 +1,166 @@
+/**
+ * Server Log Stream 类型定义
+ *
+ * 这些类型与 @lark-apaas/nestjs-logger 保持一致
+ * 用于 iframe 端的日志转发功能
+ */
+/**
+ * 后端日志级别
+ * 与 NestJS LogLevel 对齐，但增加了 fatal
+ */
+export type ServerLogLevel = 'fatal' | 'error' | 'warn' | 'log' | 'debug' | 'verbose';
+/**
+ * 日志来源
+ */
+export type ServerLogSource = 'server' | 'trace' | 'server-std' | 'client-std' | 'browser';
+/**
+ * 日志元数据
+ */
+export interface ServerLogMeta {
+    pid?: number;
+    hostname?: string;
+    service?: string;
+    path?: string;
+    method?: string;
+    statusCode?: number;
+    durationMs?: number;
+    ip?: string;
+    requestBody?: any;
+    responseBody?: any;
+    [key: string]: unknown;
+}
+/**
+ * 后端日志对象
+ * 用于实时推送给前端展示
+ */
+export interface ServerLog {
+    /**
+     * 唯一标识符（UUID）
+     * 用于前端去重和引用
+     */
+    id: string;
+    /**
+     * 日志级别
+     */
+    level: ServerLogLevel;
+    /**
+     * 时间戳（毫秒）
+     */
+    timestamp: number;
+    /**
+     * 日志消息
+     */
+    message: string;
+    /**
+     * 日志上下文（如 Controller 名称、Service 名称）
+     */
+    context?: string;
+    /**
+     * 请求追踪 ID
+     * 用于关联同一个请求的所有日志
+     */
+    traceId?: string;
+    /**
+     * 用户 ID
+     */
+    userId?: string;
+    /**
+     * 应用 ID
+     */
+    appId?: string;
+    /**
+     * 租户 ID
+     */
+    tenantId?: string;
+    /**
+     * 错误堆栈（仅 ERROR/FATAL 级别）
+     */
+    stack?: string;
+    /**
+     * 额外的元数据
+     */
+    meta?: ServerLogMeta;
+    /**
+     * 自定义标签
+     * 如 ['server', 'bootstrap'] 或 ['trace', 'http']
+     */
+    tags?: string[];
+}
+/**
+ * WebSocket 消息类型（客户端 → 服务端）
+ */
+export type ClientToServerMessage = {
+    type: 'SUBSCRIBE';
+    payload: {
+        levels?: ServerLogLevel[];
+        tags?: string[];
+        sources?: ServerLogSource[];
+    };
+} | {
+    type: 'UNSUBSCRIBE';
+} | {
+    type: 'GET_HISTORY';
+    payload: {
+        limit?: number;
+        offset?: number;
+        levels?: ServerLogLevel[];
+        sources?: ServerLogSource[];
+    };
+} | {
+    type: 'CLEAR_LOGS';
+};
+/**
+ * WebSocket 消息类型（服务端 → 客户端）
+ */
+export type ServerToClientMessage = {
+    type: 'CONNECTED';
+    payload: {
+        clientId: string;
+        timestamp: number;
+    };
+} | {
+    type: 'LOG';
+    payload: ServerLog;
+} | {
+    type: 'LOGS_BATCH';
+    payload: ServerLog[];
+} | {
+    type: 'HISTORY';
+    payload: {
+        logs: ServerLog[];
+        total: number;
+        hasMore: boolean;
+    };
+} | {
+    type: 'LOGS_CLEARED';
+} | {
+    type: 'SUBSCRIBED';
+    payload: {
+        levels?: ServerLogLevel[];
+        tags?: string[];
+        sources?: ServerLogSource[];
+    };
+} | {
+    type: 'UNSUBSCRIBED';
+} | {
+    type: 'ERROR';
+    payload: {
+        message: string;
+        code?: string;
+    };
+};
+/**
+ * PostMessage 类型（iframe → parent）
+ *
+ * iframe 端通过 postMessage 将接收到的 WebSocket 消息转发给父窗口
+ */
+export type ServerLogPostMessage = {
+    type: 'SERVER_LOG';
+    payload: string;
+} | {
+    type: 'SERVER_LOG_CONNECTION';
+    status: 'connected' | 'disconnected' | 'error' | 'connecting';
+    error?: string;
+} | {
+    type: 'SERVER_LOG_CLEARED';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.24",
+  "version": "1.1.25-alpha.1",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -124,6 +124,8 @@
     "@tailwindcss/postcss": "^4.1.0",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
+    "@types/blueimp-md5": "^2.18.2",
+    "@types/crypto-js": "^4.2.2",
     "@types/lodash": "^4.17.20",
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.23",