@xh/hoist 73.0.0-SNAPSHOT.1746826691467 → 73.0.0-SNAPSHOT.1746829743606

package/CHANGELOG.md

@@ -36,6 +36,9 @@
 * 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
 
@@ -55,7 +58,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/mobx/overrides.d.ts

@@ -6,4 +6,4 @@ export declare function makeObservable(target: any, annotations?: AnnotationsMap
 /**
  * An enhanced version of the native mobx isObservableProp
  */
-export declare function isObservableProp(target: any, propertyKey: PropertyKey): any;
+export declare function isObservableProp(target: any, propertyKey: PropertyKey): boolean;

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,6 +4,8 @@
  *
  * 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 './';
 
@@ -71,38 +73,38 @@ function createPersistDescriptor(
         );
         return descriptor;
     }
-    const codeValue = descriptor.initializer;
-    let hasInitialized = false,
-        ret;
-    const initializer = function () {
-        // Initializer can be called multiple times when stacking decorators.
-        if (hasInitialized) return ret;
+    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);
 
-        // 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;
+            // 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;
+                        }
                     }
                 }
-            }
-        });
+            });
 
-        hasInitialized = true;
-        return ret;
-    };
+            // Wait for next tick to ensure construction has completed and property has been made
+            // observable via makeObservable.
+            wait().thenAction(() => propertyAvailable.set(true));
+
+            return ret;
+        };
     return {...descriptor, initializer};
 }

package/mobx/decorators.ts

@@ -5,8 +5,6 @@
  * 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
@@ -40,40 +38,14 @@ function createBindable(target, name, descriptor, isRef) {
         Object.defineProperty(target, setterName, {value});
     }
 
-    // 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.)
+    // 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)
     const key = '_xhBindableProperties';
     if (!target.hasOwnProperty(key)) {
         target[key] = {...target[key]};
     }
-    target[key][name] = descriptor;
+    target[key][name] = {isRef};
 
-    // 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.)
+    // 3) Return original descriptor.
     return descriptor;
 }

package/mobx/overrides.ts

@@ -9,7 +9,9 @@ import {
     AnnotationsMap,
     CreateObservableOptions,
     makeObservable as baseMakeObservable,
-    isObservableProp as baseIsObservableProp
+    isObservableProp as baseIsObservableProp,
+    observable,
+    runInAction
 } from 'mobx';
 
 /**
@@ -21,10 +23,21 @@ 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, (descriptor, name) => {
-        Object.defineProperty(target, name, descriptor);
+    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
+        });
     });
 
     return baseMakeObservable(target, annotations, options);
@@ -33,8 +46,8 @@ export function makeObservable(
 /**
  * An enhanced version of the native mobx isObservableProp
  */
-export function isObservableProp(target: any, propertyKey: PropertyKey) {
+export function isObservableProp(target: any, propertyKey: PropertyKey): boolean {
     return (
-        baseIsObservableProp(target, propertyKey) || target?._xhBindableProperties?.[propertyKey]
+        baseIsObservableProp(target, propertyKey) || !!target?._xhBindableProperties?.[propertyKey]
     );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1746826691467",
+  "version": "73.0.0-SNAPSHOT.1746829743606",
   "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;
     };