Tracking Page Load Times

Apliqo UX
1

Is there a good way to track UX page load times? The built in tracking shows access but not anything around response times. This thread seemed related, but old https://forum.cubewise.com/

2

We found a way to do this for data rendered in grid widgets and views, but not other widget types. For those interested, table render times can be captured using the custom hook functions as follows.

create a beforeTableUpdate function that starts a timer.

    beforeTableUpdate(table) {
        this.tableStartTime = performance.now();
        this.$log.debug('Table load started at:', new Date().toISOString());
       // this.$log.debug('beforeTableUpdate');
        return Promise.resolve({});
    }

create an afterTableUpdate function that stops the timer and calls a function to calculate the resulting metrics

afterTableUpdate(table) {
    if (this.tableStartTime) {
        const metrics = this.calculateMetrics(table);
        
        // Local logging
        this.$log.debug('Table Load Metrics:', metrics);

        // Send to server for file logging
        this.sendMetricsToContentStore(metrics)

        this.tableStartTime = null;
    }
    return Promise.resolve({});
}

calculateMetrics(table) {
    const endTime = performance.now();
    const now = new Date();

    // Format year (YYYY)
    const year = now.getFullYear();

    // Format month-day (MM-DD)
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const monthDay = `${month}-${day}`;

    // Format time (HH:MM)
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const timeStamp = `${hours}:${minutes}`;

    return {
        loadTimeMs: (endTime - this.tableStartTime).toFixed(2),
        viewName: table.Name || 'Unknown view',
        rowCount: table.rowsMap.length || 0,
        columnCount: table.columnsMap.length || 0,
        totalCells: (table.rowsMap.length * table.columnsMap.length) || 0,
        year: year,
        monthDay: monthDay,
        timeStamp: timeStamp,
        // Keep original timestamp
        fullTimestamp: now.toISOString()
    };
}

You can then add a cube to the content store that looks similar to the }APQ UX Connection Analysis cubes and write the results to it using another function

sendMetricsToContentStore(metrics) {

let user = this.$rootScope.user.Name

this.$tm1Ui.cellPut(metrics.loadTimeMs, "contentStore", "Test App Perf",
        metrics.year,
        metrics.monthDay,
        metrics.timeStamp,
        user,
        metrics.viewName,
        "Time").then(function(result){
                 // Handle result
                if(result.success){
                        // It worked!!
                 }
        });
    
    this.$tm1Ui.cellPut(metrics.columnCount, "contentStore", "Test App Perf",
        metrics.year,
        metrics.monthDay,
        metrics.timeStamp,
            user,
           metrics.viewName,
            "Columns").then(function(result){
                     // Handle result
                    if(result.success){
                            // It worked!!
                     }
            });
    
    this.$tm1Ui.cellPut(metrics.rowCount, "contentStore", "Test App Perf",
        metrics.year,
        metrics.monthDay,
        metrics.timeStamp,
        user,
        metrics.viewName,
        "Rows").then(function(result){
                    // Handle result
                if(result.success){
                        // It worked!!
                    }
        });
	}
}

This is a good start, but still trying to figure out how to capture the time of non-grid widgets.

2 Likes