feat: Optimisation of prev stats storing (#5)

* feat: add emitting of stats parsing time

* feat: fix typos

* feat: correct ts typechecking

* feat: add cleanup of prev stats

* feat: reuse task scheduler to clean up parser stats

* feat: add logging

* feat: add prerelease sm config

* chore(release): 1.5.0-optimization-part-2.1 [skip ci]

* feat: edit test logs

* feat: move common code to base class

* feat: update dev deps

* feat: remove unnecessary task scheduling from detector

* feat: move last stats methods to base class

Co-authored-by: vlprojects-bot <[email protected]>

Author: evgmel

.releaserc

@@ -1,6 +1,7 @@
 {
   "branches": [
     { "name": "master" },
+    { "name": "!(master)", "prerelease": true, "channel": "rc" }
   ],
   "plugins": [
     ["@semantic-release/commit-analyzer", {

README.md

@@ -136,7 +136,7 @@ const issue = {
 ```
 
 ### NetworkMediaSyncIssueDetector
-Detects issues with audio syncronization.
+Detects issues with audio synchronization.
 ```js
 const issue = {
     type: 'network',
@@ -158,7 +158,7 @@ const issue = {
 ```
 
 ### QualityLimitationsIssueDetector
-Detects issues with encoder and outbound network. Based on native qualitiLimitationReason.
+Detects issues with encoder and outbound network. Based on native qualityLimitationReason.
 ```js
 const issue = {
     type: 'cpu',
@@ -191,7 +191,7 @@ const issue = {
 
 ## Roadmap
 
-- [ ] Adaptive getStats() call interval based on last getStats() exectution time 
+- [ ] Adaptive getStats() call interval based on last getStats() execution time 
 - [ ] Structured issue debug
 - [ ] Issues detector for user devices permissions
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webrtc-issue-detector",
-  "version": "1.4.0",
+  "version": "1.5.0-optimization-part-2.1",
   "description": "WebRTC diagnostic tool that detects issues with network or user devices",
   "main": "dist/bundle-cjs.js",
   "module": "dist/bundle-esm.js",
@@ -45,17 +45,17 @@
     "@semantic-release/github": "^8.0.5",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@types/chai": "^4.3.3",
+    "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-subset": "^1.3.3",
     "@types/faker": "^5.5.9",
-    "@types/mocha": "^9.1.1",
-    "@types/node": "12",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "14",
     "@types/sinon": "^10.0.13",
-    "@types/sinon-chai": "^3.2.8",
+    "@types/sinon-chai": "^3.2.9",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-subset": "^1.6.0",
     "eslint": "7.32.0",
@@ -69,7 +69,7 @@
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-polyfill-node": "^0.10.2",
     "rollup-plugin-terser": "^7.0.2",
-    "sinon": "^14.0.0",
+    "sinon": "^14.0.2",
     "sinon-chai": "^3.7.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"

src/NetworkScoresCalculator.ts

@@ -5,14 +5,24 @@ import {
   INetworkScoresCalculator,
   WebRTCStatsParsed,
 } from './types';
+import { scheduleTask } from './utils/tasks';
+import { CLEANUP_PREV_STATS_TTL_MS } from './utils/constants';
 
 class NetworkScoresCalculator implements INetworkScoresCalculator {
   #lastProcessedStats: { [connectionId: string]: WebRTCStatsParsed } = {};
 
   calculate(data: WebRTCStatsParsed): NetworkScores {
+    const { connection: { id: connectionId } } = data;
     const outbound = this.calculateOutboundScore(data);
     const inbound = this.calculateInboundScore(data);
-    this.#lastProcessedStats[data.connection.id] = data;
+    this.#lastProcessedStats[connectionId] = data;
+
+    scheduleTask({
+      taskId: connectionId,
+      delayMs: CLEANUP_PREV_STATS_TTL_MS,
+      callback: () => (delete this.#lastProcessedStats[connectionId]),
+    });
+
     return { outbound, inbound };
   }
 

src/WebRTCIssueDetector.ts

@@ -3,14 +3,14 @@ import {
   CompositeStatsParser,
   DetectIssuesPayload,
   EventType,
+  INetworkScoresCalculator,
   IssueDetector,
   IssuePayload,
-  INetworkScoresCalculator,
+  Logger,
   StatsReportItem,
   WebRTCIssueDetectorConstructorParams,
   WebRTCStatsParsed,
   WIDWindow,
-  Logger,
 } from './types';
 import PeriodicWebRTCStatsReporter from './parser/PeriodicWebRTCStatsReporter';
 import DefaultNetworkScoresCalculator from './NetworkScoresCalculator';
@@ -21,7 +21,8 @@ import {
   InboundNetworkIssueDetector,
   NetworkMediaSyncIssueDetector,
   OutboundNetworkIssueDetector,
-  QualityLimitationsIssueDetector, VideoCodecMismatchDetector,
+  QualityLimitationsIssueDetector,
+  VideoCodecMismatchDetector,
 } from './detectors';
 import { CompositeRTCStatsParser, RTCStatsParser } from './parser';
 import createLogger from './utils/logger';
@@ -84,13 +85,24 @@ class WebRTCIssueDetector {
 
       this.calculateNetworkScores(report.stats);
     });
+
+    this.statsReporter.on(PeriodicWebRTCStatsReporter.STATS_REPORTS_PARSED, (data: { timeTaken: number }) => {
+      const payload = {
+        timeTaken: data.timeTaken,
+        ts: Date.now(),
+      };
+
+      this.eventEmitter.emit(EventType.StatsParsingFinished, payload);
+    });
   }
 
   public watchNewPeerConnections(): void {
     if (this.#running) {
       throw new Error('WebRTCIssueDetector is already started');
     }
 
+    this.logger.info('Start watching peer connections');
+
     this.#running = true;
     this.statsReporter.startReporting();
   }
@@ -100,6 +112,8 @@ class WebRTCIssueDetector {
       throw new Error('WebRTCIssueDetector is already stopped');
     }
 
+    this.logger.info('Stop watching peer connections');
+
     this.#running = false;
     this.statsReporter.stopReporting();
   }
@@ -143,6 +157,7 @@ class WebRTCIssueDetector {
 
   private wrapRTCPeerConnection(): void {
     if (!window.RTCPeerConnection) {
+      this.logger.warn('No RTCPeerConnection found in browser window. Skipping');
       return;
     }
 

src/WebRTCIssueEmitter.ts

@@ -4,13 +4,16 @@ import {
   EventPayload,
   IssueDetectorResult,
   NetworkScores,
+  StatsParsingFinishedPayload,
 } from './types';
 
 export declare interface WebRTCIssueEmitter {
   on(event: EventType.Issue, listener: (payload: IssueDetectorResult) => void): this;
   on(event: EventType.NetworkScoresUpdated, listener: (payload: NetworkScores) => void): this;
+  on(event: EventType.StatsParsingFinished, listener: (payload: StatsParsingFinishedPayload) => void): this;
   emit(event: EventType.Issue, payload: EventPayload): boolean;
   emit(event: EventType.NetworkScoresUpdated, payload: NetworkScores): boolean;
+  emit(event: EventType.StatsParsingFinished, payload: StatsParsingFinishedPayload): boolean;
 }
 
 export class WebRTCIssueEmitter extends EventEmitter {}

src/detectors/AvailableOutgoingBitrateIssueDetector.ts

@@ -1,15 +1,24 @@
 import {
-  IssueDetector,
   IssueDetectorResult,
   IssueReason,
   IssueType,
   WebRTCStatsParsed,
 } from '../types';
+import BaseIssueDetector, { BaseIssueDetectorParams } from './BaseIssueDetector';
 
-class AvailableOutgoingBitrateIssueDetector implements IssueDetector {
-  #availableOutgoingBitrateTreshold = 100000; // 100 kbit/s
+interface AvailableOutgoingBitrateIssueDetectorParams extends BaseIssueDetectorParams {
+  availableOutgoingBitrateThreshold?: number;
+}
+
+class AvailableOutgoingBitrateIssueDetector extends BaseIssueDetector {
+  readonly #availableOutgoingBitrateThreshold: number;
+
+  constructor(params: AvailableOutgoingBitrateIssueDetectorParams = {}) {
+    super(params);
+    this.#availableOutgoingBitrateThreshold = params.availableOutgoingBitrateThreshold ?? 100_000; // 100 KBit/s
+  }
 
-  detect(data: WebRTCStatsParsed): IssueDetectorResult {
+  performDetection(data: WebRTCStatsParsed): IssueDetectorResult {
     const issues: IssueDetectorResult = [];
     const { availableOutgoingBitrate } = data.connection;
     if (availableOutgoingBitrate === undefined) {
@@ -39,7 +48,7 @@ class AvailableOutgoingBitrateIssueDetector implements IssueDetector {
       return issues;
     }
 
-    if (videoStreamsTotalBitrate > 0 && availableOutgoingBitrate < this.#availableOutgoingBitrateTreshold) {
+    if (videoStreamsTotalBitrate > 0 && availableOutgoingBitrate < this.#availableOutgoingBitrateThreshold) {
       issues.push({
         type: IssueType.Network,
         reason: IssueReason.OutboundNetworkThroughput,

src/detectors/BaseIssueDetector.ts

@@ -0,0 +1,69 @@
+import { IssueDetector, IssueDetectorResult, WebRTCStatsParsed } from '../types';
+import { scheduleTask } from '../utils/tasks';
+import { CLEANUP_PREV_STATS_TTL_MS } from '../utils/constants';
+
+export interface PrevStatsCleanupPayload {
+  connectionId: string;
+  cleanupCallback?: () => void;
+}
+
+export interface BaseIssueDetectorParams {
+  statsCleanupTtlMs?: number;
+}
+
+abstract class BaseIssueDetector implements IssueDetector {
+  readonly #lastProcessedStats: Map<string, WebRTCStatsParsed | undefined>;
+
+  readonly #statsCleanupDelayMs: number;
+
+  constructor(params: BaseIssueDetectorParams = {}) {
+    this.#lastProcessedStats = new Map();
+    this.#statsCleanupDelayMs = params.statsCleanupTtlMs ?? CLEANUP_PREV_STATS_TTL_MS;
+  }
+
+  abstract performDetection(data: WebRTCStatsParsed): IssueDetectorResult;
+
+  detect(data: WebRTCStatsParsed): IssueDetectorResult {
+    const result = this.performDetection(data);
+
+    this.performPrevStatsCleanup({
+      connectionId: data.connection.id,
+    });
+
+    return result;
+  }
+
+  protected performPrevStatsCleanup(payload: PrevStatsCleanupPayload): void {
+    const { connectionId, cleanupCallback } = payload;
+
+    if (!this.#lastProcessedStats.has(connectionId)) {
+      return;
+    }
+
+    scheduleTask({
+      taskId: connectionId,
+      delayMs: this.#statsCleanupDelayMs,
+      callback: () => {
+        this.deleteLastProcessedStats(connectionId);
+
+        if (typeof cleanupCallback === 'function') {
+          cleanupCallback();
+        }
+      },
+    });
+  }
+
+  protected setLastProcessedStats(connectionId: string, parsedStats: WebRTCStatsParsed): void {
+    this.#lastProcessedStats.set(connectionId, parsedStats);
+  }
+
+  protected getLastProcessedStats(connectionId: string): WebRTCStatsParsed | undefined {
+    return this.#lastProcessedStats.get(connectionId);
+  }
+
+  private deleteLastProcessedStats(connectionId: string): void {
+    this.#lastProcessedStats.delete(connectionId);
+  }
+}
+
+export default BaseIssueDetector;

src/detectors/FramesDroppedIssueDetector.ts

@@ -1,26 +1,34 @@
 import {
-  IssueDetector,
   IssueDetectorResult,
   IssueReason,
   IssueType,
   WebRTCStatsParsed,
 } from '../types';
+import BaseIssueDetector, { BaseIssueDetectorParams } from './BaseIssueDetector';
 
-class FramesDroppedIssueDetector implements IssueDetector {
-  #lastProcessedStats: { [connectionId: string]: WebRTCStatsParsed } = {};
+interface FramesDroppedIssueDetectorParams extends BaseIssueDetectorParams {
+  framesDroppedThreshold?: number;
+}
+
+class FramesDroppedIssueDetector extends BaseIssueDetector {
+  readonly #framesDroppedThreshold: number;
 
-  #framesDroppedTreshold = 0.5;
+  constructor(params: FramesDroppedIssueDetectorParams = {}) {
+    super(params);
+    this.#framesDroppedThreshold = params.framesDroppedThreshold ?? 0.5;
+  }
 
-  detect(data: WebRTCStatsParsed): IssueDetectorResult {
+  performDetection(data: WebRTCStatsParsed): IssueDetectorResult {
+    const { connection: { id: connectionId } } = data;
     const issues = this.processData(data);
-    this.#lastProcessedStats[data.connection.id] = data;
+    this.setLastProcessedStats(connectionId, data);
     return issues;
   }
 
   private processData(data: WebRTCStatsParsed): IssueDetectorResult {
     const streamsWithDroppedFrames = data.video.inbound.filter((stats) => stats.framesDropped > 0);
     const issues: IssueDetectorResult = [];
-    const previousInboundRTPVideoStreamsStats = this.#lastProcessedStats[data.connection.id]?.video.inbound;
+    const previousInboundRTPVideoStreamsStats = this.getLastProcessedStats(data.connection.id)?.video.inbound;
 
     if (!previousInboundRTPVideoStreamsStats) {
       return issues;
@@ -46,7 +54,7 @@ class FramesDroppedIssueDetector implements IssueDetector {
       }
 
       const framesDropped = deltaFramesDropped / deltaFramesReceived;
-      if (framesDropped >= this.#framesDroppedTreshold) {
+      if (framesDropped >= this.#framesDroppedThreshold) {
         // more than half of the received frames were dropped
         issues.push({
           type: IssueType.CPU,

src/detectors/FramesEncodedSentIssueDetector.ts

@@ -1,26 +1,34 @@
 import {
-  IssueDetector,
   IssueDetectorResult,
   IssueReason,
   IssueType,
   WebRTCStatsParsed,
 } from '../types';
+import BaseIssueDetector, { BaseIssueDetectorParams } from './BaseIssueDetector';
 
-class FramesEncodedSentIssueDetector implements IssueDetector {
-  #lastProcessedStats: { [connectionId: string]: WebRTCStatsParsed } = {};
+interface FramesEncodedSentIssueDetectorParams extends BaseIssueDetectorParams {
+  missedFramesThreshold?: number;
+}
+
+class FramesEncodedSentIssueDetector extends BaseIssueDetector {
+  readonly #missedFramesThreshold: number;
 
-  #missedFramesTreshold = 0.15;
+  constructor(params: FramesEncodedSentIssueDetectorParams = {}) {
+    super(params);
+    this.#missedFramesThreshold = params.missedFramesThreshold ?? 0.15;
+  }
 
-  detect(data: WebRTCStatsParsed): IssueDetectorResult {
+  performDetection(data: WebRTCStatsParsed): IssueDetectorResult {
+    const { connection: { id: connectionId } } = data;
     const issues = this.processData(data);
-    this.#lastProcessedStats[data.connection.id] = data;
+    this.setLastProcessedStats(connectionId, data);
     return issues;
   }
 
   private processData(data: WebRTCStatsParsed): IssueDetectorResult {
     const streamsWithEncodedFrames = data.video.outbound.filter((stats) => stats.framesEncoded > 0);
     const issues: IssueDetectorResult = [];
-    const previousOutboundRTPVideoStreamsStats = this.#lastProcessedStats[data.connection.id]?.video.outbound;
+    const previousOutboundRTPVideoStreamsStats = this.getLastProcessedStats(data.connection.id)?.video.outbound;
 
     if (!previousOutboundRTPVideoStreamsStats) {
       return issues;
@@ -52,7 +60,7 @@ class FramesEncodedSentIssueDetector implements IssueDetector {
       }
 
       const missedFrames = deltaFramesSent / deltaFramesEncoded;
-      if (missedFrames >= this.#missedFramesTreshold) {
+      if (missedFrames >= this.#missedFramesThreshold) {
         issues.push({
           type: IssueType.Network,
           reason: IssueReason.OutboundNetworkThroughput,