From a224b7c5853a666c12bd61728f66c9cc85f3a0ff Mon Sep 17 00:00:00 2001 From: Abdelarhman Magdy Date: Sun, 4 Aug 2024 14:03:04 +0300 Subject: [PATCH] Supporting INP metric (#590) * Supporting INP metric * updating version * updating version * revert unintended change --- lerna.json | 2 +- package.json | 2 +- packages/clarity-decode/package.json | 4 ++-- packages/clarity-devtools/package.json | 8 ++++---- packages/clarity-devtools/static/manifest.json | 4 ++-- packages/clarity-js/package.json | 2 +- packages/clarity-js/src/core/version.ts | 2 +- packages/clarity-js/src/performance/observer.ts | 5 ++++- packages/clarity-js/types/data.d.ts | 4 +++- packages/clarity-visualize/package.json | 4 ++-- packages/clarity-visualize/src/data.ts | 3 ++- 11 files changed, 23 insertions(+), 17 deletions(-) diff --git a/lerna.json b/lerna.json index 9698d038..315e3f58 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "packages/*" ], - "version": "0.7.42", + "version": "0.7.43", "npmClient": "yarn", "useWorkspaces": true } diff --git a/package.json b/package.json index 91e82cf5..2e26af8d 100644 --- a/package.json +++ b/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 ", "license": "MIT", diff --git a/packages/clarity-decode/package.json b/packages/clarity-decode/package.json index 73d0ffb7..7feb1288 100644 --- a/packages/clarity-decode/package.json +++ b/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", diff --git a/packages/clarity-devtools/package.json b/packages/clarity-devtools/package.json index 6665f36b..d8f50ad2 100644 --- a/packages/clarity-devtools/package.json +++ b/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", diff --git a/packages/clarity-devtools/static/manifest.json b/packages/clarity-devtools/static/manifest.json index 99910903..22bbf449 100644 --- a/packages/clarity-devtools/static/manifest.json +++ b/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": { diff --git a/packages/clarity-js/package.json b/packages/clarity-js/package.json index 90ae86c3..f6e77255 100644 --- a/packages/clarity-js/package.json +++ b/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", diff --git a/packages/clarity-js/src/core/version.ts b/packages/clarity-js/src/core/version.ts index e464b193..0776dabd 100644 --- a/packages/clarity-js/src/core/version.ts +++ b/packages/clarity-js/src/core/version.ts @@ -1,2 +1,2 @@ -let version = "0.7.42"; +let version = "0.7.43"; export default version; diff --git a/packages/clarity-js/src/performance/observer.ts b/packages/clarity-js/src/performance/observer.ts index bc31e84b..d9ef0dd1 100644 --- a/packages/clarity-js/src/performance/observer.ts +++ b/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); } diff --git a/packages/clarity-js/types/data.d.ts b/packages/clarity-js/types/data.d.ts index aa11d1b5..caf370dd 100644 --- a/packages/clarity-js/types/data.d.ts +++ b/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", diff --git a/packages/clarity-visualize/package.json b/packages/clarity-visualize/package.json index fda69808..44f3a07a 100644 --- a/packages/clarity-visualize/package.json +++ b/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", diff --git a/packages/clarity-visualize/src/data.ts b/packages/clarity-visualize/src/data.ts index 1b086892..c7bb1084 100644 --- a/packages/clarity-visualize/src/data.ts +++ b/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 => {