clarity-js 0.6.32 → 0.6.35

package/src/layout/dom.ts

@@ -1,31 +1,29 @@
 import { Privacy } from "@clarity-types/core";
-import { Code, Setting, Severity } from "@clarity-types/data";
-import { Constant, NodeInfo, NodeValue, Selector, SelectorInput, Source } from "@clarity-types/layout";
+import { Code, Severity } from "@clarity-types/data";
+import { Constant, Mask, NodeInfo, NodeMeta, NodeValue, Selector, SelectorInput, Source } from "@clarity-types/layout";
 import config from "@src/core/config";
 import hash from "@src/core/hash";
 import * as internal from "@src/diagnostic/internal";
-import * as extract from "@src/layout/extract";
 import * as region from "@src/layout/region";
 import selector from "@src/layout/selector";
-
+import * as mutation from "@src/layout/mutation";
+import * as extract from "@src/data/extract";
 let index: number = 1;
-
-// Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#%3Cinput%3E_types
-const DISALLOWED_TYPES = ["password", "hidden", "email", "tel"];
-const DISALLOWED_NAMES = ["addr", "cell", "code", "dob", "email", "mob", "name", "phone", "secret", "social", "ssn", "tel", "zip", "pass", "card", "account", "cvv", "ccv"];
-const DISALLOWED_MATCH = ["address", "password", "contact"];
-
 let nodes: Node[] = [];
 let values: NodeValue[] = [];
 let updateMap: number[] = [];
 let hashMap: { [hash: string]: number } = {};
 let override = [];
 let unmask = [];
+let updatedFragments: { [fragment: number]: string } = {};
+let maskText = [];
+let maskDisable = [];
 
 // The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
 let idMap: WeakMap<Node, number> = null; // Maps node => id.
 let iframeMap: WeakMap<Document, HTMLIFrameElement> = null; // Maps iframe's contentDocument => parent iframe element
 let privacyMap: WeakMap<Node, Privacy> = null; // Maps node => Privacy (enum)
+let fraudMap: WeakMap<Node, number> = null; // Maps node => FraudId (number)
 
 export function start(): void {
     reset();
@@ -44,9 +42,12 @@ function reset(): void {
     hashMap = {};
     override = [];
     unmask = [];
+    maskText = Mask.Text.split(Constant.Comma);
+    maskDisable = Mask.Disable.split(Constant.Comma);
     idMap = new WeakMap();
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
+    fraudMap = new WeakMap();
 }
 
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
@@ -61,10 +62,9 @@ export function parse(root: ParentNode, init: boolean = false): void {
         // Since mutations may happen on leaf nodes too, e.g. text nodes, which may not support all selector APIs.
         // We ensure that the root note supports querySelectorAll API before executing the code below to identify new regions.
         if ("querySelectorAll" in root) {
-            extract.regions(root, config.regions);
-            extract.metrics(root, config.metrics);
-            extract.dimensions(root, config.dimensions);
+            config.regions.forEach(x => root.querySelectorAll(x[1]).forEach(e => region.observe(e, `${x[0]}`))); // Regions
             config.mask.forEach(x => root.querySelectorAll(x).forEach(e => privacyMap.set(e, Privacy.TextImage))); // Masked Elements
+            config.fraud.forEach(x => root.querySelectorAll(x[1]).forEach(e => fraudMap.set(e, x[0]))); // Fraud Check
             unmask.forEach(x => root.querySelectorAll(x).forEach(e => privacyMap.set(e, Privacy.None))); // Unmasked Elements
         }
     } catch (e) { internal.log(Code.Selector, Severity.Warning, e ? e.name : null); }
@@ -85,20 +85,20 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
     let id = getId(node, true);
     let parentId = parent ? getId(parent) : null;
     let previousId = getPreviousId(node);
-    let privacy = config.content ? Privacy.Sensitive : Privacy.Text;
-    let parentValue = null;
+    let parentValue: NodeValue = null;
     let regionId = region.exists(node) ? id : null;
+    let fragmentId = null;
+    let fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
+    let privacyId = config.content ? Privacy.Sensitive : Privacy.Text
 
     if (parentId >= 0 && values[parentId]) {
         parentValue = values[parentId];
         parentValue.children.push(id);
         regionId = regionId === null ? parentValue.region : regionId;
-        privacy = parentValue.metadata.privacy;
+        fragmentId = parentValue.fragment;
+        fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
     }
 
-    // Check to see if this particular node should be masked or not
-    privacy = getPrivacy(node, data, parentValue, privacy);
-
     // If there's an explicit region attribute set on the element, use it to mark a region on the page
     if (data.attributes && Constant.RegionData in data.attributes) {
         region.observe(node, data.attributes[Constant.RegionData]);
@@ -115,12 +115,14 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
         selector: null,
         hash: null,
         region: regionId,
-        metadata: { active: true, suspend: false, privacy, position: null, size: null }
+        metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
+        fragment: fragmentId,
     };
 
+    privacy(node, values[id], parentValue);
     updateSelector(values[id]);
-    size(values[id], parentValue);
-    track(id, source);
+    size(values[id]);
+    track(id, source, values[id].fragment);
 }
 
 export function update(node: Node, parent: Node, data: NodeInfo, source: Source): void {
@@ -174,9 +176,14 @@ export function update(node: Node, parent: Node, data: NodeInfo, source: Source)
             }
         }
 
