@xh/hoist 73.0.0-SNAPSHOT.1746647745931 → 73.0.0-SNAPSHOT.1746740884592

package/CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 TRIVIAL - minor upgrade to Hoist Core)
 
-* Requires `hoist-core >= 30.0` with new APIs to support the consolidated Admin Console "Clients"
+* Requires `hoist-core >= 30.1.0` with new APIs to support the consolidated Admin Console "Clients"
   tab and new properties on `TrackLog`.
 * Apps with a custom `AppModel` for their admin app that extends `@xh/hoist/admin/AppModel` must
   ensure they call `super.initAsync()` within their override of that lifecycle method, if
@@ -25,6 +25,9 @@
       the same tab.
     * Improved charting, with a column chart used for both timeseries and category data and fixes to
       the "skip weekends" option.
+    * Client Error reports and user feedback have also been consolidated into the new tracking
+      system for more integrated and powerful reporting.
+
 * Updated `FormModel` to support `persistWith` for storing and recalling its values, including
   developer options to persist all or a provided subset of fields.
 

package/admin/AppModel.ts

@@ -13,7 +13,7 @@ import {Icon} from '@xh/hoist/icon';
 import {without} from 'lodash';
 import {Route} from 'router5';
 import {activityTrackingPanel} from './tabs/activity/tracking/ActivityTrackingPanel';
-import {clientTab} from './tabs/client/ClientTab';
+import {clientsPanel} from './tabs/clients/ClientsPanel';
 import {generalTab} from './tabs/general/GeneralTab';
 import {monitorTab} from './tabs/monitor/MonitorTab';
 import {userDataTab} from './tabs/userData/UserDataTab';
