clarity-js 0.6.33 → 0.6.36

package/src/layout/encode.ts

@@ -1,5 +1,5 @@
 import { Privacy, Task, Timer } from "@clarity-types/core";
-import { Event, Token } from "@clarity-types/data";
+import { Event, Setting, Token } from "@clarity-types/data";
 import { Constant, NodeInfo, NodeValue } from "@clarity-types/layout";
 import config from "@src/core/config";
 import scrub from "@src/core/scrub";
@@ -8,7 +8,7 @@ import { time } from "@src/core/time";
 import tokenize from "@src/data/token";
 import * as baseline from "@src/data/baseline";
 import { queue } from "@src/data/upload";
-import * as box from "./box";
+import * as fraud from "@src/diagnostic/fraud";
 import * as doc from "./document";
 import * as dom from "./dom";
 import * as region from "./region";
@@ -35,16 +35,6 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
             }
             region.reset();
             break;
-        case Event.Box:
-            let b = box.data;
-            for (let entry of b) {
-                tokens.push(entry.id);
-                tokens.push(entry.width);
-                tokens.push(entry.height);
-            }
-            box.reset();
-            queue(tokens);
-            break;
         case Event.Discover:
         case Event.Mutation:
             // Check if we are operating within the context of the current page
@@ -62,18 +52,17 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
                     let privacy = value.metadata.privacy;
                     let mangle = shouldMangle(value);
                     let keys = active ? ["tag", "attributes", "value"] : ["tag"];
