@netless/window-manager 1.0.19 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",

package/src/App/AppBoxSizeSynchronizer.ts

@@ -1,4 +1,5 @@
 import type { View } from "white-web-sdk";
+import { BOX_SIZE_SETTLE_DELAY } from "../constants";
 
 export type AppBoxSize = { width: number; height: number };
 export type AppBoxSizeChange = AppBoxSize & { appId: string };
@@ -15,7 +16,6 @@ type ViewWithRefreshSize = View & {
 };
 
 const BOX_SIZE_EPSILON = 0.5;
-const BOX_SIZE_SETTLE_DELAY = 650;
 const BOX_SIZE_CONFIRM_DELAY = 100;
 
 const sizesEqual = (left: AppBoxSize | undefined, right: AppBoxSize): boolean =>

package/src/App/AppProxy.ts

@@ -36,6 +36,8 @@ import { callbacks } from "../callback";
 import { getExtendClass } from "../Utils/extendClass";
 import { AppBoxSizeSynchronizer } from "./AppBoxSizeSynchronizer";
 
+const APP_SETUP_WATCHDOG_TIMEOUT = 10_000;
+
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
 export class AppProxy implements PageRemoveService {
@@ -58,6 +60,7 @@ export class AppProxy implements PageRemoveService {
     private _pageState: AppPageStateImpl;
     private _prevFullPath: string | undefined;
     private boxSizeSynchronizer: AppBoxSizeSynchronizer;
+    private setupWatchdogTimer?: ReturnType<typeof setTimeout>;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
@@ -246,7 +249,9 @@ export class AppProxy implements PageRemoveService {
                         this.Logger.info(
                             `[WindowManager]: setup app ${this.kind}, appId: ${appId}`
                         );
-                    const result = await app.setup(context);
+                    const setupResult = await this.runAppSetup(appId, app, context);
+                    if (!setupResult.succeeded) return;
+                    const { result } = setupResult;
                     this.appResult = result;
                     this.scheduleBoxSizeSync();
                     appRegister.notifyApp(this.kind, "created", { appId, result });
@@ -286,6 +291,39 @@ export class AppProxy implements PageRemoveService {
         }
     }
 
+    private async runAppSetup(
+        appId: string,
+        app: NetlessApp,
+        context: AppContext<any, any>
+    ): Promise<{ succeeded: true; result: any } | { succeeded: false }> {
+        this.clearSetupWatchdog();
+        this.setupWatchdogTimer = setTimeout(() => {
+            this.setupWatchdogTimer = undefined;
+            if (this.status === "destroyed") return;
+            this.Logger?.warn(
+                `[WindowManager]: hydrate timeout, stage: app setup, kind: ${this.kind}, appId: ${appId}, timeout: ${APP_SETUP_WATCHDOG_TIMEOUT}ms`
+            );
+        }, APP_SETUP_WATCHDOG_TIMEOUT);
+        try {
+            return { succeeded: true, result: await app.setup(context) };
+        } catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            this.Logger?.error(
+                `[WindowManager]: app setup error, kind: ${this.kind}, appId: ${appId}, status: ${this.status}, error: ${message}`
+            );
+            return { succeeded: false };
+        } finally {
+            this.clearSetupWatchdog();
+        }
+    }
+
+    private clearSetupWatchdog(): void {
+        if (this.setupWatchdogTimer != null) {
+            clearTimeout(this.setupWatchdogTimer);
+            this.setupWatchdogTimer = undefined;
+        }
+    }
+
     // 兼容移动端创建时会出现 PPT 不适配的问题
     private fixMobileSize() {
         const box = this.boxManager?.getBox(this.id);
@@ -564,6 +602,7 @@ export class AppProxy implements PageRemoveService {
     ) {
         if (this.status === "destroyed") return;
         this.status = "destroyed";
+        this.clearSetupWatchdog();
         this.boxSizeSynchronizer.destroy();
         try {
             await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });

package/src/ContainerResizeObserver.ts

@@ -2,25 +2,58 @@ import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observe
 import { WindowManager } from "./index";
 import type { EmitterType } from "./InternalEmitter";
 import type { UnsubscribeFn } from "emittery";
-import { LocalConsole } from "./Utils/log";
+import type { Logger } from "white-web-sdk";
+import { CONTAINER_STATE_LOG_DEBOUNCE } from "./constants";
+import { ArgusLog, LocalConsole } from "./Utils/log";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
+export type ContainerInternalState = {
+    mainViewElement?: HTMLElement;
+    mainViewSize?: Pick<DOMRectReadOnly, "width" | "height">;
+    teleBoxContainerRect?: Pick<DOMRectReadOnly, "width" | "height">;
+    mainViewDidRelease?: boolean;
+    containerSizeRatio?: number;
+};
+
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
     private disposer?: UnsubscribeFn;
 
     private updateSizerLocalConsole = new LocalConsole("updateSizer", 100);
+    private containerStateArgusLog?: ArgusLog;
+    private containerStateLogTimer?: ReturnType<typeof setTimeout>;
+    private pendingContainerState?: {
+        origin?: string;
+        observedSize?: Pick<DOMRectReadOnly, "width" | "height">;
+    };
+    private container?: HTMLElement;
+    private sizer?: HTMLElement;
+    private wrapper?: HTMLDivElement;
 
-    constructor(private emitter: EmitterType) {}
+    constructor(
+        private emitter: EmitterType,
+        logger?: Logger,
+        private getInternalState?: () => ContainerInternalState
+    ) {
+        if (logger) {
+            this.containerStateArgusLog = new ArgusLog(logger, "containerState");
+        }
+    }
 
     public static create(
         container: HTMLElement,
         sizer: HTMLElement,
         wrapper: HTMLDivElement,
-        emitter: EmitterType
+        emitter: EmitterType,
+        logger?: Logger,
+        getInternalState?: () => ContainerInternalState
     ) {
-        const containerResizeObserver = new ContainerResizeObserver(emitter);
+        const containerResizeObserver = new ContainerResizeObserver(
+            emitter,
+            logger,
+            getInternalState
+        );
         containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
         return containerResizeObserver;
     }
@@ -30,6 +63,9 @@ export class ContainerResizeObserver {
         sizer: HTMLElement,
         wrapper: HTMLDivElement
     ) {
+        this.container = container;
+        this.sizer = sizer;
+        this.wrapper = wrapper;
         this.updateSizer(
             container.getBoundingClientRect(),
             sizer,
@@ -60,6 +96,7 @@ export class ContainerResizeObserver {
         wrapper: HTMLDivElement,
         origin?: string
     ) {
+        const observedSize = { width, height };
         if (width && height) {
             if (height / width > WindowManager.containerSizeRatio) {
                 height = width * WindowManager.containerSizeRatio;
@@ -82,12 +119,105 @@ export class ContainerResizeObserver {
                 origin,
             });
         }
+        this.scheduleContainerStateLog(origin, observedSize);
+    }
+
+    public logCurrentState(origin: string): void {
+        this.scheduleContainerStateLog(origin);
+    }
+
+    private scheduleContainerStateLog(
+        origin?: string,
+        observedSize?: Pick<DOMRectReadOnly, "width" | "height">
+    ): void {
+        if (!this.containerStateArgusLog || !this.container || !this.sizer || !this.wrapper) return;
+
+        this.pendingContainerState = {
+            origin,
+            observedSize: observedSize
+                ? { width: observedSize.width, height: observedSize.height }
+                : undefined,
+        };
+        if (this.containerStateLogTimer != null) {
+            clearTimeout(this.containerStateLogTimer);
+        }
+        this.containerStateLogTimer = setTimeout(
+            this.flushContainerStateLog,
+            CONTAINER_STATE_LOG_DEBOUNCE
+        );
+    }
+
+    private flushContainerStateLog = (): void => {
+        this.containerStateLogTimer = undefined;
+        const pendingState = this.pendingContainerState;
+        this.pendingContainerState = undefined;
+        if (
+            !pendingState ||
+            !this.containerStateArgusLog ||
+            !this.container ||
+            !this.sizer ||
+            !this.wrapper
+        ) {
+            return;
+        }
+
+        const internalState = this.getInternalState?.();
+        const root = this.container.parentElement;
+        const rootRect = root?.getBoundingClientRect();
+        const playgroundRect = this.container.getBoundingClientRect();
+        const sizerRect = this.sizer.getBoundingClientRect();
+        const wrapperRect = this.wrapper.getBoundingClientRect();
+        const mainViewRect = internalState?.mainViewElement?.getBoundingClientRect();
+        const rootStyle = root ? window.getComputedStyle(root) : undefined;
+        this.containerStateArgusLog.log(
+            `origin: ${pendingState.origin || "unknown"}, connected: ${Boolean(
+                root?.isConnected
+            )}, ` +
+                `observed: ${this.formatSize(
+                    pendingState.observedSize || playgroundRect
+                )}, root: ${this.formatSize(rootRect)}, playground: ${this.formatSize(
+                    playgroundRect
+                )}, sizer: ${this.formatSize(sizerRect)}, wrapper: ${this.formatSize(
+                    wrapperRect
+                )}, mainViewDOM: ${this.formatSize(mainViewRect)}, mainViewSize: ${this.formatSize(
+                    internalState?.mainViewSize
+                )}, teleBoxRect: ${this.formatSize(
+                    internalState?.teleBoxContainerRect
+                )}, didRelease: ${internalState?.mainViewDidRelease ?? "unknown"}, ratio: ${
+                    internalState?.containerSizeRatio ?? "unknown"
+                }, display: ${rootStyle?.display || "unknown"}, visibility: ${
+                    rootStyle?.visibility || "unknown"
+                }, clientRects: ${root?.getClientRects().length || 0}, inViewport: ${
+                    rootRect
+                        ? rootRect.bottom > 0 &&
+                          rootRect.right > 0 &&
+                          rootRect.top < window.innerHeight &&
+                          rootRect.left < window.innerWidth
+                        : false
+                }`
+        );
+    };
+
+    private formatSize(rect?: Pick<DOMRectReadOnly, "width" | "height">): string {
+        if (!rect) return "unknown";
+        return `${Math.round(rect.width * 100) / 100}x${Math.round(rect.height * 100) / 100}`;
     }
 
     public disconnect() {
         this.updateSizerLocalConsole.destroy();
+        if (this.containerStateLogTimer != null) {
+            clearTimeout(this.containerStateLogTimer);
+            this.containerStateLogTimer = undefined;
+        }
+        this.pendingContainerState = undefined;
+        this.containerStateArgusLog?.destroy();
+        this.containerStateArgusLog = undefined;
         this.containerResizeObserver?.disconnect();
         this.disposer?.();
         this.disposer = undefined;
+        this.container = undefined;
+        this.sizer = undefined;
+        this.wrapper = undefined;
+        this.getInternalState = undefined;
     }
 }

package/src/constants.ts

@@ -57,3 +57,7 @@ export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
 
 export const SETUP_APP_DELAY = 50;
+
+export const BOX_SIZE_SETTLE_DELAY = 650;
+
+export const CONTAINER_STATE_LOG_DEBOUNCE = 1000;

package/src/index.ts

@@ -528,7 +528,18 @@ export class WindowManager
             playground,
             sizer,
             wrapper,
-            internalEmitter
+            internalEmitter,
+            manager.Logger,
+            () => {
+                const mainView = manager.appManager?.mainViewProxy.view;
+                return {
+                    mainViewElement: mainView?.divElement,
+                    mainViewSize: mainView?.size,
+                    teleBoxContainerRect: manager.boxManager?.teleBoxManager.containerRect,
+                    mainViewDidRelease: Boolean((mainView as any)?.didRelease),
+                    containerSizeRatio: manager.containerSizeRatio,
+                };
+            }
         );
         WindowManager.wrapper = wrapper;
         WindowManager.sizer = sizer;
@@ -577,6 +588,7 @@ export class WindowManager
         this.appManager?.resetMinimized();
         this.appManager?.displayerWritableListener(!this.room.isWritable);
         WindowManager.container = container;
+        this.containerResizeObserver?.logCurrentState("bindContainer");
         this.extendPluginManager?.refreshContainer(container);
     }