Merge pull request #720 from microsoft/mn/addLogging

Additional logging to capture long task details

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.7.58",
+  "version": "0.7.59",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.58",
+  "version": "0.7.59",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <[email protected]>",
   "license": "MIT",

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.7.58",
+  "version": "0.7.59",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.7.58"
+    "clarity-js": "^0.7.59"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.58",
+  "version": "0.7.59",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.7.58",
-    "clarity-js": "^0.7.58",
-    "clarity-visualize": "^0.7.58"
+    "clarity-decode": "^0.7.59",
+    "clarity-js": "^0.7.59",
+    "clarity-visualize": "^0.7.59"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.0",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Microsoft Clarity Developer Tools",
   "description": "Clarity helps you understand how users are interacting with your website.",
-  "version": "0.7.58",
-  "version_name": "0.7.58",
+  "version": "0.7.59",
+  "version_name": "0.7.59",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.7.58",
+  "version": "0.7.59",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/src/core/history.ts

@@ -1,4 +1,5 @@
 import { BooleanFlag, Code, Constant, Metric, Setting, Severity } from "@clarity-types/data";
+import { FunctionNames } from "@clarity-types/performance";
 import * as clarity from "@src/clarity";
 import * as core from "@src/core"
 import { bind } from "@src/core/event";
@@ -55,6 +56,7 @@ function compute(): void {
         window.setTimeout(restart, Setting.RestartDelay);
     }
 }
+compute.dn = FunctionNames.HistoryCompute;
 
 function restart(): void {
     clarity.start();

packages/clarity-js/src/core/index.ts

@@ -1,5 +1,6 @@
 import { Config } from "@clarity-types/core";
 import { Constant } from "@clarity-types/data";
+import { FunctionNames } from "@clarity-types/performance";
 import configuration from "@src/core/config";
 import * as event from "@src/core/event";
 import * as history from "@src/core/history";
@@ -79,3 +80,4 @@ function restart(): void {
     clarity.start();
     custom.event(Constant.Clarity, Constant.Restart);
 }
+restart.dn = FunctionNames.Restart;

packages/clarity-js/src/core/measure.ts

@@ -1,6 +1,7 @@
-import { Metric } from "@clarity-types/data";
+import { Code, Metric, Severity } from "@clarity-types/data";
 import { report } from "@src/core/report";
 import * as metric from "@src/data/metric";
+import * as internal from "@src/diagnostic/internal";
 import config from "./config";
 
 // tslint:disable-next-line: ban-types
@@ -13,6 +14,7 @@ export default function (method: Function): Function {
         if (duration > config.longTask) {
             metric.count(Metric.LongTaskCount);
             metric.max(Metric.ThreadBlockedTime, duration);
+            internal.log(Code.FunctionExecutionTime, Severity.Info, `${method.dn || method.name}-${duration}`);
         }
     };
 }

packages/clarity-js/src/diagnostic/index.ts

@@ -1,3 +1,4 @@
+import { FunctionNames } from "@clarity-types/performance";
 import * as fraud from "@src/diagnostic/fraud";
 import * as internal from "@src/diagnostic/internal";
 import * as script from "@src/diagnostic/script";
@@ -7,6 +8,7 @@ export function start(): void {
     script.start();
     internal.start();
 }
+start.dn = FunctionNames.DiagnosticStart;
 
 export function stop(): void {
     internal.stop();

packages/clarity-js/src/diagnostic/script.ts

@@ -1,5 +1,6 @@
 import { Event, Setting } from "@clarity-types/data";
 import { ScriptErrorData } from "@clarity-types/diagnostic";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import encode from "./encode";
 
@@ -33,3 +34,4 @@ function handler(error: ErrorEvent): boolean {
 
     return true;
 }
+handler.dn = FunctionNames.ScriptHandler;

packages/clarity-js/src/interaction/change.ts

@@ -1,5 +1,6 @@
 import { Constant, Event, Setting } from "@clarity-types/data";
 import { ChangeState } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import config from "@src/core/config";
 import { bind } from "@src/core/event";
 import hash from "@src/core/hash";
@@ -28,6 +29,7 @@ function recompute(evt: UIEvent): void {
         schedule(encode.bind(this, Event.Change));
     }    
 }
