performance monitoring on frontend in dev environment

src/public/app/widgets/component.js

@@ -13,12 +13,17 @@ import utils from '../services/utils.js';
  */
 export default class Component {
     constructor() {
-        this.componentId = `comp-` + utils.randomString(8);
+        this.componentId = `comp-` + this.sanitizedClassName + '-' + utils.randomString(8);
         /** @type Component[] */
         this.children = [];
         this.initialized = Promise.resolve();
     }
 
+    get sanitizedClassName() {
+        // webpack mangles names and sometimes uses unsafe characters
+        return this.constructor.name.replace(/[^A-Z0-9]/ig, "_");
+    }
+
     setParent(parent) {
         /** @type Component */
         this.parent = parent;
@@ -76,7 +81,17 @@ export default class Component {
             return false;
         }
 
-        await fun.call(this, data);
+        const startTime = Date.now();
+
+        const promise = fun.call(this, data);
+
+        const took = Date.now() - startTime;
+
+        if (glob.isDev && took > 20) { // measuring only sync handlers
+            console.log(`Call to ${fun.name} in ${this.componentId} took ${took}ms`);
+        }
+
+        await promise;
 
         return true;
     }

src/services/sql.js

@@ -197,8 +197,20 @@ function executeScript(query) {
 
 function wrap(query, func) {
     const startTimestamp = Date.now();
+    let result;
 
-    const result = func(stmt(query));
+    try {
+        result = func(stmt(query));
+    }
+    catch (e) {
+        if (e.message.includes("The database connection is not open")) {
+            // this often happens on killing the app which puts these alerts in front of user
+            // in these cases error should be simply ignored.
+            console.log(e.message);
+
+            return null
+        }
+    }
 
     const milliseconds = Date.now() - startTimestamp;