clarity-js 0.6.31 → 0.6.34

package/src/layout/mutation.ts

@@ -1,6 +1,8 @@
 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";
@@ -34,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 {
@@ -68,11 +76,8 @@ export function observe(node: Node): void {
   // For this reason, we need to wire up mutations every time we see a new shadow dom.
   // Also, wrap it inside a try / catch. In certain browsers (e.g. legacy Edge), observer on shadow dom can throw errors
   try {
-    // In an edge case, it's possible to get stuck into infinite Mutation loop within Angular applications
-    // This appears to be an issue with Zone.js package, see: https://github.com/angular/angular/issues/31712
-    // As a temporary work around, ensuring Clarity can invoke MutationObserver outside of Zone (and use native implementation instead)
-    let api: string = window[Constant.Zone] && Constant.Symbol in window[Constant.Zone] ? window[Constant.Zone][Constant.Symbol](Constant.MutationObserver) : Constant.MutationObserver;
-    let observer =  api in window ? new window[api](measure(handle) as MutationCallback) : null;
+    let m = api(Constant.MutationObserver);
+    let observer =  m in window ? new window[m](measure(handle) as MutationCallback) : null;
     if (observer) {
       observer.observe(node, { attributes: true, childList: true, characterData: true, subtree: true });
       observers.push(observer);
@@ -92,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 = [];
@@ -220,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); }
 
@@ -228,17 +214,20 @@ 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) {
-    let shadowRoot = node && 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 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 || fragment ? Constant.ChildList : Constant.CharacterData);
+    }
   }
   queue = [];
 }

package/types/core.d.ts

@@ -3,9 +3,8 @@ 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 */];
+export type Extract = ExtractSource /* Extraction Source */ | number /* Extract Id */ | string  | string[] /* Hash or Query Selector or String Token */;
 
 /* Enum */
 
@@ -21,7 +20,6 @@ export const enum Time {
     Day = 24 * 60 * 60 * 1000
 }
 
