clarity-js 0.8.13-beta → 0.8.15

package/src/core/report.ts

@@ -13,13 +13,9 @@ export function report(e: Error): Error {
     if (history && history.indexOf(e.message) === -1) {
         const url = config.report;
         if (url && url.length > 0 && data) {
-            const payload: Report = { v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum };
-            if (e.message) {
-                payload.m = e.message;
-            }
-            if (e.stack) {
-                payload.e = e.stack;
-            }
+            let payload: Report = {v: data.version, p: data.projectId, u: data.userId, s: data.sessionId, n: data.pageNum};
+            if (e.message) { payload.m = e.message; }
+            if (e.stack) { payload.e = e.stack; }
             // Using POST request instead of a GET request (img-src) to not violate existing CSP rules
             // Since, Clarity already uses XHR to upload data, we stick with similar POST mechanism for reporting too
             let xhr = new XMLHttpRequest();

package/src/core/scrub.ts

@@ -41,7 +41,13 @@ export function text(value: string, hint: string, privacy: Privacy, mangle: bool
                     case "srcset":
                     case "title":
                     case "alt":
-                        return privacy === Privacy.TextImage ? Data.Constant.Empty : value;
+                        if (privacy === Privacy.TextImage) {
+                            if (hint === 'src' && value?.startsWith('blob:')) {
+                                return 'blob:';
+                            }
+                            return Data.Constant.Empty;
+                        }
+                        return value;
                     case "value":
                     case "click":
                     case "input":

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.8.13-beta";
+let version = "0.8.15";
 export default version;

package/src/data/metadata.ts

@@ -9,6 +9,7 @@ import * as dimension from "@src/data/dimension";
 import * as metric from "@src/data/metric";
 import { set } from "@src/data/variable";
 import * as trackConsent from "@src/data/consent";
+import { Constant as CoreConstant } from "@clarity-types/core";
 
 export let data: Metadata = null;
 export let callbacks: MetadataCallbackOptions[] = [];
@@ -54,6 +55,13 @@ export function start(): void {
   metric.max(Metric.Playback, BooleanFlag.False);
   metric.max(Metric.Electron, electron);
 
+  const zone = (window as any)?.[CoreConstant.Zone];
+  const isZone = zone && CoreConstant.Symbol in zone;
+
+  if (isZone) {
+    metric.max(Metric.AngularZone, BooleanFlag.True);
+  }
+
   // Capture navigator specific dimensions
   if (navigator) {
     dimension.log(Dimension.Language, navigator.language);

package/src/interaction/pointer.ts

@@ -124,12 +124,12 @@ export function reset(): void {
 }
 
 function similar(last: PointerState, current: PointerState): boolean {
-    const dx = last.data.x - current.data.x;
-    const dy = last.data.y - current.data.y;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-    const gap = current.time - last.time;
-    const match = current.data.target === last.data.target;
-    const sameId = current.data.id !== undefined ? current.data.id === last.data.id : true;
+    let dx = last.data.x - current.data.x;
+    let dy = last.data.y - current.data.y;
+    let distance = Math.sqrt(dx * dx + dy * dy);
+    let gap = current.time - last.time;
+    let match = current.data.target === last.data.target;
+    let sameId = current.data.id !== undefined ? current.data.id === last.data.id : true;
     return current.event === last.event && match && distance < Setting.Distance && gap < Setting.PointerInterval && sameId;
 }
 

package/src/interaction/scroll.ts

@@ -6,10 +6,10 @@ import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import throttle from "@src/core/throttle";
-import * as dimension from "@src/data/dimension";
 import { iframe } from "@src/layout/dom";
 import { target, metadata } from "@src/layout/target";
 import encode from "./encode";
+import * as dimension from "@src/data/dimension";
 
 export let state: ScrollState[] = [];
 let initialTop: Node = null;
@@ -22,8 +22,8 @@ export function start(): void {
 }
 
 export function observe(root: Node): void {
-    const frame = iframe(root);
-    const node = frame ? frame.contentWindow : root === document ? window : root;
+    let frame = iframe(root);
+    let node = frame ? frame.contentWindow : (root === document ? window : root);
     bind(node, "scroll", throttledRecompute, true);
 }
 
@@ -102,9 +102,9 @@ function process(event: Event): void {
 }
 
 function similar(last: ScrollState, current: ScrollState): boolean {
-    const dx = last.data.x - current.data.x;
-    const dy = last.data.y - current.data.y;
-    return dx * dx + dy * dy < Setting.Distance * Setting.Distance && current.time - last.time < Setting.ScrollInterval;
+    let dx = last.data.x - current.data.x;
+    let dy = last.data.y - current.data.y;
+    return (dx * dx + dy * dy < Setting.Distance * Setting.Distance) && (current.time - last.time < Setting.ScrollInterval);
 }
 
 export function compute(): void {

package/src/layout/region.ts

@@ -90,12 +90,9 @@ function handler(entries: IntersectionObserverEntry[]): void {
         // like search box - one for desktop, and another for mobile. In those cases, CSS media queries determine which one should be visible.
         // Also, if these regions ever become non-zero width or height (through AJAX, user action or orientation change) - we will automatically start monitoring them from that point onwards
         if (regionMap.has(target) && rect.width + rect.height > 0 && viewport && viewport.width > 0 && viewport.height > 0) {
-            const id = target ? dom.getId(target) : null;
-            const data =
-                id in regions
-                    ? regions[id]
-                    : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
-
+            let id = target ? dom.getId(target) : null;
+            let data = id in regions ? regions[id] : { id, name: regionMap.get(target), interaction: InteractionState.None, visibility: RegionVisibility.Rendered };
+            
             // For regions that have relatively smaller area, we look at intersection ratio and see the overlap relative to element's area
             // However, for larger regions, area of regions could be bigger than viewport and therefore comparison is relative to visible area
             let viewportRatio = overlap ? (overlap.width * overlap.height * 1.0) / (viewport.width * viewport.height) : 0;

package/src/layout/style.ts

@@ -1,4 +1,4 @@
-import { Event } from "@clarity-types/data";
+import { Event, Metric } from "@clarity-types/data";
 import { StyleSheetOperation, StyleSheetState } from "@clarity-types/layout";
 import { time } from "@src/core/time";
 import { shortid } from "@src/data/metadata";

package/types/data.d.ts

@@ -131,7 +131,8 @@ export const enum Metric {
      * @deprecated Move it to dimension as it'll report only last value
      */
     InteractionNextPaint = 37,
-    HistoryClear = 38
+    HistoryClear = 38,
+    AngularZone = 39,
 }
 
 export const enum Dimension {

package/types/interaction.d.ts

@@ -18,7 +18,6 @@ export const enum Setting {
     ScrollInterval = 50, // 25 milliseconds
     PointerInterval = 25, // 25 milliseconds
     Throttle = 25, // 25 milliseconds
-    // biome-ignore lint/style/useLiteralEnumMembers: Time.Second is a const enum, it is compiled to a number
     TimelineSpan = 2 * Time.Second, // 2 seconds
 }