-                    box.compute(value.id);
                     for (let key of keys) {
                         if (data[key]) {
                             switch (key) {
                                 case "tag":
-                                    let size = value.metadata.size;
+                                    let box = size(value);
                                     let factor = mangle ? -1 : 1;
                                     tokens.push(value.id * factor);
                                     if (value.parent && active) { tokens.push(value.parent); }
                                     if (value.previous && active) { tokens.push(value.previous); }
                                     tokens.push(suspend ? Constant.SuspendMutationTag : data[key]);
-                                    if (size && size.length === 2) { tokens.push(`${Constant.Box}${str(size[0])}.${str(size[1])}`); }
+                                    if (box && box.length === 2) { tokens.push(`${Constant.Box}${str(box[0])}.${str(box[1])}`); }
                                     break;
                                 case "attributes":
                                     for (let attr in data[key]) {
@@ -83,6 +72,7 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
                                     }
                                     break;
                                 case "value":
+                                    fraud.check(value.metadata.fraud, value.id, data[key]);
                                     tokens.push(scrub(data[key], data.tag, privacy, mangle));
                                     break;
                             }
@@ -101,6 +91,16 @@ function shouldMangle(value: NodeValue): boolean {
     return value.data.tag === Constant.TextTag && !(privacy === Privacy.None || privacy === Privacy.Sensitive);
 }
 
+function size(value: NodeValue): number[] {
+    if (value.metadata.size !== null && value.metadata.size.length === 0) {
+        let img = dom.getNode(value.id) as HTMLImageElement;
+        if (img) {
+            return [Math.floor(img.offsetWidth * Setting.BoxPrecision), Math.floor(img.offsetHeight * Setting.BoxPrecision)];
+        }
+    }
+    return value.metadata.size;
+}
+
 function str(input: number): string {
     return input.toString(36);
 }

package/src/layout/index.ts

@@ -1,4 +1,3 @@
-import * as box from "@src/layout/box";
 import * as discover from "@src/layout/discover";
 import * as doc from "@src/layout/document";
 import * as dom from "@src/layout/dom";
@@ -13,13 +12,11 @@ export function start(): void {
     dom.start();
     mutation.start();
     discover.start();
-    box.start();
 }
 
 export function stop(): void {
     region.stop();
     dom.stop();
     mutation.stop();
-    box.stop();
     doc.end();
 }

package/src/layout/mutation.ts

@@ -2,6 +2,7 @@ import { Priority, Task, Timer } from "@clarity-types/core";
 import { Code, Event, Metric, Severity } from "@clarity-types/data";
 import { Constant, MutationHistory, MutationQueue, Setting, Source } from "@clarity-types/layout";
 import api from "@src/core/api";
+import * as core from "@src/core";
 import { bind } from "@src/core/event";
 import measure from "@src/core/measure";
 import * as task from "@src/core/task";
@@ -35,32 +36,38 @@ export function start(): void {
     activePeriod = 0;
     history = {};
 
-    if (insertRule === null) { insertRule = CSSStyleSheet.prototype.insertRule; }
-    if (deleteRule === null) { deleteRule = CSSStyleSheet.prototype.deleteRule; }
-    if (attachShadow === null) { attachShadow = Element.prototype.attachShadow; }
-
     // Some popular open source libraries, like styled-components, optimize performance
     // by injecting CSS using insertRule API vs. appending text node. A side effect of
     // using javascript API is that it doesn't trigger DOM mutation and therefore we
     // need to override the insertRule API and listen for changes manually.
-    CSSStyleSheet.prototype.insertRule = function(): number {
-      schedule(this.ownerNode);
-      return insertRule.apply(this, arguments);
-    };
-
-    CSSStyleSheet.prototype.deleteRule = function(): void {
-      schedule(this.ownerNode);
-      return deleteRule.apply(this, arguments);
-    };
+    if (insertRule === null) { 
+      insertRule = CSSStyleSheet.prototype.insertRule; 
+      CSSStyleSheet.prototype.insertRule = function(): number {
+        if (core.active()) { schedule(this.ownerNode); }
+        return insertRule.apply(this, arguments);
+      };
+    }
 
-    // Add a hook to attachShadow API calls
-    // In case we are unable to add a hook and browser throws an exception,
-    // reset attachShadow variable and resume processing like before
-    try {
-      Element.prototype.attachShadow = function (): ShadowRoot {
-        return schedule(attachShadow.apply(this, arguments)) as ShadowRoot;
-      }
-    } catch { attachShadow = null; }
+    if (deleteRule === null) { 
+      deleteRule = CSSStyleSheet.prototype.deleteRule;
+      CSSStyleSheet.prototype.deleteRule = function(): void {
+        if (core.active()) { schedule(this.ownerNode); }
+        return deleteRule.apply(this, arguments);
+      };
+   }
+
+   // Add a hook to attachShadow API calls
+   // In case we are unable to add a hook and browser throws an exception,
+   // reset attachShadow variable and resume processing like before
+   if (attachShadow === null) { 
+     attachShadow = Element.prototype.attachShadow;    
+     try {
+       Element.prototype.attachShadow = function (): ShadowRoot {
+         if (core.active()) { return schedule(attachShadow.apply(this, arguments)) as ShadowRoot; }
+         else { return attachShadow.apply(this, arguments)}   
+       }
+     } catch { attachShadow = null; }
+  } 
 }
 
 export function observe(node: Node): void {
@@ -90,25 +97,6 @@ export function monitor(frame: HTMLIFrameElement): void {
 export function stop(): void {
   for (let observer of observers) { if (observer) { observer.disconnect(); } }
   observers = [];
-
-  // Restoring original insertRule
-  if (insertRule !== null) {
-    CSSStyleSheet.prototype.insertRule = insertRule;
-    insertRule = null;
-  }
-
-  // Restoring original deleteRule
-  if (deleteRule !== null) {
-    CSSStyleSheet.prototype.deleteRule = deleteRule;
-    deleteRule = null;
-  }
-
-  // Restoring original attachShadow
-  if (attachShadow != null) {
-    Element.prototype.attachShadow = attachShadow;
-    attachShadow = null;
-  }
-
   history = {};
   mutations = [];
   queue = [];
@@ -126,7 +114,7 @@ function handle(m: MutationRecord[]): void {
   summary.track(Event.Mutation, now);
   mutations.push({ time: now, mutations: m});
   task.schedule(process, Priority.High).then((): void => {
-      measure(doc.compute)();
+      setTimeout(doc.compute)
       measure(region.compute)();
   });
 }

package/src/layout/node.ts

@@ -7,7 +7,7 @@ import * as interaction from "@src/interaction";
 import * as mutation from "@src/layout/mutation";
 import * as schema from "@src/layout/schema";
 
-const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror"];
+const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror", "data-drupal-form-submit-last"];
 const newlineRegex = /[\r\n]+/g;
 
 export default function (node: Node, source: Source): Node {

package/src/layout/target.ts

@@ -1,7 +1,8 @@
 import { Privacy } from "@clarity-types/core";
 import { Event } from "@clarity-types/data";
 import { TargetMetadata } from "@clarity-types/layout";
-import { track } from "@src/layout/region";
+import * as fraud from "@src/diagnostic/fraud";
+import * as region from "@src/layout/region";
 import * as dom from "@src/layout/dom";
 import * as mutation from "@src/layout/mutation";
 
@@ -25,16 +26,18 @@ export function link(node: Node): HTMLAnchorElement {
     return null;
 }
 
-export function metadata(node: Node, event: Event): TargetMetadata {
+export function metadata(node: Node, event: Event, text: string = null): TargetMetadata {
     // If the node is null, we return a reserved value for id: 0. Valid assignment of id begins from 1+.
     let output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Text, node };
     if (node) {
         let value = dom.get(node);
         if (value !== null) {
+            let metadata = value.metadata;
             output.id = value.id;
             output.hash = value.hash;
-            output.privacy = value.metadata.privacy;
-            if (value.region) { track(value.region, event); }
+            output.privacy = metadata.privacy;
+            if (value.region) { region.track(value.region, event); }
+            if (metadata.fraud) { fraud.check(metadata.fraud, value.id, text || value.data.value); }
         }
     }
 

package/src/performance/observer.ts

@@ -1,4 +1,5 @@
-import { Code, Constant, Dimension, Metric, Severity } from "@clarity-types/data";
+import { Code, Constant, Dimension, Metric, Setting, Severity } from "@clarity-types/data";
+import config from "@src/core/config";
 import { bind } from "@src/core/event";
 import measure from "@src/core/measure";
 import { setTimeout } from "@src/core/timeout";
@@ -56,7 +57,9 @@ function process(entries: PerformanceEntryList): void {
                 navigation.compute(entry as PerformanceNavigationTiming);
                 break;
             case Constant.Resource:
-                dimension.log(Dimension.NetworkHosts, host(entry.name));
+                let name = entry.name;
+                dimension.log(Dimension.NetworkHosts, host(name));
+                if (name === config.upload || name === config.fallback) { metric.max(Metric.UploadTime, entry.duration); }
                 break;
             case Constant.LongTask:
                 metric.count(Metric.LongTaskCount);
@@ -73,6 +76,11 @@ function process(entries: PerformanceEntryList): void {
                 break;
         }
     }
+    if (performance && Constant.Memory in performance && performance[Constant.Memory].usedJSHeapSize) {
+        // Track consumed memory (MBs) where "memory" API is available
+        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
+        metric.max(Metric.UsedMemory, Math.abs(performance[Constant.Memory].usedJSHeapSize / Setting.MegaByte));
+    }
 }
 
 export function stop(): void {

package/types/core.d.ts

@@ -4,6 +4,7 @@ type TaskFunction = () => Promise<void>;
 type TaskResolve = () => void;
 type UploadCallback = (data: string) => void;
 type Region = [number /* RegionId */, string /* Query Selector */];
+type Fraud = [number /* FraudId */, string /* Query Selector */];
 export type Extract = ExtractSource /* Extraction Source */ | number /* Extract Id */ | string  | string[] /* Hash or Query Selector or String Token */;
 
 /* Enum */
@@ -127,6 +128,7 @@ export interface Config {
     regions?: Region[];
     extract?: Extract[];
     cookies?: string[];
+    fraud?: Fraud[];
     report?: string;
     upload?: string | UploadCallback;
     fallback?: string;

package/types/data.d.ts

@@ -4,9 +4,12 @@ export type Token = (string | number | number[] | string[]);
 export type DecodedToken = (any | any[]);
 
 export type MetadataCallback = (data: Metadata, playback: boolean) => void;
+export interface MetadataCallbackOptions {
+    callback: MetadataCallback, 
+    wait: boolean
+}
 
 /* Enum */
-
 export const enum Event {
     /* Data */
     Metric = 0,
@@ -52,10 +55,14 @@ export const enum Event {
     Variable = 34,
     Limit = 35,
     Summary = 36,
+/**
+ * @deprecated No longer support Box event
+ */
     Box = 37,
     Clipboard = 38,
     Submit = 39,
-    Extract = 40
+    Extract = 40,
+    Fraud = 41
 }
 
 export const enum Metric {
@@ -86,7 +93,10 @@ export const enum Metric {
     CartTotal = 24,
     EventCount = 25,
     Automation = 26,
-    Mobile = 27
+    Mobile = 27,
+    UploadTime = 28,
+    SinglePage = 29,
+    UsedMemory = 30
 }
 
 export const enum Dimension {
@@ -177,7 +187,6 @@ export const enum Setting {
     CollectionLimit = 128, // Number of unique entries for dimensions
     ClickPrecision = 32767, // 2^15 - 1
     BoxPrecision = 100, // Up to 2 decimal points (e.g. 34.56)
-    ResizeObserverThreshold = 15, // At least 15 characters before we attach a resize observer for the node
     ScriptErrorLimit = 5, // Do not send the same script error more than 5 times per page
     DimensionLimit = 256, // Do not extract dimensions which are over 256 characters
     WordLength = 5, // Estimated average size of a word,
@@ -187,6 +196,7 @@ export const enum Setting {
     ViewportIntersectionRatio = 0.05, // Ratio of intersection area in comparison to viewport area before it's marked visible
     IntersectionRatio = 0.8, // Ratio of intersection area in comparison to element's area before it's marked visible
     MaxFirstPayloadBytes = 1 * 1024 * 1024, // 1MB: Cap the very first payload to a maximum of 1MB
+    MegaByte = 1024 * 1024, // 1MB
     UploadFactor = 3, // Slow down sequence by specified factor
     MinUploadDelay = 100, // Minimum time before we are ready to flush events to the server
     MaxUploadDelay = 30 * Time.Second, // Do flush out payload once every 30s,
@@ -212,6 +222,7 @@ export const enum Constant {
     Pause = "pause",
     Resume = "resume",
     Report = "report",
+    Memory = "memory",
     Empty = "",
     Space = " ",
     Expires = "expires=",
@@ -236,7 +247,6 @@ export const enum Constant {
     UserId = "userId",
     SessionId = "sessionId",
     PageId = "pageId",
-    ResizeObserver = "ResizeObserver",
     Mask = "•",
     SessionStorage = "sessionStorage",
     Cookie = "cookie",

package/types/diagnostic.d.ts

@@ -16,3 +16,9 @@ export interface LogData {
     stack: string;
     severity: Severity;
 }
+
+export interface FraudData {
+    id: number;
+    target: number;
+    hash: string;
+}

package/types/interaction.d.ts

@@ -103,6 +103,7 @@ export interface ClickData {
     text: string;
     link: string;
     hash: string;
+    trust: number;
 }
 
 export interface ClipboardData {

package/types/layout.d.ts

@@ -28,6 +28,11 @@ export const enum RegionVisibility {
     ScrolledToEnd = 13
 }
 
+export const enum Mask {
+    Text = "password,secret,pass,social,ssn,name,code,dob,cell,mob,contact,hidden,account,cvv,ccv,email,tel,phone,address,addr,card,zip",
+    Disable = "radio,checkbox,range,button,reset,submit"
+}
+
 export const enum Constant {
     Empty = "",
     SvgPrefix = "svg:",
@@ -42,6 +47,7 @@ export const enum Constant {
     Box = "#",
     Bang = "!",
     Period = ".",
+    Comma = ",",
     MaskData = "data-clarity-mask",
     UnmaskData = "data-clarity-unmask",
     RegionData = "data-clarity-region",
@@ -162,6 +168,7 @@ export interface NodeMeta {
     suspend: boolean;
     privacy: Privacy;
     position: number;
+    fraud: number;
     size: number[];
 }
 
@@ -198,12 +205,6 @@ export interface RegionData {
     name: string;    
 }
 
-export interface BoxData {
-    id: number;
-    width: number;
-    height: number;
-}
-
 export interface TargetMetadata {
     id: number;
     hash: [string, string];

package/types/performance.d.ts

@@ -31,10 +31,3 @@ export interface NavigationData {
     encodedSize: number;
     decodedSize: number;
 }
-
-export interface ConnectionData {
-    downlink: number;
-    rtt: number;
-    saveData: BooleanFlag;
-    type: string;
-}

package/src/layout/box.ts

@@ -1,83 +0,0 @@
-import { Event, Setting } from "@clarity-types/data";
-import { BoxData } from "@clarity-types/layout";
-import * as dom from "@src/layout/dom";
-import encode from "@src/layout/encode";
-
-export let data: BoxData[] = [];
-let enabled = false;
-let observer: ResizeObserver = null;
-
-export function start(): void {
-    reset();
-    observer = null;
-    enabled = window["ResizeObserver"] ? true : false;
-}
-
-export function compute(id: number): void {
-    if (enabled === false) { return; }
-    observer = observer === null ? new ResizeObserver(handler) : observer;
-    if (observer) {
-        let value = dom.getValue(id);
-        // If this is the first time computing size for this node, go ahead and wire up ResizeObserver
-        // In all other cases, value.metadata.size will be null or an array with two elements [width, height]
-        // And, in those cases, we will skip through the following section and not attach the observer
-        if (value && value.metadata.size !== null && value.metadata.size.length === 0) {
-            let node = dom.getNode(id);
-            if (node && node.nodeType === Node.ELEMENT_NODE) {
-                let e = node as HTMLElement;
-                let r = e.getBoundingClientRect();
-                value.metadata.size = [Math.floor(r.width * Setting.BoxPrecision), Math.floor(r.height * Setting.BoxPrecision)];
-                observer.observe(e);
-            }
-        }
-    }
-}
-
-function handler(entries: ResizeObserverEntry[]): void {
-    window.requestAnimationFrame(() => {
-        for (let entry of entries) {
-            let target = entry.target;
-            let id = target ? dom.getId(target) : null;
-            if (id) {
-                let v = dom.getValue(id);
-                let s = v.metadata.size;
-                let b = entry.borderBoxSize as any;
-                let w = null;
-                let h = null;
-                // Check if browser supports borderBoxSize property on ResizeObserverEntry object
-                // Otherwise, fall back to using getBoundingClientRect() to be cross browser compatible
-                // Reference: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize
-                if(b && b.length > 0) {
-                    w = Math.floor(b[0].inlineSize * Setting.BoxPrecision);
-                    h = Math.floor(b[0].blockSize * Setting.BoxPrecision);
-                } else {
-                    let r = target.getBoundingClientRect();
-                    w = Math.floor(r.width * Setting.BoxPrecision);
-                    h = Math.floor(r.height * Setting.BoxPrecision);
-                }
-
-                // Capture new width & height only if they are different from what we have in in-memory cache
-                if (w !== s[0] && h !== s[1]) {
-                    s = [w,h];
-                    data.push({ id, width: w, height: h });
-                }
-            }
-        }
-
-        // Schedule encode only when we have at least one valid data entry
-        if (data.length > 0) { encode(Event.Box); }
-    });
-}
-
-export function reset(): void {
-    data = [];
-}
-
-export function stop(): void {
-    reset();
-    if (observer) {
-        observer.disconnect();
-        observer = null;
-    }
-    enabled = false;
-}