+recompute.dn = FunctionNames.ChangeRecompute;
 
 export function reset(): void {
     state = [];

packages/clarity-js/src/interaction/click.ts

@@ -1,6 +1,7 @@
 import { BooleanFlag, Constant, Event, Setting } from "@clarity-types/data";
 import { BrowsingContext, ClickState } from "@clarity-types/interaction";
 import { Box } from "@clarity-types/layout";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -72,6 +73,7 @@ function handler(event: Event, root: Node, evt: MouseEvent): void {
         schedule(encode.bind(this, event));
     }
 }
+handler.dn = FunctionNames.ClickHandler;
 
 function link(node: Node): HTMLAnchorElement {
     while (node && node !== document) {

packages/clarity-js/src/interaction/clipboard.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { Clipboard, ClipboardState } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -22,6 +23,7 @@ function recompute(action: Clipboard, evt: UIEvent): void {
     state.push({ time: time(evt), event: Event.Clipboard, data: { target: target(evt), action } });
     schedule(encode.bind(this, Event.Clipboard));
 }
+recompute.dn = FunctionNames.ClipboardRecompute;
 
 export function reset(): void {
     state = [];

packages/clarity-js/src/interaction/index.ts

@@ -1,3 +1,4 @@
+import { FunctionNames } from "@clarity-types/performance";
 import * as change from "@src/interaction/change";
 import * as click from "@src/interaction/click";
 import * as clipboard from "@src/interaction/clipboard";
@@ -25,6 +26,7 @@ export function start(): void {
     submit.start();
     unload.start();
 }
+start.dn = FunctionNames.InteractionStart;
 
 export function stop(): void {
     timeline.stop();

packages/clarity-js/src/interaction/input.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { InputData, InputState, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -43,6 +44,7 @@ function recompute(evt: UIEvent): void {
         timeout = setTimeout(process, Setting.InputLookAhead, Event.Input);
     }
 }
+recompute.dn = FunctionNames.InputRecompute;
 
 function process(event: Event): void {
     schedule(encode.bind(this, event));

packages/clarity-js/src/interaction/pointer.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { PointerState, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -11,7 +12,8 @@ import encode from "./encode";
 
 export let state: PointerState[] = [];
 let timeout: number = null;
-let activeTouchPointId = 0;
+let hasPrimaryTouch = false;
+let primaryTouchId = 0;
 const activeTouchPointIds = new Set<number>();
 
 export function start(): void {
@@ -45,6 +47,7 @@ function mouse(event: Event, root: Node, evt: MouseEvent): void {
     // Check for null values before processing this event
     if (x !== null && y !== null) { handler({ time: time(evt), event, data: { target: target(evt), x, y } }); }
 }
+mouse.dn = FunctionNames.PointerMouse;
 
 function touch(event: Event, root: Node, evt: TouchEvent): void {
     let frame = iframe(root);
@@ -67,7 +70,9 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
             switch(event) {
                 case Event.TouchStart:
                     if (activeTouchPointIds.size === 0) {
-                        activeTouchPointId = id;
+                        // Track presence of primary touch separately to handle scenarios when same id is repeated
+                        hasPrimaryTouch = true;  
+                        primaryTouchId = id;
                     }
                     activeTouchPointIds.add(id);
                     break;
@@ -76,13 +81,19 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
                     activeTouchPointIds.delete(id);
                     break;
             }
-            const isPrimary = activeTouchPointId === id;
+            const isPrimary = hasPrimaryTouch && primaryTouchId === id;
 
             // Check for null values before processing this event
             if (x !== null && y !== null) { handler({ time: t, event, data: { target: target(evt), x, y, id, isPrimary } }); }
+
+            // Reset primary touch point id once touch event ends
+            if (event === Event.TouchCancel || event === Event.TouchEnd) {
+                if (primaryTouchId === id) { hasPrimaryTouch = false; }
+            }
         }
     }
 }
+touch.dn = FunctionNames.PointerTouch;
 
 function handler(current: PointerState): void {
     switch (current.event) {

packages/clarity-js/src/interaction/resize.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { ResizeData, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import { bind } from "@src/core/event";
 import encode from "./encode";
@@ -31,6 +32,7 @@ function recompute(): void {
         initialStateLogged = true;
     }
 }
+recompute.dn = FunctionNames.ResizeRecompute;
 
 function process(event: Event): void {
     schedule(encode.bind(this, event));

packages/clarity-js/src/interaction/scroll.ts

@@ -1,5 +1,6 @@
 import { Constant, Dimension, Event } from "@clarity-types/data";
 import { ScrollState, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -68,6 +69,7 @@ function recompute(event: UIEvent = null): void {
     clearTimeout(timeout);
     timeout = setTimeout(process, Setting.LookAhead, Event.Scroll);
 }
+recompute.dn = FunctionNames.ScrollRecompute;
 
 function getPositionNode(x: number, y: number): Node {
     let node: Node;
@@ -112,6 +114,7 @@ export function compute(): void {
         dimension.log(Dimension.InitialScrollBottom, bottom?.hash?.join(Constant.Dot));
     }
 }
+compute.dn = FunctionNames.ScrollCompute;
 
 export function stop(): void {
     clearTimeout(timeout);

packages/clarity-js/src/interaction/selection.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { SelectionData, Setting } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
@@ -50,6 +51,7 @@ function recompute(root: Node): void {
     clearTimeout(timeout);
     timeout = setTimeout(process, Setting.LookAhead, Event.Selection);
 }
+recompute.dn = FunctionNames.SelectionRecompute;
 
 function process(event: Event): void {
     schedule(encode.bind(this, event));

packages/clarity-js/src/interaction/submit.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { SubmitState } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
@@ -20,6 +21,7 @@ function recompute(evt: UIEvent): void {
     state.push({ time: time(evt), event: Event.Submit, data: { target: target(evt) } });
     schedule(encode.bind(this, Event.Submit));
 }
+recompute.dn = FunctionNames.SubmitRecompute;
 
 export function reset(): void {
     state = [];

packages/clarity-js/src/interaction/unload.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { UnloadData } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import * as clarity from "@src/clarity";
 import { bind } from "@src/core/event";
 import { time } from "@src/core/time";
@@ -16,6 +17,7 @@ function recompute(evt: UIEvent): void {
     encode(Event.Unload, time(evt));
     clarity.stop();
 }
+recompute.dn = FunctionNames.UnloadRecompute;
 
 export function reset(): void {
     data = null;

packages/clarity-js/src/interaction/visibility.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { VisibilityData } from "@clarity-types/interaction";
+import { FunctionNames } from "@clarity-types/performance";
 import { bind } from "@src/core/event";
 import { time } from "@src/core/time";
 import encode from "./encode";
@@ -15,6 +16,7 @@ function recompute(evt: UIEvent = null): void {
     data = { visible: "visibilityState" in document ? document.visibilityState : "default" };
     encode(Event.Visibility, time(evt));
 }
+recompute.dn = FunctionNames.VisibilityRecompute;
 
 export function reset(): void {
     data = null;

packages/clarity-js/src/layout/document.ts

@@ -1,5 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { DocumentData } from "@clarity-types/layout";
+import { FunctionNames } from "@clarity-types/performance";
 import encode from "@src/layout/encode";
 
 export let data: DocumentData;
@@ -40,6 +41,7 @@ export function compute(): void {
         encode(Event.Document);
     }
 }
+compute.dn = FunctionNames.DocumentCompute;
 
 export function stop(): void {
     reset();

packages/clarity-js/src/layout/index.ts

@@ -1,3 +1,4 @@
+import { FunctionNames } from "@clarity-types/performance";
 import * as discover from "@src/layout/discover";
 import * as doc from "@src/layout/document";
 import * as dom from "@src/layout/dom";
@@ -28,6 +29,7 @@ export function start(): void {
     style.start();
     animation.start();
 }
+start.dn = FunctionNames.LayoutStart;
 
 export function stop(): void {
     region.stop();