@lark-apaas/client-toolkit 1.1.23-dataloom-test.2 → 1.1.23-serverlog-test.0

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 { ServerLogForwarder } 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 serverLogForwarderRef = useRef(null);
     const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
         rem: '0.625'
     };
@@ -41,6 +43,29 @@ const App = (props)=>{
             borderRadius: radiusToken
         }
     };
+    useEffect(()=>{
+        if ('production' !== process.env.NODE_ENV && window.parent !== window) {
+            try {
+                const backendUrl = window.location.origin;
+                serverLogForwarderRef.current = new ServerLogForwarder({
+                    serverUrl: backendUrl,
+                    path: '/api/server-log/socket.io',
+                    namespace: '/dev/logs/server',
+                    debug: true
+                });
+                serverLogForwarderRef.current.start();
+                console.log('[AppContainer] Server log forwarder started');
+            } catch (error) {
+                console.error('[AppContainer] Failed to start server log forwarder:', error);
+            }
+            return ()=>{
+                if (serverLogForwarderRef.current) {
+                    serverLogForwarderRef.current.stop();
+                    console.log('[AppContainer] Server log forwarder stopped');
+                }
+            };
+        }
+    }, []);
     useEffect(()=>{
         if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
             setTimeout(()=>{

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

@@ -0,0 +1,88 @@
+/**
+ * Server Log Forwarder
+ *
+ * 职责：
+ * 1. 连接到后端 WebSocket Server (/dev/logs/server)
+ * 2. 订阅所有服务端日志
+ * 3. 将接收到的日志通过 postMessage 转发给父窗口 (miaoda)
+ * 4. 管理连接状态并通知父窗口
+ */
+export interface ServerLogForwarderOptions {
+    /**
+     * 后端服务器 URL
+     * @example 'http://localhost:3000'
+     */
+    serverUrl: string;
+    /**
+     * Socket.io 服务器路径
+     * @default '/socket.io'
+     * @example '/api/server-log/socket.io'
+     */
+    path?: string;
+    /**
+     * WebSocket 命名空间
+     * @default '/dev/logs/server'
+     */
+    namespace?: string;
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * 重连配置
+     */
+    reconnection?: {
+        enabled: boolean;
+        attempts: number;
+        delay: number;
+    };
+}
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+export declare class ServerLogForwarder {
+    private socket;
+    private status;
+    private options;
+    constructor(options: ServerLogForwarderOptions);
+    /**
+     * 启动转发器
+     */
+    start(): void;
+    /**
+     * 停止转发器
+     */
+    stop(): void;
+    /**
+     * 获取当前连接状态
+     */
+    getStatus(): ConnectionStatus;
+    /**
+     * 绑定 Socket.io 事件监听器
+     */
+    private attachEventListeners;
+    /**
+     * 处理服务端消息
+     */
+    private handleServerMessage;
+    /**
+     * 转发日志到父窗口
+     */
+    private forwardLog;
+    /**
+     * 更新连接状态并通知父窗口
+     */
+    private updateStatus;
+    /**
+     * 发送消息到父窗口
+     */
+    private postToParent;
+    /**
+     * 调试日志
+     */
+    private log;
+    /**
+     * 错误日志
+     */
+    private error;
+}
+export {};

package/lib/server-log/forwarder.js

@@ -0,0 +1,169 @@
+import { io } from "socket.io-client";
+class ServerLogForwarder {
+    socket = null;
+    status = 'disconnected';
+    options;
+    constructor(options){
+        this.options = {
+            serverUrl: options.serverUrl,
+            path: options.path || '/socket.io',
+            namespace: options.namespace || '/dev/logs/server',
+            debug: options.debug ?? false,
+            reconnection: options.reconnection || {
+                enabled: true,
+                attempts: 5,
+                delay: 1000
+            }
+        };
+    }
+    start() {
+        if (this.socket) return void this.log('Forwarder already started');
+        this.updateStatus('connecting');
+        this.log('Starting server log forwarder...', {
+            serverUrl: this.options.serverUrl,
+            path: this.options.path,
+            namespace: this.options.namespace
+        });
+        this.socket = io(`${this.options.serverUrl}${this.options.namespace}`, {
+            path: this.options.path,
+            transports: [
+                'websocket'
+            ],
+            reconnection: this.options.reconnection.enabled,
+            reconnectionAttempts: this.options.reconnection.attempts,
+            reconnectionDelay: this.options.reconnection.delay
+        });
+        this.attachEventListeners();
+    }
+    stop() {
+        if (!this.socket) return void this.log('Forwarder not running');
+        this.log('Stopping server log forwarder...');
+        this.socket.emit('UNSUBSCRIBE');
+        this.socket.disconnect();
+        this.socket = null;
+        this.updateStatus('disconnected');
+    }
+    getStatus() {
+        return this.status;
+    }
+    attachEventListeners() {
+        if (!this.socket) return;
+        this.socket.on('connect', ()=>{
+            this.log('Connected to server log stream');
+            this.updateStatus('connected');
+            this.socket?.emit('SUBSCRIBE', {});
+        });
+        this.socket.on('disconnect', (reason)=>{
+            this.log('Disconnected from server log stream', {
+                reason
+            });
+            this.updateStatus('disconnected');
+        });
+        this.socket.on('connect_error', (error)=>{
+            this.error('Connection error', error);
+            this.updateStatus('error');
+        });
+        this.socket.on('message', (message)=>{
+            this.handleServerMessage(message);
+        });
+        this.socket.on('reconnect_attempt', (attemptNumber)=>{
+            this.log(`Reconnection attempt ${attemptNumber}...`);
+            this.updateStatus('connecting');
+        });
+        this.socket.on('reconnect', (attemptNumber)=>{
+            this.log(`Reconnected after ${attemptNumber} attempts`);
+            this.updateStatus('connected');
+        });
+        this.socket.on('reconnect_failed', ()=>{
+            this.error('Reconnection failed after all attempts');
+            this.updateStatus('error');
+        });
+    }
+    handleServerMessage(message) {
+        switch(message.type){
+            case 'CONNECTED':
+                this.log('Server confirmed connection', message.payload);
+                break;
+            case 'SUBSCRIBED':
+                this.log("Subscription confirmed", message.payload);
+                break;
+            case 'LOG':
+                this.log('Received LOG message, forwarding...', {
+                    level: message.payload.level,
+                    message: message.payload.message?.substring(0, 50),
+                    tags: message.payload.tags
+                });
+                this.forwardLog(message.payload);
+                break;
+            case 'LOGS_BATCH':
+                this.log(`Received ${message.payload.length} logs in batch`);
+                message.payload.forEach((log)=>this.forwardLog(log));
+                break;
+            case 'HISTORY':
+                this.log('Received history logs', {
+                    count: message.payload.logs.length,
+                    total: message.payload.total,
+                    hasMore: message.payload.hasMore
+                });
+                break;
+            case 'LOGS_CLEARED':
+                this.log('Server logs cleared');
+                this.postToParent({
+                    type: 'SERVER_LOG_CLEARED'
+                });
+                break;
+            case 'UNSUBSCRIBED':
+                this.log('Unsubscribed from server logs');
+                break;
+            case 'ERROR':
+                this.error('Server error', message.payload);
+                break;
+            default:
+                this.log('Unknown message type', message);
+        }
+    }
+    forwardLog(log) {
+        try {
+            this.log('Forwarding log to parent window', {
+                type: 'SERVER_LOG',
+                logId: log.id,
+                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(`[ServerLogForwarder] ${message}`, data);
+        else console.log(`[ServerLogForwarder] ${message}`);
+    }
+    error(message, error) {
+        if (error) console.error(`[ServerLogForwarder] ${message}`, error);
+        else console.error(`[ServerLogForwarder] ${message}`);
+    }
+}
+export { ServerLogForwarder };

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

@@ -0,0 +1,8 @@
+/**
+ * Server Log Stream 模块
+ *
+ * 提供 iframe 端的服务端日志转发功能
+ */
+export { ServerLogForwarder } from './forwarder';
+export type { ServerLogForwarderOptions } from './forwarder';
+export type { ServerLog, ServerLogLevel, ServerLogSource, ServerLogMeta, ServerLogPostMessage, ClientToServerMessage, ServerToClientMessage, } from './types';

package/lib/server-log/index.js

@@ -0,0 +1,2 @@
+import { ServerLogForwarder } from "./forwarder.js";
+export { ServerLogForwarder };

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.23-dataloom-test.2",
+  "version": "1.1.23-serverlog-test.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -80,7 +80,7 @@
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
-    "@data-loom/js": "^0.4.2-alpha.2",
+    "@data-loom/js": "^0.4.0",
     "@lark-apaas/miaoda-inspector": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",
@@ -97,6 +97,7 @@
     "lodash": "^4.17.21",
     "network-idle": "^0.2.0",
     "penpal": "^6.2.2",
+    "socket.io-client": "^4.8.1",
     "sockjs-client": "^1.6.1",
     "sonner": "~2.0.0",
     "source-map": "^0.7.6",
@@ -124,6 +125,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",