@xh/hoist 59.3.2 → 59.5.0

package/cmp/grid/columns/ColumnGroup.ts

@@ -4,17 +4,17 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HAlign, PlainObject, Some, Thunkable} from '@xh/hoist/core';
+import {HAlign, PlainObject, Some, Thunkable, XH} from '@xh/hoist/core';
 import {genDisplayName} from '@xh/hoist/data';
+
+import type {ColGroupDef} from '@xh/hoist/kit/ag-grid';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
-import {clone, isEmpty, isFunction, isString} from 'lodash';
+import {clone, isEmpty, isFunction, isString, keysIn} from 'lodash';
 import {ReactNode} from 'react';
 import {GridModel} from '../GridModel';
 import {ColumnHeaderClassFn, ColumnHeaderNameFn} from '../Types';
 import {Column, ColumnSpec, getAgHeaderClassFn} from './Column';
 
-import type {ColGroupDef} from '@xh/hoist/kit/ag-grid';
-
 export interface ColumnGroupSpec {
     /** Column or ColumnGroup configs for children of this group.*/
     children: Array<ColumnGroupSpec | ColumnSpec>;
@@ -39,6 +39,8 @@ export interface ColumnGroupSpec {
 
     /** True to skip this column when adding to grid. */
     omit?: Thunkable<boolean>;
+
+    appData?: PlainObject;
 }
 
 /**
@@ -62,6 +64,8 @@ export class ColumnGroup {
      */
     agOptions?: PlainObject;
 
+    appData: PlainObject;
+
     /**
      * Not for application use. ColumnGroups are created internally by Hoist.
      *
@@ -83,6 +87,7 @@ export class ColumnGroup {
             headerAlign,
             agOptions,
             borders,
+            appData,
             ...rest
         } = config;
 
@@ -92,8 +97,6 @@ export class ColumnGroup {
             'Must specify groupId or a string headerName for a ColumnGroup'
         );
 
-        Object.assign(this, rest);
-
         this.groupId = withDefault(groupId, headerName) as string;
         this.headerName = withDefault(headerName, genDisplayName(this.groupId));
         this.headerClass = headerClass;
@@ -102,6 +105,14 @@ export class ColumnGroup {
         this.children = children;
         this.gridModel = gridModel;
         this.agOptions = agOptions ? clone(agOptions) : {};
+        this.appData = appData ? clone(appData) : {};
+
+        if (!isEmpty(rest)) {
+            const keys = keysIn(rest);
+            throw XH.exception(
+                `Column group '${this.groupId}' configured with unsupported key(s) '${keys}'. Custom config data must be nested within the 'appData' property.`
+            );
+        }
     }
 
     getAgSpec(): ColGroupDef {

package/cmp/grid/helpers/GridCountLabel.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {GridModel} from '../GridModel';
 import {box} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, useContextModel} from '@xh/hoist/core';
 import {fmtNumber} from '@xh/hoist/format';
-import {pluralize, singularize, withDefault} from '@xh/hoist/utils/js';
+import {logError, pluralize, singularize, withDefault} from '@xh/hoist/utils/js';
+import {GridModel} from '../GridModel';
 
 export interface GridCountLabelProps extends HoistProps, BoxProps {
     /** GridModel to which this component should bind. */
@@ -49,8 +49,9 @@ export const [GridCountLabel, gridCountLabel] = hoistCmp.withFactory<GridCountLa
         gridModel = withDefault(gridModel, useContextModel(GridModel));
 
         if (!gridModel) {
-            console.error(
-                "No GridModel available to GridCountLabel.  Provide via a 'gridModel' prop, or context."
+            logError(
+                `GridModel not found - provide via 'gridModel' prop or context.`,
+                GridCountLabel
             );
             return '';
         }

package/cmp/grid/impl/ColumnWidthCalculator.ts

@@ -9,7 +9,7 @@ import {GridAutosizeOptions} from '@xh/hoist/cmp/grid/GridAutosizeOptions';
 import {XH} from '@xh/hoist/core';
 import {CompoundFilter, FieldFilter, Filter, StoreRecord} from '@xh/hoist/data';
 import {forEachAsync} from '@xh/hoist/utils/async';
-import {stripTags} from '@xh/hoist/utils/js';
+import {logWarn, stripTags} from '@xh/hoist/utils/js';
 import {
     forOwn,
     groupBy,
@@ -74,7 +74,7 @@ export class ColumnWidthCalculator {
         try {
             return this.getHeaderWidth(gridModel, column, autosizeIncludeHeaderIcons, bufferPx);
         } catch (e) {
-            console.warn(`Error calculating max header width for column "${column.colId}".`, e);
+            logWarn([`Error calculating max header width for colId '${column.colId}'.`, e], this);
         } finally {
             this.resetHeaderClassNames();
         }
@@ -104,7 +104,7 @@ export class ColumnWidthCalculator {
                 return await this.calcLevelWidthAsync(gridModel, records, column, options);
             }
         } catch (e) {
-            console.warn(`Error calculating max data width for column "${column.colId}".`, e);
+            logWarn([`Error calculating max data width for colId '${column.colId}'.`, e], this);
         } finally {
             this.resetClassNames();
         }

package/cmp/grid/impl/GridPersistenceModel.ts

@@ -4,11 +4,12 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HoistModel, managed, PersistenceProvider, PlainObject, XH} from '@xh/hoist/core';
+import {GridSorterLike} from '@xh/hoist/cmp/grid';
+import {HoistModel, managed, PersistenceProvider, Some, XH} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isUndefined} from 'lodash';
 import {GridModel} from '../GridModel';
-import {GridModelPersistOptions} from '../Types';
+import {ColumnState, GridModelPersistOptions} from '../Types';
 
 /**
  * Model to manage persisting state from GridModel.
@@ -22,7 +23,13 @@ export class GridPersistenceModel extends HoistModel {
     gridModel: GridModel;
 
     @observable.ref
-    state: PlainObject;
+    state: {
+        columns?: Partial<ColumnState>[];
+        sortBy?: Some<GridSorterLike>;
+        groupBy?: Some<string>;
+        version?: number;
+        autosize?: any;
+    };
 
     @managed
     provider: PersistenceProvider;
@@ -51,7 +58,7 @@ export class GridPersistenceModel extends HoistModel {
                 run: state => this.provider.write(state)
             });
         } catch (e) {
-            console.error(e);
+            this.logError(e);
             this.state = {version: this.VERSION};
         }
 

package/cmp/grid/impl/Utils.ts

@@ -19,7 +19,7 @@ export function managedRenderer<T extends ColumnRenderer | GroupRowRenderer>(
         try {
             return fn.apply(null, arguments);
         } catch (e) {
-            console.warn(`Renderer for '${identifier}' has thrown an error.`, e);
+            console.warn(`Renderer for '${identifier}' has thrown an error`, e);
             return '#ERROR';
         }
     } as unknown as T;

package/cmp/grid/renderers/MultiFieldRenderer.ts

@@ -6,8 +6,8 @@
  */
 import {ColumnRenderer} from '@xh/hoist/cmp/grid';
 import {div, span} from '@xh/hoist/cmp/layout';
-import {throwIf, warnIf} from '@xh/hoist/utils/js';
-import {isString, partition} from 'lodash';
+import {throwIf, warnIf, intersperse} from '@xh/hoist/utils/js';
+import {isNil, isString, partition, pull} from 'lodash';
 import {ReactNode} from 'react';
 
 /**
@@ -30,24 +30,24 @@ export function multiFieldRenderer(value, context): ReactNode {
     );
 
     const {mainRenderer, delimiter, subFields = []} = multiFieldConfig,
-        [topFields, bottomFields] = partition(subFields, it => it.position === 'top'),
-        topRowItems = [],
-        bottomRowItems = [];
+        [topFields, bottomFields] = partition(subFields, it => it.position === 'top');
 
-    // Render main field to top row
-    topRowItems.push(renderMainField(value, mainRenderer, context));
+    // Render main field and subfields to top row
+    let topRowItems: ReactNode[] = [
+        renderMainField(value, mainRenderer, context),
+        ...topFields.map(it => renderSubField(it, context))
+    ];
+    pull(topRowItems, null);
 
-    // Render SubFields to top row
-    topFields.forEach(it => {
-        if (delimiter) topRowItems.push(renderDelimiter(delimiter));
-        topRowItems.push(renderSubField(it, context));
-    });
+    // Render subfield to bottom row
+    let bottomRowItems: ReactNode[] = bottomFields.map(it => renderSubField(it, context));
+    pull(bottomRowItems, null);
 
-    // Render SubFields to bottom row
-    bottomFields.forEach((it, idx) => {
-        if (delimiter && idx > 0) bottomRowItems.push(renderDelimiter(delimiter));
-        bottomRowItems.push(renderSubField(it, context));
-    });
+    // Insert delimiter if applicable
+    if (delimiter) {
+        topRowItems = intersperse(topRowItems, renderDelimiter(delimiter));
+        bottomRowItems = intersperse(bottomRowItems, renderDelimiter(delimiter));
+    }
 
     return div({
         className: 'xh-multifield-renderer',
@@ -107,14 +107,20 @@ function renderSubField({colId, label}, context) {
 
     if (label && !isString(label)) label = headerName;
 
-    return div({
-        className: 'xh-multifield-renderer-field',
-        items: [label ? `${label}: ` : null, renderValue(value, renderer, column, context)]
-    });
+    const renderedVal = renderValue(value, renderer, column, context),
+        renderedValIsEmpty = renderedVal === '' || isNil(renderedVal);
+
+    return renderedValIsEmpty
+        ? null
+        : div({
+              className: 'xh-multifield-renderer-field',
+              items: [label ? `${label}: ` : null, renderedVal]
+          });
 }
 
 function renderValue(value, renderer, column, context) {
-    return renderer ? renderer(value, {...context, column}) : value;
+    const ret = renderer ? renderer(value, {...context, column}) : value;
+    return isNil(ret) ? null : ret;
 }
 
 function renderDelimiter(delimiter) {

package/cmp/grouping/GroupingChooserModel.ts

@@ -170,7 +170,7 @@ export class GroupingChooserModel extends HoistModel {
                     run: state => this.provider.write(state)
                 });
             } catch (e) {
-                console.error(e);
+                this.logError(e);
                 XH.safeDestroy(this.provider);
                 this.provider = null;
             }
@@ -190,7 +190,7 @@ export class GroupingChooserModel extends HoistModel {
     @action
     setValue(value: string[]) {
         if (!this.validateValue(value)) {
-            console.warn('Attempted to set GroupingChooser to invalid value: ', value);
+            this.logWarn('Attempted to set invalid value', value);
             return;
         }
         this.value = value;

package/cmp/relativetimestamp/RelativeTimestamp.ts

@@ -20,7 +20,7 @@ import {fmtCompactDate, fmtDateTime} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {DAYS, HOURS, LocalDate, SECONDS} from '@xh/hoist/utils/datetime';
-import {withDefault} from '@xh/hoist/utils/js';
+import {logWarn, withDefault} from '@xh/hoist/utils/js';
 
 interface RelativeTimestampProps extends HoistProps, BoxProps {
     /**
@@ -231,7 +231,10 @@ function doFormat(timestamp: Date | number, opts: RelativeTimestampOptions): str
 
     // 1) Degenerate cases
     if (isFuture && !allowFuture) {
-        console.warn(`Unexpected future date provided for timestamp: ${elapsed}ms in the future.`);
+        logWarn(
+            `Unexpected future date provided for timestamp: ${elapsed}ms in the future.`,
+            RelativeTimestamp
+        );
         return '[????]';
     }
 

package/cmp/tab/TabContainerModel.ts

@@ -144,7 +144,7 @@ export class TabContainerModel extends HoistModel {
 
         if (route) {
             if (XH.isMobileApp) {
-                console.warn('Tab container routing is not supported for mobile applications.');
+                this.logWarn('TabContainer routing is not supported for mobile applications.');
                 return;
             }
 
@@ -384,7 +384,7 @@ export class TabContainerModel extends HoistModel {
             this.provider = PersistenceProvider.create({path: 'tabContainer', ...persistWith});
             state = this.provider.read() || null;
         } catch (e) {
-            console.error(e);
+            this.logError(e);
             XH.safeDestroy(this.provider);
             this.provider = null;
         }

package/cmp/zoneGrid/ZoneGridModel.ts

@@ -620,7 +620,7 @@ export class ZoneGridModel extends HoistModel {
                 ret[zone] = this.parseZoneMapping(zone, rawMapping);
             } catch (e) {
                 if (strict) throw e;
-                console.warn(e.message);
+                this.logWarn(e.message);
                 ret[zone] = this._defaultState.mappings[zone];
             }
         });

package/cmp/zoneGrid/impl/ZoneGridPersistenceModel.ts

@@ -4,11 +4,12 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HoistModel, managed, PersistenceProvider, PlainObject} from '@xh/hoist/core';
+import {GridSorterLike} from '@xh/hoist/cmp/grid';
+import {HoistModel, managed, PersistenceProvider, Some} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isUndefined} from 'lodash';
 import {ZoneGridModel} from '../ZoneGridModel';
-import {ZoneGridModelPersistOptions} from '../Types';
+import {Zone, ZoneGridModelPersistOptions, ZoneMapping} from '../Types';
 
 /**
  * Model to manage persisting state from ZoneGridModel.
@@ -22,7 +23,12 @@ export class ZoneGridPersistenceModel extends HoistModel {
     zoneGridModel: ZoneGridModel;
 
     @observable.ref
-    state: PlainObject;
+    state: {
+        sortBy?: GridSorterLike;
+        groupBy?: Some<string>;
+        version?: number;
+        mappings?: Record<Zone, Some<string | ZoneMapping>>;
+    };
 
     @managed
     provider: PersistenceProvider;
@@ -51,7 +57,7 @@ export class ZoneGridPersistenceModel extends HoistModel {
                 run: state => this.provider.write(state)
             });
         } catch (e) {
-            console.error(e);
+            this.logError(e);
             this.state = {version: this.VERSION};
         }
 

package/core/HoistBase.ts

@@ -4,8 +4,17 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {XH, PersistenceProvider, PersistOptions, DebounceSpec} from './';
-import {throwIf, getOrCreate} from '@xh/hoist/utils/js';
+import {XH, PersistenceProvider, PersistOptions, DebounceSpec, Some} from './';
+import {
+    throwIf,
+    getOrCreate,
+    logInfo,
+    logDebug,
+    logError,
+    logWarn,
+    withDebug,
+    withInfo
+} from '@xh/hoist/utils/js';
 import {
     cloneDeep,
     debounce as lodashDebounce,
@@ -26,7 +35,7 @@ import {
     when as mobxWhen
 } from '@xh/hoist/mobx';
 import {IAutorunOptions, IReactionOptions} from 'mobx/dist/api/autorun';
-import {IReactionDisposer} from 'mobx/dist/internal';
+import {IReactionDisposer, IEqualsComparer} from 'mobx/dist/internal';
 
 export interface HoistBaseClass {
     new (...args: any[]): HoistBase;
@@ -69,6 +78,33 @@ export abstract class HoistBase {
     /** Default persistence options for this object. */
     persistWith: PersistOptions = null;
 
+    //--------------------------------------------------
+    // Logging Delegates
+    //--------------------------------------------------
+    logInfo(...messages: unknown[]) {
+        logInfo(messages, this);
+    }
+
+    logWarn(...messages: unknown[]) {
+        logWarn(messages, this);
+    }
+
+    logError(...messages: unknown[]) {
+        logError(messages, this);
+    }
+
+    logDebug(...messages: unknown[]) {
+        logDebug(messages, this);
+    }
+
+    withInfo<T>(messages: Some<unknown>, fn: () => T): T {
+        return withInfo<T>(messages, fn, this);
+    }
+
+    withDebug<T>(messages: Some<unknown>, fn: () => T): T {
+        return withDebug<T>(messages, fn, this);
+    }
+
     /**
      * Add and start one or more managed reactions.
      *
@@ -104,12 +140,12 @@ export abstract class HoistBase {
     addReaction(...specs: ReactionSpec<any>[]): IReactionDisposer | IReactionDisposer[] {
         const disposers = specs.map(s => {
             if (!s) return null;
-            let {track, when, run, debounce, ...opts} = s;
+            let {track, when, run, debounce, ...rest} = s;
             throwIf(
                 (track && when) || (!track && !when),
                 "Must specify either 'track' or 'when' in addReaction."
             );
-            opts = parseReactionOptions(opts);
+            const opts = parseReactionOptions(rest);
             run = bindAndDebounce(this, run, debounce);
 
             const disposer = track ? mobxReaction(track, run, opts) : mobxWhen(when, run, opts);
@@ -231,9 +267,10 @@ export abstract class HoistBase {
                 run: data => provider.write(data)
             });
         } catch (e) {
-            console.error(
+            this.logError(
                 `Failed to configure Persistence for '${property}'.  Be sure to fully specify ` +
-                    `'persistWith' on this object or in the method call.`
+                    `'persistWith' on this object or in the method call`,
+                e
             );
         }
     }
@@ -257,7 +294,7 @@ export abstract class HoistBase {
 /**
  * Object containing options accepted by MobX 'reaction' API as well as arguments below.
  */
-export interface ReactionSpec<T = any> extends IReactionOptions<T, any> {
+export interface ReactionSpec<T = any> extends Omit<IReactionOptions<T, any>, 'equals'> {
     /**
      * Function returning data to observe - first arg to the underlying reaction() call.
      * Specify this or `when`.
@@ -275,6 +312,9 @@ export interface ReactionSpec<T = any> extends IReactionOptions<T, any> {
 
     /** Specify to debounce run function */
     debounce?: DebounceSpec;
+
+    /** Specify a default from {@link comparer} or a custom comparer function. */
+    equals?: keyof typeof comparer | IEqualsComparer<T>;
 }
 
 /**

package/core/HoistBaseDecorators.ts

@@ -6,7 +6,7 @@
  */
 import {cloneDeep, isUndefined} from 'lodash';
 import {wait} from '../promise';
-import {throwIf} from '../utils/js';
+import {logError, throwIf} from '../utils/js';
 import {HoistBaseClass, PersistenceProvider, PersistOptions} from './';
 
 /**
@@ -66,9 +66,10 @@ function createPersistDescriptor(
         '@persist decorator should be applied to an instance of HoistBase'
     );
     if (descriptor.get || descriptor.set) {
-        console.error(
+        logError(
             `Error defining ${property} : @persist or @persistWith should be defined closest ` +
-                `to property, and after mobx annotation e.g. '@bindable @persist ${property}'`
+                `to property, and after mobx annotation e.g. '@bindable @persist ${property}'`,
+            target
         );
         return descriptor;
     }
@@ -89,9 +90,13 @@ function createPersistDescriptor(
                 });
             });
         } catch (e) {
-            console.error(
-                `Failed to configure Persistence for '${property}'.  Be sure to fully specify ` +
-                    `'persistWith' on this object or annotation.`
+            logError(
+                [
+                    `Failed to configure Persistence for '${property}'.  Be sure to fully specify ` +
+                        `'persistWith' on this object or annotation`,
+                    e
+                ],
+                target
             );
         }
 

package/core/HoistComponent.ts

@@ -282,9 +282,7 @@ function wrapWithModel(render: RenderFn, cfg: Config): RenderFn {
         if (!model && !spec.optional && spec instanceof UsesSpec) {
             console.error(`
                 Failed to find model with selector '${formatSelector(spec.selector)}' for
-                component '${
-                    cfg.displayName
-                }'.  Ensure the proper model is available via context, or
+                component '${cfg.displayName}'. Ensure the proper model is available via context, or
                 specify explicitly using the 'model' prop.
             `);
             return cmpErrDisplay({...getLayoutProps(props), item: 'No model found'});

package/core/elem.ts

@@ -14,7 +14,7 @@ import {
     ReactElement,
     ReactNode
 } from 'react';
-import {PlainObject, Some, Thunkable} from './types/Types';
+import {Some, Thunkable} from './types/Types';
 
 /**
  * Alternative format for specifying React Elements in render functions. This type is designed to
@@ -39,7 +39,7 @@ import {PlainObject, Some, Thunkable} from './types/Types';
  * with this API.  The '$' will be stripped from the prop name before passing it along to the
  * underlying component.
  */
-export type ElementSpec<P extends PlainObject> = P & {
+export type ElementSpec<P> = P & {
     //---------------------------------------------
     // Enhanced attributes to support element factory
     //---------------------------------------------

package/core/exception/ExceptionHandler.ts

@@ -6,7 +6,7 @@
  */
 import {Exception} from './Exception';
 import {fragment, span} from '@xh/hoist/cmp/layout';
-import {stripTags} from '@xh/hoist/utils/js';
+import {logError, logWarn, stripTags} from '@xh/hoist/utils/js';
 import {Icon} from '@xh/hoist/icon';
 import {forOwn, has, isArray, isNil, isObject, omitBy, pick, set} from 'lodash';
 import {HoistException, PlainObject, XH} from '../';
@@ -189,7 +189,7 @@ export class ExceptionHandler {
                 username = XH.getUsername();
 
             if (!username) {
-                console.warn('Error report cannot be submitted to UI server - user unknown');
+                logWarn('Error report cannot be submitted to UI server - user unknown', this);
                 return false;
             }
 
@@ -206,7 +206,7 @@ export class ExceptionHandler {
             });
             return true;
         } catch (e) {
-            console.error('Exception while submitting error report to UI server', e);
+            logError(['Exception while submitting error report to UI server', e], this);
             return false;
         }
     }
@@ -261,7 +261,7 @@ export class ExceptionHandler {
             return stripTags(JSON.stringify(ret, null, 4));
         } catch (e) {
             const message = 'Failed to serialize error';
-            console.error(message, exception, e);
+            logError([message, exception, e], this);
             return JSON.stringify({message}, null, 4);
         }
     }

package/core/impl/InstallServices.ts

@@ -6,7 +6,7 @@
  */
 import {HoistService, HoistServiceClass, Some, XH} from '@xh/hoist/core';
 import {instanceManager} from '@xh/hoist/core/impl/InstanceManager';
-import {throwIf, withDebug} from '@xh/hoist/utils/js';
+import {throwIf} from '@xh/hoist/utils/js';
 import {camelCase, castArray} from 'lodash';
 
 /**
@@ -50,13 +50,7 @@ export async function installServicesAsync(serviceClasses: Some<HoistServiceClas
 
 async function initServicesInternalAsync(svcs: HoistService[]) {
     const promises = svcs.map(it => {
-        return withDebug(
-            `Initializing ${it.constructor.name}`,
-            () => {
-                return it.initAsync();
-            },
-            'XH'
-        );
+        return it.withDebug(`Initializing`, () => it.initAsync());
     });
 
     const results: any[] = await Promise.allSettled(promises),

package/core/load/LoadSupport.ts

@@ -4,11 +4,11 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {HoistBase, managed, RefreshContextModel, TaskObserver} from '../';
+import {HoistBase, managed, PlainObject, RefreshContextModel, TaskObserver} from '../';
 import {LoadSpec, Loadable} from './';
 import {makeObservable, observable, runInAction} from '@xh/hoist/mobx';
-import {throwIf} from '@xh/hoist/utils/js';
-import {isPlainObject} from 'lodash';
+import {logDebug, logError, throwIf} from '@xh/hoist/utils/js';
+import {isPlainObject, pull} from 'lodash';
 
 /**
  * Provides support for objects that participate in Hoist's loading/refresh lifecycle.
@@ -55,11 +55,11 @@ export class LoadSupport extends HoistBase implements Loadable {
         return this.doLoadAsync(newSpec);
     }
 
-    async refreshAsync(meta?: object) {
+    async refreshAsync(meta?: PlainObject) {
         return this.loadAsync({meta, isRefresh: true});
     }
 
-    async autoRefreshAsync(meta?: object) {
+    async autoRefreshAsync(meta?: PlainObject) {
         return this.loadAsync({meta, isAutoRefresh: true});
     }
 
@@ -98,18 +98,17 @@ export class LoadSupport extends HoistBase implements Loadable {
                 if (target instanceof RefreshContextModel) return;
 
                 const elapsed = this.lastLoadCompleted.getTime() - this.lastLoadRequested.getTime(),
-                    msg = `[${target.constructor.name}] | ${loadSpec.typeDisplay} | ${
-                        exception ? 'failed | ' : ''
-                    }${elapsed}ms`;
+                    status = exception ? 'failed' : null,
+                    msg = pull([loadSpec.typeDisplay, status, `${elapsed}ms`, exception], null);
 
                 if (exception) {
                     if (exception.isRoutine) {
-                        console.debug(msg, exception);
+                        logDebug(msg, target);
                     } else {
-                        console.error(msg, exception);
+                        logError(msg, target);
                     }
                 } else {
-                    console.debug(msg);
+                    logDebug(msg, target);
                 }
             });
     }

package/core/model/HoistModel.ts

@@ -69,7 +69,7 @@ export abstract class HoistModel extends HoistBase implements Loadable {
     @observable
     _componentProps = {};
     _modelLookup = null;
-    _created = Date.now;
+    _created = Date.now();
 
     constructor() {
         super();