MM-58359 Add page_load to Prometheus metrics (#27159)

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/utils/performance_telemetry/index.ts

@@ -12,6 +12,7 @@ export const enum Mark {
 export const enum Measure {
     ChannelSwitch = 'channel_switch',
     GlobalThreadsLoad = 'global_threads_load',
+    PageLoad = 'page_load',
     RhsLoad = 'rhs_load',
     TeamSwitch = 'team_switch',
 }

webapp/channels/src/utils/performance_telemetry/reporter.ts

@@ -16,6 +16,8 @@ import type {PerformanceLongTaskTiming} from './long_task';
 import type {PlatformLabel, UserAgentLabel} from './platform_detection';
 import {getPlatformLabel, getUserAgentLabel} from './platform_detection';
 
+import {Measure} from '.';
+
 type PerformanceReportMeasure = {
 
     /**
@@ -93,6 +95,10 @@ export default class PerformanceReporter {
             entryTypes: observedEntryTypes,
         });
 
+        // Record the page load separately because it arrived before we were observing and because you can't use
+        // the buffered option for PerformanceObserver with multiple entry types.
+        this.measurePageLoad();
+
         // Register handlers for standard metrics and Web Vitals
         onCLS((metric) => this.handleWebVital(metric));
         onFCP((metric) => this.handleWebVital(metric));
@@ -109,6 +115,20 @@ export default class PerformanceReporter {
         addEventListener('visibilitychange', this.handleVisibilityChange);
     }
 
+    private measurePageLoad() {
+        const entries = performance.getEntriesByType('navigation');
+
+        if (entries.length === 0) {
+            return;
+        }
+
+        this.histogramMeasures.push({
+            metric: Measure.PageLoad,
+            value: entries[0].duration,
+            timestamp: performance.timeOrigin + entries[0].startTime,
+        });
+    }
+
     /**
      * This method is for testing only because we can't clean up the callbacks registered with web-vitals.
      */