@xh/hoist 73.0.0-SNAPSHOT.1746826299049 → 73.0.0-SNAPSHOT.1746826954718

package/CHANGELOG.md

@@ -36,9 +36,6 @@
 * Fixed drag-and-drop usability issues with the mobile `ColChooser`.
 * Made `GridModel.defaultGroupSortFn` null-safe and improved type signature.
 * Disable `dashCanvasAddViewButton` if there are no `menuItems` to show.
-* Improvements to `@bindable` and `@persist` to handle lifecycle-related bugs. Note that previously
-  `@bindable` would work even if `makeObservable()` was not called, but this is no longer the case.
-  Please ensure that `makeObservable()` is called in your model's constructor when using `@bindable`.
 
 ### ⚙️ Typescript API Adjustments
 
@@ -58,7 +55,10 @@
     * ⚠️ NOTE that a misconfigured build - where the client version is not set to the same value
       as the server - would result in a false positive for an upgrade. The two should always match.
 * Calls to `Promise.track()` that are rejected with an exception will be tracked with new
-  severity level of `TrackSeverity.ERROR`
+  severity level of `TrackSeverity.ERROR`.
+* Improved client `WebSocketService` heartbeat to check that it has been receiving inbound messages
+  from the server, not just successfully sending outbound heartbeats.
+* Improved client `WebSocketService` to throttle its reconnect attempts.
 
 ## v72.5.1 - 2025-04-15
 

package/build/types/svc/WebSocketService.d.ts

