Supporting INP metric (#590)

* Supporting INP metric

* updating version

* updating version

* revert unintended change

lerna.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.7.42",
+  "version": "0.7.43",
   "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.42",
+  "version": "0.7.43",
   "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.42"
+    "clarity-js": "^0.7.43"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.7.42",
+  "version": "0.7.43",
   "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.42",
-    "clarity-js": "^0.7.42",
-    "clarity-visualize": "^0.7.42"
+    "clarity-decode": "^0.7.43",
+    "clarity-js": "^0.7.43",
+    "clarity-visualize": "^0.7.43"
   },
   "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.42",
-  "version_name": "0.7.42",
+  "version": "0.7.43",
+  "version_name": "0.7.43",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

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

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

@@ -1,2 +1,2 @@
-let version = "0.7.42";
+let version = "0.7.43";
 export default version;

packages/clarity-js/src/performance/observer.ts

@@ -9,7 +9,7 @@ import * as internal from "@src/diagnostic/internal";
 import * as navigation from "@src/performance/navigation";
 
 let observer: PerformanceObserver;
-const types: string[] = [Constant.Navigation, Constant.Resource, Constant.LongTask, Constant.FID, Constant.CLS, Constant.LCP];
+const types: string[] = [Constant.Navigation, Constant.Resource, Constant.LongTask, Constant.FID, Constant.CLS, Constant.LCP, Constant.PerformanceEventTiming];
 
 export function start(): void {
     // Capture connection properties, if available
@@ -72,6 +72,9 @@ function process(entries: PerformanceEntryList): void {
             case Constant.FID:
                 if (visible) { metric.max(Metric.FirstInputDelay, entry["processingStart"] - entry.startTime); }
                 break;
+            case Constant.PerformanceEventTiming:
+                if (visible) { metric.max(Metric.InteractionNextPaint, entry.duration); }
+                break;
             case Constant.CLS:
                 // Scale the value to avoid sending back floating point number
                 if (visible && !entry["hadRecentInput"]) { metric.sum(Metric.CumulativeLayoutShift, entry["value"] * 1000); }

packages/clarity-js/types/data.d.ts

@@ -111,7 +111,8 @@ export const enum Metric {
     HardwareConcurrency = 33,
     DeviceMemory = 34,
     Electron = 35,
-    ConstructedStyles = 36
+    ConstructedStyles = 36,
+    InteractionNextPaint = 37,
 }
 
 export const enum Dimension {
@@ -302,6 +303,7 @@ export const enum Constant {
     FID = "first-input",
     CLS = "layout-shift",
     LCP = "largest-contentful-paint",
+    PerformanceEventTiming = "event",
     HTTPS = "https://",
     CompressionStream = "CompressionStream",
     Accept = "Accept",

packages/clarity-visualize/package.json

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

packages/clarity-visualize/src/data.ts

@@ -22,7 +22,8 @@ export class DataHelper {
         [Data.Metric.LongTaskCount]: { name: "Long Tasks" },
         [Data.Metric.CartTotal]: { name: "Cart Total", unit: "html-price" },
         [Data.Metric.ProductPrice]: { name: "Product Price", unit: "ld-price" },
-        [Data.Metric.ThreadBlockedTime]: { name: "Thread Blocked", unit: "ms" }
+        [Data.Metric.ThreadBlockedTime]: { name: "Thread Blocked", unit: "ms" },
+        [Data.Metric.InteractionNextPaint]: { name: "INP", unit: "ms" }
     };
 
     public reset = (): void => {