@@ -75,8 +75,8 @@ export class AppModel extends HoistAppModel {
                 ]
             },
             {
-                name: 'cluster',
-                path: '/cluster',
+                name: 'servers',
+                path: '/servers',
                 children: [
                     {
                         name: 'instances',
@@ -94,11 +94,7 @@ export class AppModel extends HoistAppModel {
             },
             {
                 name: 'clients',
-                path: '/clients',
-                children: [
-                    {name: 'connections', path: '/connections'},
-                    {name: 'errors', path: '/errors'}
-                ]
+                path: '/clients'
             },
             {
                 name: 'monitors',
@@ -129,14 +125,14 @@ export class AppModel extends HoistAppModel {
                 content: generalTab
             },
             {
-                id: 'cluster',
+                id: 'servers',
                 icon: Icon.server(),
                 content: clusterTab
             },
             {
                 id: 'clients',
                 icon: Icon.desktop(),
-                content: clientTab
+                content: clientsPanel
             },
             {
                 id: 'monitors',

package/admin/columns/Tracking.ts

@@ -141,7 +141,7 @@ export const deviceIcon: ColumnSpec = {
             case 'IPAD':
             case 'IPHONE':
             case 'IPOD':
-                return Icon.phone();
+                return Icon.mobile();
             case 'LINUX':
             case 'MAC':
             case 'WINDOWS':
@@ -227,7 +227,8 @@ export const errorMessage: ColumnSpec = {
 export const errorName: ColumnSpec = {
     field: {
         name: 'errorName',
-        type: 'string'
+        type: 'string',
+        isDimension: true
     },
     chooserGroup: 'Errors',
     width: 150,
@@ -237,6 +238,7 @@ export const errorName: ColumnSpec = {
 export const instance: ColumnSpec = {
     field: {
         name: 'instance',
+        displayName: 'Server',
         type: 'string',
         isDimension: true,
         aggregator: 'UNIQUE'
@@ -291,21 +293,22 @@ export const severityIcon: ColumnSpec = {
     resizable: false,
     align: 'center',
     width: 50,
+    cellClass: v => (v ? `xh-admin-activity-cell--${v.toLowerCase()}` : ''),
     renderer: v => getSeverityIcon(v)
 };
 
-export function getSeverityIcon(severity: TrackSeverity): ReactElement {
+function getSeverityIcon(severity: TrackSeverity): ReactElement {
     if (!severity) return null;
 
     switch (severity) {
         case 'DEBUG':
             return Icon.code();
         case 'INFO':
-            return Icon.infoCircle({className: 'xh-text-color-muted'});
+            return Icon.infoCircle();
         case 'WARN':
-            return Icon.warning({intent: 'warning'});
+            return Icon.warning();
         case 'ERROR':
-            return Icon.error({intent: 'danger'});
+            return Icon.error();
         default:
             return Icon.questionCircle();
     }
@@ -376,7 +379,7 @@ export const userAlertedFlag: ColumnSpec = {
 };
 
 export const userMessageFlag: ColumnSpec = {
-    field: {name: 'userMessageFlag', type: 'bool'},
+    field: {name: 'userMessage', type: 'string'},
     headerName: Icon.comment(),
     headerTooltip:
         'Indicates if the user provided a message along with the automated error report.',
@@ -385,10 +388,7 @@ export const userMessageFlag: ColumnSpec = {
     resizable: false,
     align: 'center',
     width: 50,
-    renderer: (v, {record}) => {
-        const {msg} = record.data;
-        return msg ? Icon.comment() : null;
-    }
+    renderer: v => (v ? Icon.comment() : null)
 };
 
 //-----------------------

package/admin/tabs/activity/tracking/ActivityTracking.scss

@@ -97,3 +97,21 @@
     }
   }
 }
+
+.xh-admin-activity-cell {
+  &--debug {
+    color: var(--xh-intent-primary) !important;
+    background-color: var(--xh-intent-primary-trans2);
+  }
+  &--error {
+    color: var(--xh-intent-danger) !important;
+    background-color: var(--xh-intent-danger-trans2);
+  }
+  &--info {
+    color: var(--xh-text-color-muted);
+  }
+  &--warn {
+    color: var(--xh-intent-warning) !important;
+    background-color: var(--xh-intent-warning-trans2);
+  }
+}

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -330,6 +330,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             Col.day.field,
             Col.dayRange.field,
             Col.device.field,
+            Col.errorName.field,
             Col.elapsed.field,
             Col.elapsedMax.field,
             Col.entryCount.field,
@@ -343,6 +344,8 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             Col.userAgent.field,
             Col.username.field,
             Col.url.field,
+            Col.userAlertedFlag.field,
+            Col.userMessageFlag.field,
             ...this.dataFields
         ] as CubeFieldSpec[];
 
@@ -453,6 +456,8 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
                 {...Col.tabId, hidden},
                 {...Col.url, hidden},
                 {...Col.instance, hidden},
+                {...Col.errorName, hidden},
+                {...Col.userAlertedFlag, hidden},
                 ...this.dataFieldCols.map(it => ({...it, hidden: !it.appData.showInAggGrid}))
             ]
         });
@@ -471,12 +476,16 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             raw.elapsedMax = raw.elapsed;
 
             const data = JSON.parse(raw.data);
-            if (isEmpty(data)) return;
-
-            this.dataFields.forEach(df => {
-                const path = df.path;
-                raw[df.name] = get(data, path);
-            });
+            if (!isEmpty(data)) {
+                raw.userMessage = get(data, 'userMessage');
+                raw.userAlerted = get(data, 'userAlerted');
+                raw.errorName = get(data, 'error.name');
+
+                this.dataFields.forEach(df => {
+                    const path = df.path;
+                    raw[df.name] = get(data, path);
+                });
+            }
         } catch (e) {
             this.logError(`Error processing raw track log`, e);
         }

package/admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -170,10 +170,13 @@ export class ActivityDetailModel extends HoistModel {
                 {...Col.entryId, hidden, pinned},
                 {...Col.severityIcon, pinned},
                 {...Col.impersonatingFlag, pinned},
+                {...Col.userAlertedFlag, hidden, pinned},
+                {...Col.userMessageFlag, hidden, pinned},
                 {...Col.username, pinned},
                 {...Col.impersonating, hidden},
                 {...Col.category},
                 {...Col.msg},
+                {...Col.errorName, hidden},
                 {...Col.elapsed},
                 {...Col.deviceIcon},
                 {...Col.browser, hidden},

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -128,6 +128,7 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                           }),
                           formField({
                               field: 'instance',
+                              label: 'Server',
                               readonlyRenderer: badgeRenderer,
                               omit: !formModel.values.instance
                           }),

package/admin/tabs/{client/clients → clients}/ClientsPanel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {clientDetailPanel} from '@xh/hoist/admin/tabs/client/clients/activity/ClientDetailPanel';
+import {clientDetailPanel} from './activity/ClientDetailPanel';
 import {errorMessage} from '@xh/hoist/cmp/error';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, fragment, hframe, p} from '@xh/hoist/cmp/layout';
@@ -30,7 +30,7 @@ export const clientsPanel = hoistCmp.factory<ClientsModel>({
                     placeholder: 'Ungrouped',
                     options: [
                         {value: 'user', label: 'By User'},
-                        {value: 'instance', label: 'By Instance'}
+                        {value: 'instance', label: 'By Server'}
                     ],
                     enableClear: true,
                     enableFilter: false

package/admin/tabs/{client/clients → clients}/activity/ClientDetailModel.ts

@@ -1,10 +1,10 @@
-import {ClientsModel} from '@xh/hoist/admin/tabs/client/clients/ClientsModel';
+import {ClientsModel} from '../ClientsModel';
 import {ColumnSpec} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, lookup, PlainObject, XH} from '@xh/hoist/core';
 import {StoreRecord} from '@xh/hoist/data';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
 import {ReactNode} from 'react';
-import {ActivityDetailProvider} from '../../../activity/tracking/detail/ActivityDetailModel';
+import {ActivityDetailProvider} from '../../activity/tracking/detail/ActivityDetailModel';
 
 export class ClientDetailModel extends HoistModel implements ActivityDetailProvider {
     @lookup(ClientsModel) clientsModel: ClientsModel;

package/admin/tabs/{client/clients → clients}/activity/ClientDetailPanel.ts

@@ -1,6 +1,6 @@
 import {isOpen} from '@xh/hoist/admin/columns';
 import {activityDetailView} from '@xh/hoist/admin/tabs/activity/tracking/detail/ActivityDetailView';
-import {ClientDetailModel} from '@xh/hoist/admin/tabs/client/clients/activity/ClientDetailModel';
+import {ClientDetailModel} from './ClientDetailModel';
 import {h2, hbox, placeholder, vbox} from '@xh/hoist/cmp/layout';
 import {mask} from '@xh/hoist/cmp/mask';
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';

package/admin/tabs/cluster/ClusterTab.ts

@@ -13,7 +13,7 @@ import {Icon} from '@xh/hoist/icon';
 export const clusterTab = hoistCmp.factory(() =>
     tabContainer({
         modelConfig: {
-            route: 'default.cluster',
+            route: 'default.servers',
             switcher: {orientation: 'left', testId: 'cluster-tab-switcher'},
             tabs: [
                 {id: 'instances', icon: Icon.server(), content: instancesTab},

package/admin/tabs/cluster/instances/InstancesTabModel.ts

@@ -192,7 +192,7 @@ export class InstancesTabModel extends HoistModel {
 
     private createTabContainerModel() {
         return new TabContainerModel({
-            route: 'default.cluster.instances',
+            route: 'default.servers.instances',
             switcher: false,
             tabs: [
                 {id: 'logs', icon: Icon.fileText(), content: logViewer},

package/admin/tabs/general/GeneralTab.ts

@@ -5,7 +5,6 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {configPanel} from '@xh/hoist/admin/tabs/general/config/ConfigPanel';
-import {feedbackPanel} from '@xh/hoist/admin/tabs/general/feedback/FeedbackPanel';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {hoistCmp} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
@@ -20,7 +19,6 @@ export const generalTab = hoistCmp.factory(() =>
             tabs: [
                 {id: 'about', icon: Icon.info(), content: aboutPanel},
                 {id: 'config', icon: Icon.settings(), content: configPanel},
-                {id: 'feedback', icon: Icon.comment(), content: feedbackPanel},
                 {id: 'alertBanner', icon: Icon.bullhorn(), content: alertBannerPanel}
             ]
         }

package/appcontainer/FeedbackDialogModel.ts

@@ -48,24 +48,23 @@ export class FeedbackDialogModel extends HoistModel {
     }
 
     /**
-     * Submit the feedback entry. Username, browser info, environment info, and datetime will be
-     * recorded automatically by the server. Feedback entries are viewable via the Admin console,
-     * and feedback submissions can trigger server-side notifications.
-     * See FeedbackService.groovy within hoist-core for details.
+     * Submit the feedback entry to the activity tracking system.
      */
     async submitAsync() {
-        if (!this.message) this.hide();
+        const {message} = this,
+            {trackService} = XH;
+
+        if (!message) this.hide();
 
         try {
-            await XH.fetchJson({
-                url: 'xh/submitFeedback',
-                params: {
-                    msg: this.message,
-                    appVersion: XH.getEnv('appVersion'),
-                    clientUsername: XH.getUsername()
+            trackService.track({
+                category: 'Feedback',
+                message: 'User submitted feedback',
+                data: {
+                    userMessage: this.message
                 }
-            }).linkTo(XH.appLoadModel);
-
+            });
+            trackService.pushPendingAsync().linkTo(XH.appLoadModel);
             XH.successToast('Thank you - your feedback has been sent.');
             this.hide();
         } catch (e) {

package/build/types/admin/columns/Tracking.d.ts

@@ -1,6 +1,5 @@
+/// <reference types="react" />
 import { ColumnSpec } from '@xh/hoist/cmp/grid/columns';
-import { TrackSeverity } from '@xh/hoist/core';
-import { ReactElement } from 'react';
 export declare const appBuild: ColumnSpec;
 export declare const appEnvironment: ColumnSpec;
 export declare const appVersion: ColumnSpec;
@@ -25,7 +24,6 @@ export declare const loadId: ColumnSpec;
 export declare const msg: ColumnSpec;
 export declare const severity: ColumnSpec;
 export declare const severityIcon: ColumnSpec;
-export declare function getSeverityIcon(severity: TrackSeverity): ReactElement;
 export declare const tabId: ColumnSpec;
 export declare const url: ColumnSpec;
 export declare const urlPathOnly: ColumnSpec;

package/build/types/admin/tabs/{client/clients → clients}/activity/ClientDetailModel.d.ts

@@ -1,9 +1,9 @@
-import { ClientsModel } from '@xh/hoist/admin/tabs/client/clients/ClientsModel';
+import { ClientsModel } from '../ClientsModel';
 import { ColumnSpec } from '@xh/hoist/cmp/grid';
 import { HoistModel, LoadSpec, PlainObject } from '@xh/hoist/core';
 import { StoreRecord } from '@xh/hoist/data';
 import { ReactNode } from 'react';
-import { ActivityDetailProvider } from '../../../activity/tracking/detail/ActivityDetailModel';
+import { ActivityDetailProvider } from '../../activity/tracking/detail/ActivityDetailModel';
 export declare class ClientDetailModel extends HoistModel implements ActivityDetailProvider {
     clientsModel: ClientsModel;
     readonly isActivityDetailProvider = true;

package/build/types/admin/tabs/{client/clients → clients}/activity/ClientDetailPanel.d.ts

@@ -1,3 +1,3 @@
-import { ClientDetailModel } from '@xh/hoist/admin/tabs/client/clients/activity/ClientDetailModel';
+import { ClientDetailModel } from './ClientDetailModel';
 import './ClientDetail.scss';
 export declare const clientDetailPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<ClientDetailModel>>;

package/build/types/appcontainer/FeedbackDialogModel.d.ts

@@ -15,10 +15,7 @@ export declare class FeedbackDialogModel extends HoistModel {
     hide(): void;
     setMessage(message: string): void;
     /**
-     * Submit the feedback entry. Username, browser info, environment info, and datetime will be
-     * recorded automatically by the server. Feedback entries are viewable via the Admin console,
-     * and feedback submissions can trigger server-side notifications.
-     * See FeedbackService.groovy within hoist-core for details.
+     * Submit the feedback entry to the activity tracking system.
      */
     submitAsync(): Promise<void>;
 }

package/core/exception/ExceptionHandler.ts

@@ -193,22 +193,21 @@ export class ExceptionHandler {
                 return false;
             }
 
-            await XH.fetchService.postJson({
-                url: 'xh/submitError',
-                body: {
-                    error,
-                    msg: userMessage ? stripTags(userMessage) : '',
-                    appVersion: XH.getEnv('clientVersion'),
-                    url: window.location.href,
-                    userAlerted,
-                    clientUsername: username,
-                    correlationId: exception.correlationId
-                },
-                // Post clientUsername as a parameter to ensure client username matches session.
-                params: {
-                    clientUsername: username
-                }
+            const data: PlainObject = {
+                error: JSON.parse(error),
+                userAlerted
+            };
+            if (userMessage) data.userMessage = stripTags(userMessage);
+
+            XH.track({
+                category: 'Client Error',
+                severity: exception.isRoutine ? 'INFO' : 'ERROR',
+                message: exception.message ?? 'Client Error',
+                correlationId: exception.correlationId,
+                data,
+                logData: ['userAlerted']
             });
+            await XH.trackService.pushPendingAsync();
             return true;
         } catch (e) {
             logError(['Exception while submitting error report to UI server', e], this);

package/package.json

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

package/styles/XH.scss

@@ -96,6 +96,7 @@ body.xh-app {
   .xh-text-color-accent { color: var(--xh-text-color-accent); }
   .xh-text-color-muted { color: var(--xh-text-color-muted); }
   .xh-transparent { color: transparent; }
+  .xh-white { color: var(--xh-white); }
   .xh-yellow { color: var(--xh-yellow); }
   .xh-yellow-light { color: var(--xh-yellow-light); }
 

package/styles/vars.scss

@@ -47,6 +47,7 @@ body {
   --xh-purple: var(--purple, #{mc('purple', '800')});
   --xh-red: var(--red, #{mc('red', '900')});
   --xh-red-muted: var(--red-muted, #{mc-muted('red', '900', 40%, 20%)});
+  --xh-white: var(--white, hsl(0, 0%, 100%));
   --xh-yellow: var(--yellow, #{mc('yellow', '800')});
   --xh-yellow-light: var(--yellow-light, #{mc('yellow', '50')});