+        // track node if it is a part of scheduled fragment mutation
+        if(value.fragment && updatedFragments[value.fragment]) {
+            changed = true;
+        }
+
         // Update selector
         updateSelector(value);
-        track(id, source, changed, parentChanged);
+        track(id, source, values[id].fragment, changed, parentChanged);
     }
 }
 
@@ -203,66 +210,63 @@ export function iframe(node: Node): HTMLIFrameElement {
     return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
 }
 
-function getPrivacy(node: Node, data: NodeInfo, parent: NodeValue, privacy: Privacy): Privacy {
-    let attributes = data.attributes;
+function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
+    let data = value.data;
+    let metadata = value.metadata;
+    let current = metadata.privacy;
+    let attributes = data.attributes || {};
     let tag = data.tag.toUpperCase();
 
-    // If this node was explicitly configured to contain sensitive content, use that information and return the value
-    if (privacyMap.has(node)) { return privacyMap.get(node); }
-
-    // If it's a text node belonging to a STYLE or TITLE tag; 
-    // Or, the text node belongs to one of SCRUB_EXCEPTIONS
-    // then reset the privacy setting to ensure we capture the content
-    if (tag === Constant.TextTag && parent && parent.data) {
-        let path = parent.selector ? parent.selector[Selector.Stable] : Constant.Empty;
-        privacy = parent.data.tag === Constant.StyleTag || parent.data.tag === Constant.TitleTag ? Privacy.None : privacy;
-        for (let entry of override) {
-            if (path.indexOf(entry) >= 0) {
-                privacy = Privacy.None;
-                break;
-            }
-        }
-    }
-
-    // Do not proceed if attributes are missing for the node
-    if (attributes === null || attributes === undefined) { return privacy; }
-
-    // Look up for sensitive fields
-    if (Constant.Class in attributes && privacy === Privacy.Sensitive) {
-        for (let match of DISALLOWED_MATCH) {
-            if (attributes[Constant.Class].indexOf(match) >= 0) {
-                privacy = Privacy.Text;
-                break;
-            }
-        }
-    }
-
-    // Check for disallowed list of fields (e.g. address, phone, etc.) only if the input node is not already masked
-    if (tag === Constant.InputTag) {
-        if (privacy === Privacy.None) {
+    switch (true) {
+        case Constant.MaskData in attributes:
+            metadata.privacy = Privacy.TextImage;
+            break;
+        case Constant.UnmaskData in attributes:
+            metadata.privacy = Privacy.None;
+            break;
+        case privacyMap.has(node):
+            // If this node was explicitly configured to contain sensitive content, honor that privacy setting
+            metadata.privacy = privacyMap.get(node);
+            break;
+        case fraudMap.has(node):
+            // If this node was explicitly configured to be evaluated for fraud, then also mask content
+            metadata.privacy = Privacy.Text;
+            break;
+        case tag === Constant.TextTag:
+            // If it's a text node belonging to a STYLE or TITLE tag or one of SCRUB_EXCEPTIONS, then capture content
+            let pTag = parent && parent.data ? parent.data.tag : Constant.Empty;
+            let pSelector = parent && parent.selector ? parent.selector[Selector.Stable] : Constant.Empty;
+            metadata.privacy = pTag === Constant.StyleTag || pTag === Constant.TitleTag || override.some(x => pSelector.indexOf(x) >= 0) ? Privacy.None : current; 
+            break;
+        case Constant.Type in attributes:
+            // If this node has an explicit type assigned to it, go through masking rules to determine right privacy setting
+            metadata.privacy  = inspect(attributes[Constant.Type], metadata);
+            break;
+        case tag === Constant.InputTag && current === Privacy.None:
+            // If even default privacy setting is to not mask, we still scan through input fields for any sensitive information
             let field: string = Constant.Empty;
-            // Be aggressive in looking up any attribute (id, class, name, etc.) for disallowed names
-            for (const attribute of Object.keys(attributes)) { field += attributes[attribute].toLowerCase(); }
-            for (let name of DISALLOWED_NAMES) {
-                if (field.indexOf(name) >= 0) {
-                    privacy = Privacy.Text;
-                    break;
-                }
-            }
-        } else if (privacy === Privacy.Sensitive) {
-            // Mask all input fields with an exception of type=submit; since they do not accept user input
-            privacy = attributes && attributes[Constant.Type] === Constant.Submit ? Privacy.None : Privacy.Text;
-        }
+            Object.keys(attributes).forEach(x => field += attributes[x].toLowerCase());
+            metadata.privacy = inspect(field, metadata);
+            break;
+        case current === Privacy.Sensitive && tag === Constant.InputTag:
+            // If it's a button or an input option, make an exception to disable masking
+            metadata.privacy = maskDisable.indexOf(attributes[Constant.Type]) >= 0 ? Privacy.None : current;
+            break;
+        case current === Privacy.Sensitive:
+            // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
+            metadata.privacy = inspect(attributes[Constant.Class], metadata);
+            break;
+        default:
+            metadata.privacy = parent ? parent.metadata.privacy : metadata.privacy;
+            break;
     }
+}
 
-    // Check for disallowed list of types (e.g. password, email, etc.) and set the masked property appropriately
-    if (Constant.Type in attributes && DISALLOWED_TYPES.indexOf(attributes[Constant.Type]) >= 0) { privacy = Privacy.Text; }
-
-    // Following two conditions supersede any of the above. If there are explicit instructions to mask / unmask a field, we honor that.
-    if (Constant.MaskData in attributes) { privacy = Privacy.TextImage; }
-    if (Constant.UnmaskData in attributes) { privacy = Privacy.None; }
-
-    return privacy;
+function inspect(input: string, metadata: NodeMeta): Privacy {
+    if (input && maskText.some(x => input.indexOf(x) >= 0)) {
+        return Privacy.Text;
+    }
+    return metadata.privacy;
 }
 
 function diff(a: NodeInfo, b: NodeInfo, field: string): boolean {
@@ -296,6 +300,9 @@ function updateSelector(value: NodeValue): void {
     value.selector = [selector(s), selector(s, true)];
     value.hash = value.selector.map(x => x ? hash(x) : null) as [string, string];
     value.hash.forEach(h => hashMap[h] = value.id);
+    if (value.hash.some(h => extract.fragments.indexOf(h) !== -1)) {
+        value.fragment = value.id;
+    }
 }
 
 export function getNode(id: number): Node {
@@ -331,6 +338,11 @@ export function updates(): NodeValue[] {
         if (id in values) { output.push(values[id]); }
     }
     updateMap = [];
+    for (let id in updatedFragments) {
+        extract.update(updatedFragments[id], id, true)
+    }
+
+    updatedFragments = {}
     return output;
 }
 
@@ -343,19 +355,10 @@ function remove(id: number, source: Source): void {
     }
 }
 
-function size(value: NodeValue, parent: NodeValue): void {
-    let data = value.data;
-    let tag = data.tag;
-
-    // If this element is a text node, is masked, and longer than configured length, then track box model for the parent element
-    let isLongText = tag === Constant.TextTag && data.value && data.value.length > Setting.ResizeObserverThreshold;
-    let isMasked = value.metadata.privacy === Privacy.Text || value.metadata.privacy === Privacy.TextImage;
-    if (isLongText && isMasked && parent && parent.metadata.size === null) { parent.metadata.size = []; }
-
+function size(value: NodeValue): void {
     // If this element is a image node, and is masked, then track box model for the current element
-    if (data.tag === Constant.ImageTag && value.metadata.privacy === Privacy.TextImage) { value.metadata.size = []; }
+    if (value.data.tag === Constant.ImageTag && value.metadata.privacy === Privacy.TextImage) { value.metadata.size = []; }
 }
-
 function getPreviousId(node: Node): number {
     let id = null;
 
@@ -368,7 +371,19 @@ function getPreviousId(node: Node): number {
     return id;
 }
 
-function track(id: number, source: Source, changed: boolean = true, parentChanged: boolean = false): void {
+function track(id: number, source: Source, fragment: number = null, changed: boolean = true, parentChanged: boolean = false): void {
+    // if updated node is a part of fragment and the fragment is not being tracked currently, schedule a mutation on the fragment node
+    if (fragment && !updatedFragments[fragment]) {
+        let node = getNode(fragment)
+        let value = getValue(fragment);
+        if (node && value) {
+            mutation.schedule(node, true);
+            value.hash.forEach(h => {
+                if(extract.fragments.indexOf(h) !== -1) { updatedFragments[fragment] = h;}
+            });
+        }
+    }
+
     // Keep track of the order in which mutations happened, they may not be sequential
     // Edge case: If an element is added later on, and pre-discovered element is moved as a child.
     // In that case, we need to reorder the pre-discovered element in the update list to keep visualization consistent.

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 = [];
@@ -218,7 +206,7 @@ async function processNodeList(list: NodeList, source: Source, timer: Timer): Pr
   }
 }
 
-function schedule(node: Node): Node {
+export function schedule(node: Node, fragment: boolean = false): Node {
   // Only schedule manual trigger for this node if it's not already in the queue
   if (queue.indexOf(node) < 0) { queue.push(node); }
 
@@ -226,19 +214,19 @@ function schedule(node: Node): Node {
   // It's common for a webpage to call multiple synchronous "insertRule" / "deleteRule" calls.
   // And in those cases we do not wish to monitor changes multiple times for the same node.
   if (timeout) { clearTimeout(timeout); }
-  timeout = setTimeout(trigger, Setting.LookAhead);
+  timeout = setTimeout(() => { trigger(fragment) }, Setting.LookAhead);
 
   return node;
 }
 
-function trigger(): void {
+function trigger(fragment: boolean): void {
   for (let node of queue) {
     // Generate a mutation for this node only if it still exists
     if (node) {
       let shadowRoot = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
       // Skip re-processing shadowRoot if it was already discovered
       if (shadowRoot && dom.has(node)) { continue; }
-      generate(node, shadowRoot ? Constant.ChildList : Constant.CharacterData);
+      generate(node, shadowRoot || fragment ? Constant.ChildList : Constant.CharacterData);
     }
   }
   queue = [];

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

@@ -3,9 +3,9 @@ import * as Data from "./data";
 type TaskFunction = () => Promise<void>;
 type TaskResolve = () => void;
 type UploadCallback = (data: string) => void;
-type Region = [number /* RegionId */, string /* Query Selector */, RegionFilter? /* Region Filter */, string? /* Filter Text */];
-type Metric = [Data.Metric /* MetricId */, Extract /* Extract Filter */, string /* Match Value */, number? /* Scale Factor */];
-type Dimension = [Data.Dimension /* DimensionId */, Extract /* Extract Filter */, string /* Match Value */];
+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 */
 
@@ -21,7 +21,6 @@ export const enum Time {
     Day = 24 * 60 * 60 * 1000
 }
 
-
 export const enum Task {
     Wait = 0,
     Run = 1,
@@ -32,15 +31,23 @@ export const enum Setting {
     LongTask = 30, // 30ms
 }
 
-export const enum RegionFilter {
-    Url = 0,
-    Javascript = 1
+export const enum ExtractSource {
+    Javascript = 0,
+    Cookie = 1,
+    Text = 2,
+    Fragment = 3
+}
+
+export const enum Type {
+    Array = 1, 
+    Object = 2,
+    Simple = 3
 }
 
-export const enum Extract {
-    Text = 0,
-    Javascript = 1,
-    Attribute = 2
+export type Syntax = {
+    name: string,
+    type: Type,
+    condition: string
 }
 
 export const enum Privacy {
@@ -119,9 +126,9 @@ export interface Config {
     mask?: string[];
     unmask?: string[];
     regions?: Region[];
-    metrics?: Metric[];
-    dimensions?: Dimension[];
+    extract?: Extract[];
     cookies?: string[];
+    fraud?: Fraud[];
     report?: string;
     upload?: string | UploadCallback;
     fallback?: string;