@@ -25,6 +25,12 @@ import { HoistService, PlainObject } from '@xh/hoist/core';
 export declare class WebSocketService extends HoistService {
     static instance: WebSocketService;
     readonly HEARTBEAT_TOPIC = "xhHeartbeat";
+    /** Check connection and send a new heartbeat (which should be promptly ack'd) every 10s. */
+    readonly HEARTBEAT_INTERVAL: number;
+    /**  If no heartbeat ack (or other msg) received for past 30s, assume we are disconnected. */
+    readonly HEARTBEAT_ACK_TIMEOUT: number;
+    /** Wait a well-defined interval before trying to reconnect again. */
+    readonly HEARTBEAT_RECONNECT_INTERVAL: number;
     readonly REG_SUCCESS_TOPIC = "xhRegistrationSuccess";
     readonly FORCE_APP_SUSPEND_TOPIC = "xhForceAppSuspend";
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = "xhRequestClientHealthReport";
@@ -43,6 +49,7 @@ export declare class WebSocketService extends HoistService {
     private _timer;
     private _socket;
     private _subsByTopic;
+    private _lastHeartbeatReconnectAttempt;
     constructor();
     initAsync(): Promise<void>;
     /**
@@ -57,7 +64,6 @@ export declare class WebSocketService extends HoistService {
     subscribe(topic: string, fn: (msg: WebSocketMessage) => any): WebSocketSubscription;
     /**
      * Cancel a subscription for a given topic/handler.
-     *
      * @param subscription - WebSocketSubscription returned when the subscription was established.
      */
     unsubscribe(subscription: WebSocketSubscription): void;
@@ -109,6 +115,9 @@ export interface WebSocketTelemetry {
         connError?: WebSocketEventTelemetry;
         msgReceived?: WebSocketEventTelemetry;
         msgSent?: WebSocketEventTelemetry;
+        heartbeatReceived?: WebSocketEventTelemetry;
+        heartbeatSent?: WebSocketEventTelemetry;
+        heartbeatFailed?: WebSocketEventTelemetry;
         heartbeatReconnectAttempt?: WebSocketEventTelemetry;
         instanceChangeReconnectAttempt?: WebSocketEventTelemetry;
     };

package/core/HoistBaseDecorators.ts

@@ -4,8 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {wait} from '@xh/hoist/promise';
-import {observable} from 'mobx';
 import {logError, throwIf} from '../utils/js';
 import {HoistBaseClass, PersistableState, PersistenceProvider, PersistOptions} from './';
 
@@ -73,38 +71,38 @@ function createPersistDescriptor(
         );
         return descriptor;
     }
-    const codeValue = descriptor.initializer,
-        initializer = function () {
-            // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
-            let ret = codeValue?.call(this);
+    const codeValue = descriptor.initializer;
+    let hasInitialized = false,
+        ret;
+    const initializer = function () {
+        // Initializer can be called multiple times when stacking decorators.
+        if (hasInitialized) return ret;
 
-            // Property is not available on the instance until after the next tick.
-            const propertyAvailable = observable.box(false),
-                persistOptions = {
-                    path: property,
-                    ...PersistenceProvider.mergePersistOptions(this.persistWith, options)
-                };
-            PersistenceProvider.create({
-                persistOptions,
-                owner: this,
-                target: {
-                    getPersistableState: () =>
-                        new PersistableState(propertyAvailable.get() ? this[property] : ret),
-                    setPersistableState: state => {
-                        if (!propertyAvailable.get()) {
-                            ret = state.value;
-                        } else {
-                            this[property] = state.value;
-                        }
+        // codeValue undefined if no initial in-code value provided, otherwise call to get initial value.
+        ret = codeValue?.call(this);
+
+        const persistOptions = {
+            path: property,
+            ...PersistenceProvider.mergePersistOptions(this.persistWith, options)
+        };
+        PersistenceProvider.create({
+            persistOptions,
+            owner: this,
+            target: {
+                getPersistableState: () =>
+                    new PersistableState(hasInitialized ? this[property] : ret),
+                setPersistableState: state => {
+                    if (!hasInitialized) {
+                        ret = state.value;
+                    } else {
+                        this[property] = state.value;
                     }
                 }
-            });
-
-            // Wait for next tick to ensure construction has completed and property has been made
-            // observable via makeObservable.
-            wait().thenAction(() => propertyAvailable.set(true));
+            }
+        });
 
-            return ret;
-        };
+        hasInitialized = true;
+        return ret;
+    };
     return {...descriptor, initializer};
 }

package/mobx/decorators.ts

@@ -5,6 +5,8 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {upperFirst} from 'lodash';
+import {observable, runInAction} from 'mobx';
+import {getOrCreate} from '../utils/js';
 
 /**
  * Decorator to mark a property as observable and also provide a simple MobX action of the
@@ -38,14 +40,40 @@ function createBindable(target, name, descriptor, isRef) {
         Object.defineProperty(target, setterName, {value});
     }
 
-    // 2) Record on class, so we can later create on *instance* in makeObservable.
-    // (Be sure to create cloned list since this will exist on prototype superclasses of this class)
+    // 2) Place a hidden getter on prototype that wraps the backing observable.
+    const {initializer} = descriptor,
+        propName = `_${name}_bindable`,
+        valName = `_${name}_bindable_value`;
+    Object.defineProperty(target, propName, {
+        get() {
+            return getOrCreate(this, valName, () => {
+                const initVal = initializer?.call(this);
+                return isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
+            });
+        }
+    });
+
+    // 3) Create the descriptor for a getter/setter pair..
+    descriptor = {
+        get() {
+            return this[propName].get();
+        },
+        set(v) {
+            runInAction(() => this[propName].set(v));
+        },
+        enumerable: true,
+        configurable: true
+    };
+
+    // 4) Record on class, so we can later create on *instance* in makeObservable.
+    // (Be sure to create cloned list for *this* particular class.)
     const key = '_xhBindableProperties';
     if (!target.hasOwnProperty(key)) {
         target[key] = {...target[key]};
     }
-    target[key][name] = isRef;
+    target[key][name] = descriptor;
 
-    // 3) Return original descriptor.
+    // 5) Return the get/set to be placed on prototype.  (If makeObservable() never called, or called
+    // late, the non-enumerable property will still be available.)
     return descriptor;
 }

package/mobx/overrides.ts

@@ -9,9 +9,7 @@ import {
     AnnotationsMap,
     CreateObservableOptions,
     makeObservable as baseMakeObservable,
-    isObservableProp as baseIsObservableProp,
-    observable,
-    runInAction
+    isObservableProp as baseIsObservableProp
 } from 'mobx';
 
 /**
@@ -23,21 +21,10 @@ export function makeObservable(
     options?: CreateObservableOptions
 ) {
     // Finish creating 'bindable' properties for this instance.
+    // Do here to ensure it's enumerable on *instance*
     const bindables = target._xhBindableProperties;
-    forEach(bindables, (isRef, name) => {
-        const propName = `_${name}_bindable`,
-            initVal = target[name];
-        target[propName] = isRef ? observable.box(initVal, {deep: false}) : observable.box(initVal);
-        Object.defineProperty(target, name, {
-            get() {
-                return this[propName].get();
-            },
-            set(v) {
-                runInAction(() => this[propName].set(v));
-            },
-            enumerable: true,
-            configurable: true
-        });
+    forEach(bindables, (descriptor, name) => {
+        Object.defineProperty(target, name, descriptor);
     });
 
     return baseMakeObservable(target, annotations, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746826299049",
+  "version": "73.0.0-SNAPSHOT.1746826954718",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/svc/WebSocketService.ts

@@ -8,7 +8,7 @@ import {HoistService, PlainObject, XH} from '@xh/hoist/core';
 import {withFormattedTimestamps} from '@xh/hoist/format';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
-import {SECONDS} from '@xh/hoist/utils/datetime';
+import {olderThan, SECONDS} from '@xh/hoist/utils/datetime';
 import {throwIf} from '@xh/hoist/utils/js';
 import {find, pull} from 'lodash';
 
@@ -39,6 +39,13 @@ export class WebSocketService extends HoistService {
     static instance: WebSocketService;
 
     readonly HEARTBEAT_TOPIC = 'xhHeartbeat';
+    /** Check connection and send a new heartbeat (which should be promptly ack'd) every 10s. */
+    readonly HEARTBEAT_INTERVAL = 10 * SECONDS;
+    /**  If no heartbeat ack (or other msg) received for past 30s, assume we are disconnected. */
+    readonly HEARTBEAT_ACK_TIMEOUT = 30 * SECONDS;
+    /** Wait a well-defined interval before trying to reconnect again. */
+    readonly HEARTBEAT_RECONNECT_INTERVAL = 30 * SECONDS;
+
     readonly REG_SUCCESS_TOPIC = 'xhRegistrationSuccess';
     readonly FORCE_APP_SUSPEND_TOPIC = 'xhForceAppSuspend';
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = 'xhRequestClientHealthReport';
@@ -66,6 +73,7 @@ export class WebSocketService extends HoistService {
     private _timer: Timer;
     private _socket: WebSocket;
     private _subsByTopic: Record<string, WebSocketSubscription[]> = {};
+    private _lastHeartbeatReconnectAttempt: Date = null;
 
     constructor() {
         super();
@@ -93,7 +101,7 @@ export class WebSocketService extends HoistService {
 
         this._timer = Timer.create({
             runFn: () => this.heartbeatOrReconnect(),
-            interval: 10 * SECONDS,
+            interval: this.HEARTBEAT_INTERVAL,
             delay: true
         });
     }
@@ -122,7 +130,6 @@ export class WebSocketService extends HoistService {
 
     /**
      * Cancel a subscription for a given topic/handler.
-     *
      * @param subscription - WebSocketSubscription returned when the subscription was established.
      */
     unsubscribe(subscription: WebSocketSubscription) {
@@ -192,9 +199,29 @@ export class WebSocketService extends HoistService {
 
     private heartbeatOrReconnect() {
         this.updateConnectedStatus();
+
+        // 1) Detect 'stale' connection.  For some reason, not receiving heartbeat.
+        // We have a channel key, so we successfully registered with the server and have not
+        // received a disconnect message. We should be receiving at least heartbeat messages,
+        // but have observed cases where "something" interrupted connectivity in a surprising
+        // way and no new inbound messages were arriving, even with the socket reporting open
+        // and accepting outbound messages to send. Detect that case here.
+        if (this.connected && olderThan(this.lastMessageTime, this.HEARTBEAT_ACK_TIMEOUT)) {
+            this.logWarn('Heartbeat response failing - disconnecting');
+            this.noteTelemetryEvent('heartbeatFailed');
+            this.disconnect();
+        }
+
+        // 2) Happy path - connected+receiving. Send a new heartbeat for server to ack.
         if (this.connected) {
             this.sendMessage({topic: this.HEARTBEAT_TOPIC, data: 'ping'});
-        } else {
+            this.noteTelemetryEvent('heartbeatSent');
+            return;
+        }
+
+        // 3) Unhappy path -- attempt a (throttled) reconnect.
+        if (!olderThan(this._lastHeartbeatReconnectAttempt, this.HEARTBEAT_RECONNECT_INTERVAL)) {
+            this._lastHeartbeatReconnectAttempt = new Date();
             this.logWarn('Heartbeat found websocket not connected - attempting to reconnect...');
             this.noteTelemetryEvent('heartbeatReconnectAttempt');
             this.disconnect();
@@ -252,6 +279,9 @@ export class WebSocketService extends HoistService {
                 case this.REQ_CLIENT_HEALTH_RPT_TOPIC:
                     XH.clientHealthService.sendReportAsync();
                     break;
+                case this.HEARTBEAT_TOPIC:
+                    this.noteTelemetryEvent('heartbeatReceived');
+                    break;
             }
 
             this.notifySubscribers(msg);
@@ -361,6 +391,9 @@ export interface WebSocketTelemetry {
         connError?: WebSocketEventTelemetry;
         msgReceived?: WebSocketEventTelemetry;
         msgSent?: WebSocketEventTelemetry;
+        heartbeatReceived?: WebSocketEventTelemetry;
+        heartbeatSent?: WebSocketEventTelemetry;
+        heartbeatFailed?: WebSocketEventTelemetry;
         heartbeatReconnectAttempt?: WebSocketEventTelemetry;
         instanceChangeReconnectAttempt?: WebSocketEventTelemetry;
     };