@xh/hoist 73.0.0-SNAPSHOT.1744386127895 → 73.0.0-SNAPSHOT.1744587436966

package/CHANGELOG.md

@@ -8,6 +8,7 @@
   connected clients.
 * Enabled telemetry reporting from `WebSocketService`.
 * Updated `MenuItem.actionFn()` to receive the click event as an additional argument.
+* Support for reporting App Build, TabID and Client ID in websocket admin page
 
 ## v72.4.0 - 2025-04-09
 

package/admin/tabs/cluster/instances/websocket/WebSocketColumns.ts

@@ -73,11 +73,33 @@ export const lastReceivedTime: ColumnSpec = {
     width: 140
 };
 
-export const clientAppVersion: ColumnSpec = {
+export const appVersion: ColumnSpec = {
     field: {
-        name: 'clientAppVersion',
+        name: 'appVersion',
         type: 'string',
         displayName: 'Client Version'
     },
     width: 120
 };
+
+export const appBuild: ColumnSpec = {
+    field: {
+        name: 'appBuild',
+        type: 'string'
+    },
+    width: 120
+};
+export const loadId: ColumnSpec = {
+    field: {
+        name: 'loadId',
+        type: 'string'
+    },
+    width: 120
+};
+export const tabId: ColumnSpec = {
+    field: {
+        name: 'tabId',
+        type: 'string'
+    },
+    width: 120
+};

package/admin/tabs/cluster/instances/websocket/WebSocketModel.ts

@@ -92,7 +92,10 @@ export class WebSocketModel extends BaseInstanceModel {
                 WSCol.lastSentTime,
                 WSCol.receivedMessageCount,
                 WSCol.lastReceivedTime,
-                WSCol.clientAppVersion
+                WSCol.appVersion,
+                WSCol.appBuild,
+                WSCol.loadId,
+                WSCol.tabId
             ]
         });
 

package/appcontainer/AppStateModel.ts

@@ -92,14 +92,14 @@ export class AppStateModel extends HoistModel {
                     timestamp: loadStarted,
                     elapsed: Date.now() - loadStarted - (timings.LOGIN_REQUIRED ?? 0),
                     data: {
-                        clientId: XH.clientId,
-                        sessionId: XH.sessionId,
+                        loadId: XH.loadId,
+                        tabId: XH.tabId,
                         timings: mapKeys(timings, (v, k) => camelCase(k)),
                         clientHealth: XH.clientHealthService.getReport(),
                         window: this.getWindowData(),
                         screen: this.getScreenData()
                     },
-                    logData: ['clientId', 'sessionId'],
+                    logData: ['loadId', 'tabId'],
                     omit: !XH.appSpec.trackAppLoad
                 })
         });

package/build/types/admin/tabs/cluster/instances/websocket/WebSocketColumns.d.ts

@@ -6,4 +6,7 @@ export declare const sentMessageCount: ColumnSpec;
 export declare const lastSentTime: ColumnSpec;
 export declare const receivedMessageCount: ColumnSpec;
 export declare const lastReceivedTime: ColumnSpec;
-export declare const clientAppVersion: ColumnSpec;
+export declare const appVersion: ColumnSpec;
+export declare const appBuild: ColumnSpec;
+export declare const loadId: ColumnSpec;
+export declare const tabId: ColumnSpec;

package/build/types/core/XH.d.ts

