feat: PerformanceObserverStats initial commit

Add a performance stat around long tasks. Chrome supports PerformanceObserver API that lets us
register for long tasks event. Any task that takes longer than 50ms is considered a long task.

JitsiConference.js

@@ -375,6 +375,11 @@ JitsiConference.prototype._init = function(options = {}) {
         Statistics.analytics.addPermanentProperties({
             'callstats_name': this._statsCurrentId
         });
+
+        // Start performance observer for monitoring long tasks
+        if (config.performanceStatsInterval) {
+            this.statistics.attachPerformanceStats(this);
+        }
     }
 
     this.eventManager.setupChatRoomListeners();
@@ -719,6 +724,16 @@ JitsiConference.prototype.getLocalVideoTrack = function() {
     return this.rtc ? this.rtc.getLocalVideoTrack() : null;
 };
 
+/**
+ * Obtains the performance statistics.
+ * @returns {Object|null}
+ */
+JitsiConference.prototype.getPerformanceStats = function() {
+    return browser.supportsPerformanceObserver()
+        ? this.statistics.performanceObserverStats.getPerformanceStats()
+        : null;
+};
+
 /**
  * Attaches a handler for events(For example - "participant joined".) in the
  * conference. All possible event are defined in JitsiConferenceEvents.

modules/browser/BrowserCapabilities.js

@@ -122,6 +122,16 @@ export default class BrowserCapabilities extends BrowserDetection {
         return this.isChromiumBased() || this.isReactNative() || this.isSafari();
     }
 
+    /**
+     * Checks if the current browser supports the Long Tasks API that lets us observe
+     * performance measurement events and be notified of tasks that take longer than
+     * 50ms to execute on the main thread.
+     */
+    supportsPerformanceObserver() {
+        return typeof window.PerformanceObserver !== 'undefined'
+            && PerformanceObserver.supportedEntryTypes.indexOf('longtask') > -1;
+    }
+
     /**
      * Checks if the current browser supports audio level stats on the receivers.
      */

modules/statistics/PerformanceObserverStats.js

@@ -0,0 +1,97 @@
+
+import { getLogger } from 'jitsi-meet-logger';
+
+import * as StatisticsEvents from '../../service/statistics/Events';
+import { RunningAverage } from '../util/MathUtil';
+
+const logger = getLogger(__filename);
+const MILLI_SECONDS = 1000;
+const SECONDS = 60;
+
+/**
+ * This class creates an observer that monitors browser's performance measurement events
+ * as they are recorded in the browser's performance timeline and computes an average and
+ * a maximum value for the long task events. Tasks are classified as long tasks if they take
+ * longer than 50ms to execute on the main thread.
+ */
+export class PerformanceObserverStats {
+    /**
+     * Creates a new instance of Performance observer statistics.
+     *
+     * @param {*} emitter Event emitter for emitting stats periodically
+     * @param {*} statsInterval interval for calculating the stats
+     */
+    constructor(emitter, statsInterval) {
+        this.eventEmitter = emitter;
+        this.longTasks = 0;
+        this.maxTaskDuration = 0;
+        this.performanceStatsInterval = statsInterval;
+        this.stats = new RunningAverage();
+    }
+
+    /**
+     * Obtains the average rate of long tasks observed per min and the
+     * duration of the longest task recorded by the observer.
+     * @returns {Object}
+     */
+    getPerformanceStats() {
+        return {
+            average: (this.stats.getAverage() * SECONDS).toFixed(2), // calc rate per min
+            maxTaskDuration: this.maxTaskDuration
+        };
+    }
+
+    /**
+     * Starts the performance observer by registering the callback function
+     * that calculates the performance statistics periodically.
+     * @returns {void}
+     */
+    startObserver() {
+        // Create a handler for when the long task event is fired.
+        this.longTaskEventHandler = list => {
+            const entries = list.getEntries();
+
+            for (const task of entries) {
+                this.longTasks++;
+                this.maxTaskDuration = Math.max(this.maxTaskDuration, task.duration).toFixed(3);
+            }
+        };
+
+        // Create an observer for monitoring long tasks.
+        logger.info('Creating a Performance Observer for monitoring Long Tasks');
+        this.observer = new PerformanceObserver(this.longTaskEventHandler);
+        this.observer.observe({ type: 'longtask',
+            buffered: true });
+        const startTime = Date.now();
+
+        // Calculate the average # of events/sec and emit a stats event.
+        this.longTasksIntervalId = setInterval(() => {
+            const now = Date.now();
+            const interval = this._lastTimeStamp
+                ? (now - this._lastTimeStamp) / MILLI_SECONDS
+                : (now - startTime) / MILLI_SECONDS;
+            const rate = this.longTasks / interval;
+
+            this.stats.addNext(rate);
+            this.eventEmitter.emit(
+                StatisticsEvents.LONG_TASKS_STATS, this.getPerformanceStats());
+
+            // Reset the counter and start counting events again.
+            this.longTasks = 0;
+            this._lastTimeStamp = Date.now();
+        }, this.performanceStatsInterval);
+    }
+
+    /**
+     * Stops the performance observer.
+     * @returns {void}
+     */
+    stopObserver() {
+        this.observer && this.observer.disconnect();
+        this.longTaskEventHandler = null;
+        if (this.longTasksIntervalId) {
+            clearInterval(this.longTasksIntervalId);
+            this.longTasksIntervalId = null;
+        }
+    }
+}

