chore: add performance metrics

lib/constants/performance-marks.ts

@@ -0,0 +1,8 @@
+export default {
+    JS_EXEC: 'js exec',
+    DBS_LOADED: 'dbs loaded',
+    DBS_MERGED: 'dbs merged',
+    PLUGINS_LOADED: 'plugins loaded',
+    DB_EXTRACTED_ROWS: 'db extracted rows',
+    FULLY_LOADED: 'fully loaded'
+} as const;

lib/static/modules/actions.js

@@ -10,6 +10,7 @@ import {getHttpErrorMessage} from './utils';
 import {fetchDataFromDatabases, mergeDatabases, connectToDatabase, getMainDatabaseUrl, getSuitesTableRows} from '../../db-utils/client';
 import {setFilteredBrowsers} from './query-params';
 import plugins from './plugins';
+import performanceMarks from '../../constants/performance-marks';
 
 export const createNotification = (id, status, message, props = {}) => {
     const notificationProps = {
@@ -31,14 +32,19 @@ export const dismissNotification = dismissNotify;
 
 export const initGuiReport = () => {
     return async (dispatch) => {
+        performance?.mark?.(performanceMarks.JS_EXEC);
         try {
             const appState = await axios.get('/init');
 
             const mainDatabaseUrl = getMainDatabaseUrl();
             const db = await connectToDatabase(mainDatabaseUrl.href);
 
+            performance?.mark?.(performanceMarks.DBS_LOADED);
+
             await plugins.loadAll(appState.data.config);
 
+            performance?.mark?.(performanceMarks.PLUGINS_LOADED);
+
             dispatch({
                 type: actionNames.INIT_GUI_REPORT,
                 payload: {...appState.data, db}
@@ -58,6 +64,7 @@ export const initGuiReport = () => {
 
 export const initStaticReport = () => {
     return async dispatch => {
+        performance?.mark?.(performanceMarks.JS_EXEC);
         const dataFromStaticFile = window.data || {};
         let fetchDbDetails = [];
         let db = null;
@@ -66,17 +73,23 @@ export const initStaticReport = () => {
             const mainDatabaseUrls = new URL('databaseUrls.json', window.location.href);
             const fetchDbResponses = await fetchDataFromDatabases([mainDatabaseUrls.href]);
 
+            performance?.mark?.(performanceMarks.DBS_LOADED);
+
             fetchDbDetails = fetchDbResponses.map(({url, status, data}) => ({url, status, success: !!data}));
 
             const dataForDbs = fetchDbResponses.map(({data}) => data).filter(data => data);
 
             db = await mergeDatabases(dataForDbs);
+
+            performance?.mark?.(performanceMarks.DBS_MERGED);
         } catch (e) {
             dispatch(createNotificationError('initStaticReport', e));
         }
 
         await plugins.loadAll(dataFromStaticFile.config);
 
+        performance?.mark?.(performanceMarks.PLUGINS_LOADED);
+
         if (!db || isEmpty(fetchDbDetails)) {
             return dispatch({
                 type: actionNames.INIT_STATIC_REPORT,
@@ -86,6 +99,9 @@ export const initStaticReport = () => {
 
         const testsTreeBuilder = StaticTestsTreeBuilder.create();
         const suitesRows = getSuitesTableRows(db);
+
+        performance?.mark?.(performanceMarks.DB_EXTRACTED_ROWS);
+
         const {tree, stats, skips, browsers} = testsTreeBuilder.build(suitesRows);
 
         dispatch({

lib/static/modules/middlewares/metrika.js

@@ -1,9 +1,11 @@
-import {get} from 'lodash';
+import {get, isEmpty} from 'lodash';
 import actionNames from '../action-names';
 
 import {measurePerformance} from '../web-vitals';
+import performanceMarks from '../../../constants/performance-marks';
 
 let metrika;
+let reportFullyLoaded = false;
 
 export default metrikaClass => store => next => action => {
     switch (action.type) {
@@ -58,6 +60,28 @@ export default metrikaClass => store => next => action => {
             return next(action);
         }
 
+        case actionNames.BROWSERS_SELECTED: {
+            execOnMetrikaEnabled(() => {
+                sendCounterId(action.type);
+            });
+
+            const result = next(action);
+
+            if (!reportFullyLoaded) {
+                reportFullyLoaded = true;
+
+                performance?.mark?.(performanceMarks.FULLY_LOADED);
+
+                const marks = extractPerformanceMarks();
+
+                if (metrika && !isEmpty(marks)) {
+                    metrika.sendVisitParams(marks);
+                }
+            }
+
+            return result;
+        }
+
         case actionNames.RUN_ALL_TESTS:
         case actionNames.RUN_FAILED_TESTS:
         case actionNames.RETRY_SUITE:
@@ -75,7 +99,6 @@ export default metrikaClass => store => next => action => {
         case actionNames.VIEW_SWITCH_DIFF:
         case actionNames.VIEW_SWIPE_DIFF:
         case actionNames.VIEW_ONION_SKIN_DIFF:
-        case actionNames.BROWSERS_SELECTED:
         case actionNames.VIEW_UPDATE_FILTER_BY_NAME:
         case actionNames.VIEW_SET_STRICT_MATCH_FILTER:
         case actionNames.RUN_CUSTOM_GUI_ACTION:
@@ -119,3 +142,13 @@ function execOnMetrikaEnabled(cb) {
 function sendCounterId(counterId) {
     metrika.sendVisitParams({counterId});
 }
+
+function extractPerformanceMarks() {
+    const marks = performance?.getEntriesByType?.('mark') || [];
+
+    return marks.reduce((acc, {name, startTime}) => {
+        acc[name] = Math.round(startTime);
+
+        return acc;
+    }, {});
+}

test/unit/lib/static/modules/actions.js

@@ -7,6 +7,9 @@ import {StaticTestsTreeBuilder} from 'lib/tests-tree-builder/static';
 import {LOCAL_DATABASE_NAME} from 'lib/constants/database';
 import {DiffModes} from 'lib/constants/diff-modes';
 
+// eslint-disable-next-line
+globalThis.performance = globalThis.performance; // node v14 stub
+
 describe('lib/static/modules/actions', () => {
     const sandbox = sinon.sandbox.create();
     let dispatch, actions, notify, getSuitesTableRows, getMainDatabaseUrl, connectToDatabaseStub, pluginsStub;

test/unit/lib/static/modules/middlewares/metrika.js

@@ -2,6 +2,9 @@ import YandexMetrika from 'lib/static/modules/yandex-metrika';
 import actionNames from 'lib/static/modules/action-names';
 import webVitals from 'lib/static/modules/web-vitals';
 
+// eslint-disable-next-line
+globalThis.performance = globalThis.performance; // node v14 stub
+
 describe('lib/static/modules/middlewares/metrika', () => {
     const sandbox = sinon.sandbox.create();
     let next, metrikaMiddleware;