-
 export const enum Task {
     Wait = 0,
     Run = 1,
@@ -32,15 +30,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,11 +125,17 @@ export interface Config {
     mask?: string[];
     unmask?: string[];
     regions?: Region[];
-    metrics?: Metric[];
-    dimensions?: Dimension[];
+    extract?: Extract[];
     cookies?: string[];
     report?: string;
     upload?: string | UploadCallback;
     fallback?: string;
     upgrade?: (key: string) => void;
 }
+
+export const enum Constant {
+    Zone = "Zone",
+    Symbol = "__symbol__",
+    AddEventListener = "addEventListener",
+    RemoveEventListener = "removeEventListener"
+}

package/types/data.d.ts

@@ -1,12 +1,16 @@
 import { Time } from "@clarity-types/core";
+import { callback } from "@src/data/metadata";
 export type Target = (number | Node);
 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,
@@ -54,7 +58,8 @@ export const enum Event {
     Summary = 36,
     Box = 37,
     Clipboard = 38,
-    Submit = 39
+    Submit = 39,
+    Extract = 40
 }
 
 export const enum Metric {
@@ -135,7 +140,11 @@ export const enum Code {
     CallStackDepth = 4,
     Selector = 5,
     Metric = 6,
-    ContentSecurityPolicy = 7
+/**
+ * @deprecated No longer support ContentSecurityPolicy
+ */
+    ContentSecurityPolicy = 7,
+    Config = 8
 }
 
 export const enum Severity {
@@ -184,7 +193,8 @@ export const enum Setting {
     MaxFirstPayloadBytes = 1 * 1024 * 1024, // 1MB: Cap the very first payload to a maximum of 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
+    MaxUploadDelay = 30 * Time.Second, // Do flush out payload once every 30s,
+    ExtractLimit = 10000 // Do not extract more than 10000 characters
 }
 
 export const enum Character {
@@ -245,6 +255,9 @@ export const enum Constant {
     Accept = "Accept",
     ClarityGzip = "application/x-clarity-gzip",
     Tilde = "~",
+    ArrayStart = "[",
+    ConditionStart = "{",
+    ConditionEnd = "}"
 }
 
 export const enum XMLReadyState {
@@ -363,6 +376,10 @@ export interface UpgradeData {
     key: string;
 }
 
+export interface ExtractData {
+    [key: string]: string | number;
+}
+
 export interface UploadData {
     sequence: number;
     attempts: number;

package/types/layout.d.ts

@@ -75,8 +75,6 @@ export const enum Constant {
     BorderBox = "border-box",
     Value = "value",
     MutationObserver = "MutationObserver",
-    Zone = "Zone",
-    Symbol = "__symbol__",
     JsonLD = "application/ld+json",
     String = "string",
     Number = "number",
@@ -156,6 +154,7 @@ export interface NodeValue {
     hash: [string, string];
     region: number;
     metadata: NodeMeta;
+    fragment: number;
 }
 
 export interface NodeMeta {

package/src/layout/extract.ts

@@ -1,94 +0,0 @@
-import { Dimension, Extract, Metric, Region, RegionFilter } from "@clarity-types/core";
-import { Constant, Setting } from "@clarity-types/data";
-import * as dimension from "@src/data/dimension";
-import * as metric from "@src/data/metric";
-import * as region from "@src/layout/region";
-
-const formatRegex = /1/g;
-const digitsRegex = /[^0-9\.]/g;
-const digitsWithCommaRegex = /[^0-9\.,]/g;
-const regexCache: {[key: string]: RegExp} = {};
-
-export function regions(root: ParentNode, value: Region[]): void {
-    for (let v of value) {
-        const [regionId, selector, filter, match] = v;
-        let valid = true;
-        switch (filter) {
-            case RegionFilter.Url: valid = match && !!top.location.href.match(regex(match)); break;
-            case RegionFilter.Javascript: valid = match && !!evaluate(match); break;
-        }
-        if (valid) { root.querySelectorAll(selector).forEach(e => region.observe(e, regionId.toString())); }
-    }
-}
-
-export function metrics(root: ParentNode, value: Metric[]): void {
-    for (let v of value) {
-        const [metricId, source, match, scale] = v;
-        if (match) {
-            switch (source) {
-                case Extract.Text:  root.querySelectorAll(match).forEach(e => { metric.max(metricId, num((e as HTMLElement).innerText, scale)); }); break;
-                case Extract.Attribute: root.querySelectorAll(`[${match}]`).forEach(e => { metric.max(metricId, num(e.getAttribute(match), scale, false)); }); break;
-                case Extract.Javascript: metric.max(metricId, evaluate(match, Constant.Number) as number); break;
-            }
-        }
-    }
-}
-
-export function dimensions(root: ParentNode, value: Dimension[]): void {
-    for (let v of value) {
-        const [dimensionId, source, match] = v;
-        if (match) {
-            switch (source) {
-                case Extract.Text:  root.querySelectorAll(match).forEach(e => { dimension.log(dimensionId, str((e as HTMLElement).innerText)); }); break;
-                case Extract.Attribute: root.querySelectorAll(`[${match}]`).forEach(e => { dimension.log(dimensionId, str(e.getAttribute(match))); }); break;
-                case Extract.Javascript: dimension.log(dimensionId, str(evaluate(match, Constant.String))); break;
-            }
-        }
-    }
-}
-
-function regex(match: string): RegExp {
-    regexCache[match] = match in regexCache ? regexCache[match] : new RegExp(match);
-    return regexCache[match];
-}
-
-// The function below takes in a variable name in following format: "a.b.c" and safely evaluates its value in javascript context
-// For instance, for a.b.c, it will first check window["a"]. If it exists, it will recursively look at: window["a"]["b"] and finally,
-// return the value for window["a"]["b"]["c"].
-function evaluate(variable: string, type: string = null, base: Object = window): any {
-    let parts = variable.split(Constant.Dot);
-    let first = parts.shift();
-    if (base && base[first]) {
-        if (parts.length > 0) { return evaluate(parts.join(Constant.Dot), type, base[first]); } 
-        let output = type === null || type === typeof base[first] ? base[first] : null;
-        return output;
-    }
-    return null;
-}
-
-function str(input: string): string {
-    // Automatically trim string to max of Setting.DimensionLimit to avoid fetching long strings
-    return input ? input.substr(0, Setting.DimensionLimit) : input;
-}
-
-function num(text: string, scale: number, localize: boolean = true): number {
-    try {
-        scale = scale || 1; 
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-        let lang = document.documentElement.lang;
-        if (Intl && Intl.NumberFormat && lang && localize) {
-            text = text.replace(digitsWithCommaRegex, Constant.Empty);
-            // Infer current group and decimal separator from current locale
-            let group = Intl.NumberFormat(lang).format(11111).replace(formatRegex, Constant.Empty);
-            let decimal = Intl.NumberFormat(lang).format(1.1).replace(formatRegex, Constant.Empty);
-            
-            // Parse number using inferred group and decimal separators
-            return Math.round(parseFloat(text
-                .replace(new RegExp('\\' + group, 'g'), Constant.Empty)
-                .replace(new RegExp('\\' + decimal), Constant.Dot)
-            ) * scale);
-        }
-        // Fallback to en locale
-        return Math.round(parseFloat(text.replace(digitsRegex, Constant.Empty)) * scale);
-    } catch { return null; }
-}