@@ -22,12 +22,12 @@ export declare const MIN_HOIST_CORE_VERSION = "28.0";
  */
 export declare class XHApi {
     /** Unique id for this loaded instance of the app.  Unique for every refresh of document. */
-    clientId: string;
+    loadId: string;
     /**
      * Unique id for this browser tab/window on this domain.
      * Corresponds to the scope of the built-in sessionStorage object.
      */
-    sessionId: string;
+    tabId: string;
     /** Core implementation model hosting all application state. */
     appContainerModel: AppContainerModel;
     /** Provider of centralized exception handling for the app. */
@@ -412,8 +412,8 @@ export declare class XHApi {
      */
     genId(): string;
     private get acm();
-    private genClientId;
-    private genSessionId;
+    private genLoadId;
+    private genTabId;
 }
 /** The app-wide singleton instance. */
 export declare const XH: XHApi;

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

@@ -28,6 +28,7 @@ export declare class WebSocketService extends HoistService {
     readonly REG_SUCCESS_TOPIC = "xhRegistrationSuccess";
     readonly FORCE_APP_SUSPEND_TOPIC = "xhForceAppSuspend";
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = "xhRequestClientHealthReport";
+    readonly METADATA_FOR_HANDSHAKE: string[];
     /** True if WebSockets generally enabled - set statically in code via {@link AppSpec}. */
     enabled: boolean;
     /** Unique channel assigned by server upon successful connection. */

package/core/XH.ts

@@ -87,13 +87,13 @@ declare const xhIsDevelopmentMode: boolean;
  */
 export class XHApi {
     /** Unique id for this loaded instance of the app.  Unique for every refresh of document. */
-    clientId: string = this.genClientId();
+    loadId: string = this.genLoadId();
 
     /**
      * Unique id for this browser tab/window on this domain.
      * Corresponds to the scope of the built-in sessionStorage object.
      */
-    sessionId: string = this.genSessionId();
+    tabId: string = this.genTabId();
 
     //--------------------------
     // Implementation Delegates
@@ -807,15 +807,15 @@ export class XHApi {
         return this.appContainerModel;
     }
 
-    private genClientId(): string {
+    private genLoadId(): string {
         return new ShortUniqueId({length: 8}).rnd();
     }
 
-    private genSessionId(): string {
-        let ret = window.sessionStorage?.getItem('xhSessionId');
+    private genTabId(): string {
+        let ret = window.sessionStorage?.getItem('xhTabId');
         if (!ret) {
             ret = new ShortUniqueId({length: 8}).rnd();
-            window.sessionStorage?.setItem('xhSessionId', ret);
+            window.sessionStorage?.setItem('xhTabId', ret);
         }
         return ret;
     }

package/package.json

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

package/svc/ClientHealthService.ts

@@ -142,8 +142,8 @@ export class ClientHealthService extends HoistService {
             ...rest,
             ...opts,
             data: {
-                clientId: XH.clientId,
-                sessionId: XH.sessionId,
+                loadId: XH.loadId,
+                tabId: XH.tabId,
                 ...this.getReport()
             }
         });

package/svc/WebSocketService.ts

@@ -42,6 +42,7 @@ export class WebSocketService extends HoistService {
     readonly REG_SUCCESS_TOPIC = 'xhRegistrationSuccess';
     readonly FORCE_APP_SUSPEND_TOPIC = 'xhForceAppSuspend';
     readonly REQ_CLIENT_HEALTH_RPT_TOPIC = 'xhRequestClientHealthReport';
+    readonly METADATA_FOR_HANDSHAKE = ['appVersion', 'appBuild', 'loadId', 'tabId'];
 
     /** True if WebSockets generally enabled - set statically in code via {@link AppSpec}. */
     enabled: boolean = XH.appSpec.webSocketsEnabled;
@@ -304,7 +305,7 @@ export class WebSocketService extends HoistService {
 
     private buildWebSocketUrl() {
         const protocol = window.location.protocol == 'https:' ? 'wss:' : 'ws:',
-            endpoint = 'xhWebSocket?clientAppVersion=' + XH.appVersion;
+            endpoint = `xhWebSocket?${this.METADATA_FOR_HANDSHAKE.map(key => `${key}=${XH[key]}`).join('&')}`;
         return XH.isDevelopmentMode
             ? `${protocol}//${XH.baseUrl.split('//')[1]}${endpoint}`
             : `${protocol}//${window.location.host}${XH.baseUrl}${endpoint}`;