@lark-apaas/client-toolkit 1.1.14 → 1.1.15-alpha.dev.1

package/lib/components/AppContainer/IframeBridge.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { connectToParent } from "penpal";
 import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
-import { postMessage } from "../../utils/postMessage.js";
+import { submitPostMessage } from "../../utils/postMessage.js";
 import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
 import { childApi } from "./utils/childApi.js";
 import "./utils/listenHot.js";
@@ -17,7 +17,7 @@ function isRouteMessageType(type) {
     return Object.values(IframeBridge_RouteMessageType).includes(type);
 }
 async function connectParent() {
-    postMessage({
+    submitPostMessage({
         type: 'PreviewReady',
         data: {}
     });
@@ -61,7 +61,7 @@ function IframeBridge() {
             isActive.current = false;
             return;
         }
-        postMessage({
+        submitPostMessage({
             type: 'ChildLocationChange',
             data: location
         });

package/lib/components/AppContainer/PageHoc.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { snapdom } from "@zumer/snapdom";
-import { postMessage } from "../../utils/postMessage.js";
+import { submitPostMessage } from "../../utils/postMessage.js";
 function PageHoc(props) {
     const { children } = props;
     useEffect(()=>{
@@ -17,7 +17,7 @@ function PageHoc(props) {
                     backgroundColor: '#ffffff'
                 }).then(async (res)=>{
                     const imgEle = await res.toPng();
-                    postMessage({
+                    submitPostMessage({
                         type: 'PageScreenshot',
                         data: imgEle.src
                     });

package/lib/components/AppContainer/utils/listenHot.js

@@ -1,5 +1,5 @@
 import sockjs_client from "sockjs-client";
-import { postMessage } from "../../../utils/postMessage.js";
+import { submitPostMessage, submitSlardarEvent } from "../../../utils/postMessage.js";
 import { getWsPath } from "../../../utils/utils.js";
 let hotInited = false;
 function handleDevServerMessage(msg) {
@@ -8,14 +8,14 @@ function handleDevServerMessage(msg) {
             hotInited = true;
             return;
         }
-        postMessage({
+        submitPostMessage({
             type: 'HmrMessage',
             msg: {
                 type: 'hot'
             },
             data: null
         });
-    } else if ('errors' === msg.type) postMessage({
+    } else if ('errors' === msg.type) submitPostMessage({
         type: 'HmrMessage',
         msg: {
             type: 'errors',
@@ -25,8 +25,7 @@ function handleDevServerMessage(msg) {
     });
     else if ('hmr-timing' === msg.type) {
         const { duration, fileCount, fileTotalSize } = msg.data;
-        const slardar = window['KSlardarWeb'];
-        if (slardar && 'function' == typeof slardar) slardar('sendEvent', {
+        submitSlardarEvent({
             name: 'runTiming',
             metrics: {
                 duration
@@ -37,20 +36,19 @@ function handleDevServerMessage(msg) {
                 fileTotalSize
             }
         });
-        else console.warn('hmr listen function not found');
     }
 }
 function connectDevServer() {
     const sockUrl = getWsPath();
     const sock = new sockjs_client(sockUrl);
-    sock.onopen = ()=>console.log("✅ connect DevServer SockJS");
+    sock.onopen = ()=>console.log('✅ connect DevServer SockJS');
     sock.onmessage = (event)=>{
         try {
             const msg = JSON.parse(event.data);
-            console.log("hmr 消息:", msg);
+            console.log('hmr 消息:', msg);
             handleDevServerMessage(msg);
         } catch (err) {
-            console.error("解析 hmr 消息失败:", event.data);
+            console.error('解析 hmr 消息失败:', event.data);
         }
     };
     return sock;

package/lib/logger/intercept-global-error.js

@@ -1,5 +1,64 @@
+import { submitPostMessage, submitSlardarEvent } from "../utils/postMessage.js";
 import { levelSchema } from "./log-types.js";
 import { logger } from "./logger.js";
+let devServerDisconnectInfo = null;
+let retryCount = 0;
+function processDevServerLog(log) {
+    if (!log) return;
+    if (log.includes('webpack-dev-server') && log.includes('Disconnected')) {
+        const time = Date.now();
+        devServerDisconnectInfo = {
+            time
+        };
+        submitPostMessage({
+            type: 'DevServerMessage',
+            data: {
+                type: 'devServer-status',
+                status: 'disconnected'
+            }
+        });
+        submitSlardarEvent({
+            name: 'sandbox-devServer',
+            categories: {
+                type: 'disconnected',
+                time
+            }
+        });
+        return;
+    }
+    if (!devServerDisconnectInfo) return;
+    if (log.includes('webpack-dev-server') && log.includes('Trying to reconnect')) {
+        if (retryCount) submitSlardarEvent({
+            name: 'sandbox-devServer',
+            categories: {
+                type: 'reconnect-failed',
+                retryCount: retryCount + 1
+            }
+        });
+        retryCount++;
+        return;
+    }
+    if (log.includes('HMR') || log.includes('App updated') || log.includes('App hot update')) {
+        submitPostMessage({
+            type: 'DevServerMessage',
+            data: {
+                type: 'devServer-status',
+                status: 'connected'
+            }
+        });
+        const startTime = devServerDisconnectInfo.time;
+        const duration = Date.now() - startTime;
+        devServerDisconnectInfo = null;
+        submitSlardarEvent({
+            name: 'sandbox-devServer',
+            categories: {
+                type: 'devServer-reconnected',
+                startTime,
+                duration
+            }
+        });
+    }
+}
 function interceptErrors() {
     window.addEventListener('error', (event)=>{
         logger.error(event.error);
@@ -19,12 +78,13 @@ function interceptErrors() {
             originalMethod(...args);
             const level = 'log' === method ? 'info' : method;
             const log = args[0];
+            if ('string' == typeof log) processDevServerLog(log);
             if ('string' == typeof log && log.startsWith('[Dataloom]') && levelSchema.safeParse(level).success) {
                 logger.log({
                     level: level,
                     args
                 });
-                postMessage({
+                submitPostMessage({
                     type: 'Console',
                     method,
                     data: args

package/lib/types/iframe-events.d.ts

@@ -38,7 +38,14 @@ export interface HmrMessage extends IframeMessage<Record<string, never>> {
         data?: any;
     };
 }
-export type OutgoingMessage = PreviewReadyMessage | HmrMessage | ConsoleMessage | ChildLocationChangeMessage | CreatePageMessage | RenderErrorMessage | RenderErrorRepairMessage | PageScreenshotMessage | UpdateRoutesMessage;
+/** devServer相关消息 */
+export interface DevServerMessage extends IframeMessage<{
+    type: 'devServer-status';
+    status: 'connected' | 'disconnected';
+}> {
+    type: 'DevServerMessage';
+}
+export type OutgoingMessage = PreviewReadyMessage | HmrMessage | ConsoleMessage | ChildLocationChangeMessage | CreatePageMessage | RenderErrorMessage | RenderErrorRepairMessage | PageScreenshotMessage | DevServerMessage | UpdateRoutesMessage;
 export interface GetRoutesMessage extends IframeMessage<Record<string, never>> {
     type: 'GetRoutes';
 }

package/lib/utils/postMessage.d.ts

@@ -1,5 +1,6 @@
 import type { IncomingMessage, OutgoingMessage } from '../types/iframe-events';
-export declare function postMessage<T extends OutgoingMessage>(message: T, targetOrigin?: string): void;
+export declare function submitPostMessage<T extends OutgoingMessage>(message: T, targetOrigin?: string): void;
+export declare function submitSlardarEvent(event: any): void;
 export declare function isOutgoingMessage<T extends OutgoingMessage['type']>(msg: OutgoingMessage, type: T): msg is Extract<OutgoingMessage, {
     type: T;
 }>;

package/lib/utils/postMessage.js

@@ -1,15 +1,20 @@
 import { getPreviewParentOrigin } from "./getParentOrigin.js";
-function postMessage(message, targetOrigin) {
+function submitPostMessage(message, targetOrigin) {
     try {
         window.parent.postMessage(message, targetOrigin ?? getPreviewParentOrigin());
     } catch (e) {
         console.error('postMessage error', e);
     }
 }
+function submitSlardarEvent(event) {
+    const slardar = window['KSlardarWeb'];
+    if (slardar && 'function' == typeof slardar) slardar('sendEvent', event);
+    else console.warn('hmr listen function not found');
+}
 function isOutgoingMessage(msg, type) {
     return msg.type === type;
 }
 function isIncomingMessage(msg, type) {
     return msg.type === type;
 }
-export { isIncomingMessage, isOutgoingMessage, postMessage };
+export { isIncomingMessage, isOutgoingMessage, submitPostMessage, submitSlardarEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.14",
+  "version": "1.1.15-alpha.dev.1",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [