clarity-js 0.7.4 → 0.7.6

package/src/insight/encode.ts

@@ -0,0 +1,61 @@
+import { Privacy } from "@clarity-types/core";
+import { Event, Token } from "@clarity-types/data";
+import { Constant, NodeInfo } from "@clarity-types/layout";
+import * as scrub from "@src/core/scrub";
+import { time } from "@src/core/time";
+import * as baseline from "@src/data/baseline";
+import tokenize from "@src/data/token";
+import { queue } from "@src/data/upload";
+import * as snapshot from "@src/insight/snapshot";
+import * as doc from "@src/layout/document";
+
+export default async function (type: Event): Promise<void> {
+    let eventTime = time()
+    let tokens: Token[] = [eventTime, type];
+    switch (type) {
+        case Event.Document:
+            let d = doc.data;
+            tokens.push(d.width);
+            tokens.push(d.height);
+            baseline.track(type, d.width, d.height);
+            queue(tokens);
+            break;
+        case Event.Snapshot:
+            let values = snapshot.values;
+            // Only encode and queue DOM updates if we have valid updates to report back
+            if (values.length > 0) {
+                for (let value of values) {
+                    let privacy = value.metadata.privacy;
+                    let data: NodeInfo = value.data;
+                    for (let key of ["tag", "attributes", "value"]) {
+                        if (data[key]) {
+                            switch (key) {
+                                case "tag":
+                                    tokens.push(value.id);
+                                    if (value.parent) { tokens.push(value.parent); }
+                                    if (value.previous) { tokens.push(value.previous); }
+                                    tokens.push(data[key]);
+                                    break;
+                                case "attributes":
+                                    for (let attr in data[key]) {
+                                        if (data[key][attr] !== undefined) {
+                                            tokens.push(attribute(attr, data[key][attr], privacy));
+                                        }
+                                    }
+                                    break;
+                                case "value":
+                                    tokens.push(scrub.text(data[key], data.tag, privacy));
+                                    break;
+                            }
+                        }
+                    }
+                }
+                queue(tokenize(tokens), true);
+            }
+            break;
+    }
+}
+
+function attribute(key: string, value: string, privacy: Privacy): string {
+    return `${key}=${scrub.text(value, key.indexOf(Constant.DataAttribute) === 0 ? Constant.DataAttribute : key, privacy)}`;
+}

package/src/insight/snapshot.ts

@@ -0,0 +1,112 @@
+import { OffsetDistance, Privacy } from "@clarity-types/core";
+import { Event } from "@clarity-types/data";
+import { Constant, NodeInfo, NodeValue, TargetMetadata } from "@clarity-types/layout";
+import * as doc from "@src/layout/document";
+import encode from "@src/insight/encode";
+import * as interaction from "@src/interaction";
+export let values: NodeValue[] = [];
+let index: number = 1;
+let idMap: WeakMap<Node, number> = null; // Maps node => id.
+
+export function start(): void {
+    reset();
+    doc.start();
+    getId(document.documentElement); // Pre-discover ID for page root
+    interaction.observe(document);
+}
+
+export function stop(): void {
+    reset();
+    doc.stop();
+}
+
+export function compute(): void { /* Intentionally Blank */ }
+export function iframe(): boolean { return false; }
+export function offset(): OffsetDistance { return { x: 0, y: 0 }; }
+export function hashText(): void { /* Intentionally Blank */ }
+
+export function target(evt: UIEvent): Node {
+    let path = evt.composed && evt.composedPath ? evt.composedPath() : null;
+    let node = (path && path.length > 0 ? path[0] : evt.target) as Node;
+    return node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
+}
+
+export function metadata(node: Node): TargetMetadata {
+    let output: TargetMetadata = { id: 0, hash: null, privacy: Privacy.Snapshot, node };
+    if (node) { output.id = idMap.has(node) ? idMap.get(node) : getId(node); }
+    return output;
+}
+
+export function snapshot(): void {    
+    values = [];
+    traverse(document);
+    encode(Event.Snapshot);
+}
+
+function reset(): void {
+    idMap = new WeakMap();
+}
+
+function traverse(root: Node): void {
+    let queue = [root];
+    while (queue.length > 0) {
+        let attributes = null, tag = null, value = null;
+        let node = queue.shift();
+        let next = node.firstChild;
+        let parent = node.parentElement ? node.parentElement : (node.parentNode ?  node.parentNode : null);
+
+        while (next) {
+            queue.push(next);
+            next = next.nextSibling;
+        }
+      
+        // Process the node
+        let type = node.nodeType;
+        switch (type) {
+            case Node.DOCUMENT_TYPE_NODE:
+                let doctype = node as DocumentType;
+                tag = Constant.DocumentTag;
+                attributes = { name: doctype.name, publicId: doctype.publicId, systemId: doctype.systemId }
+                break;
+            case Node.TEXT_NODE: 
+                value = node.nodeValue;
+                tag = idMap.get(parent) ? Constant.TextTag : tag;
+                break;
+            case Node.ELEMENT_NODE:
+                let element = node as HTMLElement;
+                attributes = getAttributes(element);
+                tag = ["NOSCRIPT", "SCRIPT", "STYLE"].indexOf(element.tagName) < 0 ? element.tagName : tag;
+                break;
+        }
+        add(node, parent, { tag, attributes, value });     
+    }
+}
+
+/* Helper Functions - Snapshot Traversal */
+function getAttributes(element: HTMLElement): { [key: string]: string } {
+    let output = {};
+    let attributes = element.attributes;
+    if (attributes && attributes.length > 0) {
+        for (let i = 0; i < attributes.length; i++) {            
+            output[attributes[i].name] = attributes[i].value;
+        }
+    }
+    return output;
+}
+
+function getId(node: Node): number {
+    if (node === null) { return null; }
+    if (idMap.has(node)) { return idMap.get(node); }
+    idMap.set(node, index);
+    return index++;
+}
+
+function add(node: Node, parent: Node, data: NodeInfo): void {
+    if (node && data && data.tag) {
+        let id = getId(node);
+        let parentId = parent ? idMap.get(parent) : null;
+        let previous = node.previousSibling ? idMap.get(node.previousSibling) : null;
+        let metadata = { active: true, suspend: false, privacy: Privacy.Snapshot, position: null, fraud: null, size: null };
+        values.push({ id, parent: parentId, previous, children: [], data, selector: null, hash: null, region: null, metadata });
+    }
+}

package/src/interaction/click.ts

@@ -5,8 +5,8 @@ import { bind } from "@src/core/event";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { iframe } from "@src/layout/dom";
-import offset from "@src/layout/offset";
-import { link, target } from "@src/layout/target";
+import { offset } from "@src/layout/offset";
+import { target } from "@src/layout/target";
 import encode from "./encode";
 
 const UserInputTags = ["input", "textarea", "radio", "button", "canvas"];
@@ -73,6 +73,19 @@ function handler(event: Event, root: Node, evt: MouseEvent): void {
     }
 }
 
+function link(node: Node): HTMLAnchorElement {
+    while (node && node !== document) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            let element = node as HTMLElement;
+            if (element.tagName === "A") {
+                return element as HTMLAnchorElement;
+            }
+        }
+        node = node.parentNode;
+    }
+    return null;
+}
+
 function text(element: Node): string {
     let output = null;
     if (element) {

package/src/interaction/encode.ts

@@ -47,7 +47,7 @@ export default async function (type: Event, ts: number = null): Promise<void> {
             for (let entry of click.state) {
                 let cTarget = metadata(entry.data.target as Node, entry.event, entry.data.text);
                 tokens = [entry.time, entry.event];
-                let cHash = cTarget.hash.join(Constant.Dot);
+                let cHash = cTarget.hash ? cTarget.hash.join(Constant.Dot) : Constant.Empty;
                 tokens.push(cTarget.id);
                 tokens.push(entry.data.x);
                 tokens.push(entry.data.y);

package/src/interaction/pointer.ts

@@ -5,7 +5,7 @@ import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
 import { iframe } from "@src/layout/dom";
-import offset from "@src/layout/offset";
+import { offset } from "@src/layout/offset";
 import { target } from "@src/layout/target";
 import encode from "./encode";
 

package/src/layout/document.ts

@@ -1,6 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { DocumentData } from "@clarity-types/layout";
-import encode from "./encode";
+import encode from "@src/layout/encode";
 
 export let data: DocumentData;
 
@@ -41,6 +41,6 @@ export function compute(): void {
     }
 }
 
-export function end(): void {
+export function stop(): void {
     reset();
 }

package/src/layout/encode.ts

@@ -106,5 +106,5 @@ function str(input: number): string {
 }
 
 function attribute(key: string, value: string, privacy: Privacy): string {
-    return `${key}=${scrub.text(value, key, privacy)}`;
+    return `${key}=${scrub.text(value, key.indexOf(Constant.DataAttribute) === 0 ? Constant.DataAttribute : key, privacy)}`;
 }

package/src/layout/index.ts

@@ -20,5 +20,5 @@ export function stop(): void {
     region.stop();
     dom.stop();
     mutation.stop();
-    doc.end();
+    doc.stop();
 }

package/src/layout/node.ts

@@ -128,7 +128,7 @@ export default function (node: Node, source: Source): Node {
                 case "HEAD":
                     let head = { tag, attributes };
                     let l = insideFrame && node.ownerDocument?.location ? node.ownerDocument.location : location;
-                    head.attributes[Constant.Base] = l.protocol + "//" + l.hostname + l.pathname;
+                    head.attributes[Constant.Base] = l.protocol + "//" + l.host + l.pathname;
                     dom[call](node, parent, head, source);
                     break;
                 case "BASE":
@@ -138,7 +138,7 @@ export default function (node: Node, source: Source): Node {
                         // We create "a" element so we can generate protocol and hostname for relative paths like "/path/"
                         let a = document.createElement("a");
                         a.href = attributes["href"];
-                        baseHead.data.attributes[Constant.Base] = a.protocol + "//" + a.hostname + a.pathname;
+                        baseHead.data.attributes[Constant.Base] = a.protocol + "//" + a.host + a.pathname;
                     }
                     break;
                 case "STYLE":

package/src/layout/offset.ts

@@ -1,7 +1,7 @@
 import { OffsetDistance } from "@clarity-types/core";
 import { iframe } from "@src/layout/dom";
 
-export default function(element: HTMLElement): OffsetDistance {
+export function offset(element: HTMLElement): OffsetDistance {
     let output: OffsetDistance = { x: 0, y: 0 };
 
     // Walk up the chain to ensure we compute offset distance correctly

package/src/layout/target.ts

@@ -13,19 +13,6 @@ export function target(evt: UIEvent): Node {
     return node.nodeType === Node.DOCUMENT_NODE ? (node as Document).documentElement : node;
 }
 
-export function link(node: Node): HTMLAnchorElement {
-    while (node && node !== document) {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            let element = node as HTMLElement;
-            if (element.tagName === "A") {
-                return element as HTMLAnchorElement;
-            }
-        }
-        node = node.parentNode;
-    }
-    return null;
-}
-
 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 };

package/src/layout/traverse.ts

@@ -1,13 +1,13 @@
 import { Task, Timer } from "@clarity-types/core";
 import { Source } from "@clarity-types/layout";
 import * as task from "@src/core/task";
-import processNode from "./node";
+import node from "@src/layout/node";
 
 export default async function(root: Node, timer: Timer, source: Source): Promise<void> {
     let queue = [root];
     while (queue.length > 0) {
-        let node = queue.shift();
-        let next = node.firstChild;
+        let entry = queue.shift();
+        let next = entry.firstChild;
 
         while (next) {
             queue.push(next);
@@ -22,7 +22,7 @@ export default async function(root: Node, timer: Timer, source: Source): Promise
         // Check if processing a node gives us a pointer to one of its sub nodes for traversal
         // E.g. an element node may give us a pointer to traverse shadowDom if shadowRoot property is set
         // Or, an iframe from the same origin could give a pointer to it's document for traversing contents of iframe.
-        let subnode = processNode(node, source);
+        let subnode = node(entry, source);
         if (subnode) { queue.push(subnode); }
     }
 }

package/src/performance/observer.ts

@@ -91,5 +91,5 @@ export function stop(): void {
 function host(url: string): string {
     let a = document.createElement("a");
     a.href = url;
-    return a.hostname;
+    return a.host;
 }

package/types/core.d.ts

@@ -54,7 +54,8 @@ export const enum Privacy {
     Sensitive = 1,
     Text = 2,
     TextImage = 3,
-    Exclude = 4
+    Exclude = 4,
+    Snapshot = 5
 }
 
 /* Helper Interfaces */

package/types/data.d.ts

@@ -63,7 +63,8 @@ export const enum Event {
     Submit = 39,
     Extract = 40,
     Fraud = 41,
-    Change = 42
+    Change = 42,
+    Snapshot = 43
 }
 
 export const enum Metric {
@@ -217,7 +218,8 @@ export const enum Setting {
     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,
     ExtractLimit = 10000, // Do not extract more than 10000 characters
-    ChecksumPrecision = 24 // n-bit integer to represent token hash 
+    ChecksumPrecision = 24, // n-bit integer to represent token hash 
+    UploadTimeout = 15000 // Timeout in ms for XHR requests
 }
 
 export const enum Character {
@@ -286,7 +288,8 @@ export const enum Constant {
     ArrayStart = "[",
     ConditionStart = "{",
     ConditionEnd = "}",
-    Seperator = "<SEP>"
+    Seperator = "<SEP>",
+    Timeout = "Timeout"
 }
 
 export const enum XMLReadyState {

package/types/layout.d.ts

@@ -53,6 +53,7 @@ export const enum Constant {
     Bang = "!",
     Period = ".",
     Comma = ",",
+    DataAttribute = "data-",
     MaskData = "data-clarity-mask",
     UnmaskData = "data-clarity-unmask",
     RegionData = "data-clarity-region",