modules/statistics/PerformanceObserverStats.spec.js

@@ -0,0 +1,47 @@
+import EventEmitter from 'events';
+
+import JitsiConference from '../../JitsiConference';
+import * as JitsiConferenceEvents from '../../JitsiConferenceEvents';
+import browser from '../browser';
+
+import Statistics from './statistics';
+
+/**
+ * Mock object to be used in place of a real conference.
+ *
+ * @constructor
+ */
+function MockConference() {
+    this.eventEmitter = new EventEmitter();
+}
+MockConference.prototype = Object.create(JitsiConference.prototype);
+MockConference.prototype.constructor = JitsiConference;
+
+describe('PerformanceObserverStats', () => {
+    beforeEach(() => {
+        // works only on chrome.
+        spyOn(browser, 'isChrome').and.returnValue(true);
+    });
+
+    it('Emits performance stats every sec', () => {
+        const mockConference = new MockConference();
+        const statistics = new Statistics();
+
+        statistics.attachPerformanceStats(mockConference);
+
+        const startObserverSpy = spyOn(statistics.performanceObserverStats, 'startObserver');
+        const stopObserverSpy = spyOn(statistics.performanceObserverStats, 'stopObserver');
+        const addNextSpy = spyOn(statistics.performanceObserverStats.stats, 'addNext');
+
+        mockConference.eventEmitter.emit(JitsiConferenceEvents.CONFERENCE_JOINED);
+        expect(startObserverSpy).toHaveBeenCalled();
+        expect(statistics.performanceObserverStats.getPerformanceStats()).toBeTruthy();
+
+        setTimeout(() => {
+            expect(addNextSpy).toHaveBeenCalled();
+        }, 1000);
+
+        mockConference.eventEmitter.emit(JitsiConferenceEvents.CONFERENCE_LEFT);
+        expect(stopObserverSpy).toHaveBeenCalled();
+    });
+});

modules/statistics/statistics.js

@@ -1,5 +1,6 @@
 import EventEmitter from 'events';
 
+import * as JitsiConferenceEvents from '../../JitsiConferenceEvents';
 import JitsiTrackError from '../../JitsiTrackError';
 import { FEEDBACK } from '../../service/statistics/AnalyticsEvents';
 import * as StatisticsEvents from '../../service/statistics/Events';
@@ -9,6 +10,7 @@ import ScriptUtil from '../util/ScriptUtil';
 import analytics from './AnalyticsAdapter';
 import CallStats from './CallStats';
 import LocalStats from './LocalStatsCollector';
+import { PerformanceObserverStats } from './PerformanceObserverStats';
 import RTPStats from './RTPStatsCollector';
 import { CALLSTATS_SCRIPT_URL } from './constants';
 
@@ -119,6 +121,10 @@ Statistics.init = function(options) {
         Statistics.audioLevelsInterval = options.audioLevelsInterval;
     }
 
+    if (typeof options.performanceStatsInterval === 'number') {
+        Statistics.performanceStatsInterval = options.performanceStatsInterval;
+    }
+
     Statistics.disableThirdPartyRequests = options.disableThirdPartyRequests;
 };
 
@@ -187,6 +193,7 @@ export default function Statistics(xmpp, options) {
 Statistics.audioLevelsEnabled = false;
 Statistics.audioLevelsInterval = 200;
 Statistics.pcStatsInterval = 10000;
+Statistics.performanceStatsInterval = 10000;
 Statistics.disableThirdPartyRequests = false;
 Statistics.analytics = analytics;
 
@@ -282,6 +289,63 @@ Statistics.prototype.removeByteSentStatsListener = function(listener) {
         listener);
 };
 
+/**
+ * Add a listener that would be notified on a LONG_TASKS_STATS event.
+ *
+ * @param {Function} listener a function that would be called when notified.
+ * @returns {void}
+ */
+Statistics.prototype.addPerformanceStatsListener = function(listener) {
+    this.eventEmitter.on(StatisticsEvents.LONG_TASKS_STATS, listener);
+};
+
+/**
+ * Creates an instance of {@link PerformanceObserverStats} and starts the
+ * observer that records the stats periodically.
+ *
+ * @returns {void}
+ */
+Statistics.prototype.attachPerformanceStats = function(conference) {
+    if (!browser.supportsPerformanceObserver()) {
+        logger.warn('Performance observer for long tasks not supported by browser!');
+
+        return;
+    }
+
+    this.performanceObserverStats = new PerformanceObserverStats(
+        this.eventEmitter,
+        Statistics.performanceStatsInterval);
+
+    conference.on(
+        JitsiConferenceEvents.CONFERENCE_JOINED,
+        () => this.performanceObserverStats.startObserver());
+    conference.on(
+        JitsiConferenceEvents.CONFERENCE_LEFT,
+        () => this.performanceObserverStats.stopObserver());
+};
+
+/**
+ * Obtains the current value of the performance statistics.
+ *
+ * @returns {Object|null} stats object if the observer has been
+ * created, null otherwise.
+ */
+Statistics.prototype.getPerformanceStats = function() {
+    return this.performanceObserverStats
+        ? this.performanceObserverStats.getPerformanceStats()
+        : null;
+};
+
+/**
+ * Removes the given listener for the LONG_TASKS_STATS event.
+ *
+ * @param {Function} listener the listener we want to remove.
+ * @returns {void}
+ */
+Statistics.prototype.removePerformanceStatsListener = function(listener) {
+    this.eventEmitter.removeListener(StatisticsEvents.LONG_TASKS_STATS, listener);
+};
+
 Statistics.prototype.dispose = function() {
     try {
         // NOTE Before reading this please see the comment in stopCallStats...

modules/util/MathUtil.js

@@ -1,5 +1,4 @@
 
-
 /**
  * The method will increase the given number by 1. If the given counter is equal
  * or greater to {@link Number.MAX_SAFE_INTEGER} then it will be rolled back to
@@ -38,3 +37,39 @@ export function calculateAverage(valueArray) {
 export function filterPositiveValues(valueArray) {
     return valueArray.filter(value => value >= 0);
 }
+
+/**
+ * This class calculates a simple running average that continually changes
+ * as more data points are collected and added.
+ */
+export class RunningAverage {
+    /**
+     * Creates an instance of the running average calculator.
+     */
+    constructor() {
+        this.average = 0;
+        this.n = 0;
+    }
+
+    /**
+     * Adds a new data point to the existing set of values and recomputes
+     * the running average.
+     * @param {number} value
+     * @returns {void}
+     */
+    addNext(value) {
+        if (typeof value !== 'number') {
+            return;
+        }
+        this.n += 1;
+        this.average = this.average + ((value - this.average) / this.n);
+    }
+
+    /**
+     * Obtains the average value for the current subset of values.
+     * @returns {number} - computed average.
+     */
+    getAverage() {
+        return this.average;
+    }
+}

modules/util/MathUtil.spec.js

@@ -0,0 +1,27 @@
+import { RunningAverage } from './MathUtil';
+
+describe('running average', () => {
+    it('should work', () => {
+        const rAvg = new RunningAverage();
+
+        // 1 / 1
+        rAvg.addNext(1);
+        expect(rAvg.getAverage()).toBe(1);
+
+        // 4 / 2
+        rAvg.addNext(3);
+        expect(rAvg.getAverage()).toBe(2);
+
+        // 6 / 3
+        rAvg.addNext(2);
+        expect(rAvg.getAverage()).toBe(2);
+
+        // 12 / 4
+        rAvg.addNext(6);
+        expect(rAvg.getAverage()).toBe(3);
+
+        // 20 / 5
+        rAvg.addNext(8);
+        expect(rAvg.getAverage()).toBe(4);
+    });
+});

service/statistics/Events.js

@@ -30,3 +30,8 @@ export const BYTE_SENT_STATS = 'statistics.byte_sent_stats';
  * <tt>resolution</tt>, and <tt>transport</tt>.
  */
 export const CONNECTION_STATS = 'statistics.connectionstats';
+
+/**
+ * An event carrying performance stats.
+ */
+export const LONG_TASKS_STATS = 'statistics.long_tasks_stats';