No track tag

.gitignore

@@ -3,6 +3,11 @@
 
 # Build results
 build/
+clarity.js
+decode.js
+
+# npm packages
+.rpt2_cache
 
 # npm packages
 node_modules

decode/clarity.ts

@@ -0,0 +1,225 @@
+import version from "../src/core/version";
+import { Event, Payload, Token } from "../types/data";
+import { MetricEvent, PageEvent, PingEvent, SummaryEvent, TagEvent, UploadEvent } from "../types/decode/data";
+import { DecodedEvent, DecodedPayload } from "../types/decode/decode";
+import { ImageErrorEvent, ScriptErrorEvent } from "../types/decode/diagnostic";
+import { InputChangeEvent, PointerEvent, ResizeEvent, ScrollEvent } from "../types/decode/interaction";
+import { SelectionEvent, UnloadEvent, VisibilityEvent } from "../types/decode/interaction";
+import { BoxModelEvent, DocumentEvent, DomEvent, HashEvent, ResourceEvent, TargetEvent } from "../types/decode/layout";
+
+import * as data from "./data";
+import * as diagnostic from "./diagnostic";
+import * as interaction from "./interaction";
+import * as layout from "./layout";
+import * as r from "./render";
+
+let pageId: string = null;
+
+export function decode(input: string): DecodedPayload {
+    let json: Payload = typeof input === "string" ? JSON.parse(input) : input;
+    let envelope = data.envelope(json.e);
+    let timestamp = Date.now();
+    let payload: DecodedPayload = { timestamp, envelope };
+    let encoded: Token[][] = json.d;
+
+    if (payload.envelope.version !== version) {
+        throw new Error(`Invalid Clarity Version. Actual: ${payload.envelope.version} | Expected: ${version} | ${input.substr(0, 250)}`);
+    }
+
+    /* Reset components before decoding to keep them stateless */
+    data.reset();
+    layout.reset();
+
+    for (let entry of encoded) {
+        data.summarize(entry);
+        switch (entry[1]) {
+            case Event.Page:
+                if (payload.page === undefined) { payload.page = []; }
+                payload.page.push(data.decode(entry) as PageEvent);
+                break;
+            case Event.Ping:
+                if (payload.ping === undefined) { payload.ping = []; }
+                payload.ping.push(data.decode(entry) as PingEvent);
+                break;
+            case Event.Tag:
+                if (payload.tag === undefined) { payload.tag = []; }
+                payload.tag.push(data.decode(entry) as TagEvent);
+                break;
+            case Event.Metric:
+                if (payload.metric === undefined) { payload.metric = []; }
+                payload.metric.push(data.decode(entry) as MetricEvent);
+                break;
+            case Event.Upload:
+                if (payload.upload === undefined) { payload.upload = []; }
+                payload.upload.push(data.decode(entry) as UploadEvent);
+                break;
+            case Event.MouseDown:
+            case Event.MouseUp:
+            case Event.MouseMove:
+            case Event.MouseWheel:
+            case Event.Click:
+            case Event.DoubleClick:
+            case Event.RightClick:
+            case Event.TouchStart:
+            case Event.TouchCancel:
+            case Event.TouchEnd:
+            case Event.TouchMove:
+                if (payload.pointer === undefined) { payload.pointer = []; }
+                payload.pointer.push(interaction.decode(entry) as PointerEvent);
+                break;
+            case Event.Scroll:
+                if (payload.scroll === undefined) { payload.scroll = []; }
+                payload.scroll.push(interaction.decode(entry) as ScrollEvent);
+                break;
+            case Event.Resize:
+                if (payload.resize === undefined) { payload.resize = []; }
+                payload.resize.push(interaction.decode(entry) as ResizeEvent);
+                break;
+            case Event.Selection:
+                if (payload.selection === undefined) { payload.selection = []; }
+                payload.selection.push(interaction.decode(entry) as SelectionEvent);
+                break;
+            case Event.InputChange:
+                if (payload.input === undefined) { payload.input = []; }
+                payload.input.push(interaction.decode(entry) as InputChangeEvent);
+                break;
+            case Event.Unload:
+                if (payload.unload === undefined) { payload.unload = []; }
+                payload.unload.push(interaction.decode(entry) as UnloadEvent);
+                break;
+            case Event.Visibility:
+                if (payload.visibility === undefined) { payload.visibility = []; }
+                payload.visibility.push(interaction.decode(entry) as VisibilityEvent);
+                break;
+            case Event.Target:
+                if (payload.target === undefined) { payload.target = []; }
+                payload.target.push(layout.decode(entry) as TargetEvent);
+                break;
+            case Event.BoxModel:
+                if (payload.boxmodel === undefined) { payload.boxmodel = []; }
+                payload.boxmodel.push(layout.decode(entry) as BoxModelEvent);
+                break;
+            case Event.Discover:
+            case Event.Mutation:
+                if (payload.dom === undefined) { payload.dom = []; }
+                payload.dom.push(layout.decode(entry) as DomEvent);
+                break;
+            case Event.Hash:
+                if (payload.hash === undefined) { payload.hash = []; }
+                payload.hash.push(layout.decode(entry) as HashEvent);
+                break;
+            case Event.Document:
+                if (payload.doc === undefined) { payload.doc = []; }
+                payload.doc.push(layout.decode(entry) as DocumentEvent);
+                break;
+            case Event.ScriptError:
+                if (payload.script === undefined) { payload.script = []; }
+                payload.script.push(diagnostic.decode(entry) as ScriptErrorEvent);
+                break;
+            case Event.ImageError:
+                if (payload.image === undefined) { payload.image = []; }
+                payload.image.push(diagnostic.decode(entry) as ImageErrorEvent);
+                break;
+            default:
+                console.error(`No handler for Event: ${JSON.stringify(entry)}`);
+                break;
+        }
+    }
+
+    /* Enrich decoded payload with derived events */
+    payload.summary = data.summary() as SummaryEvent[];
+    if (payload.dom && payload.dom.length > 0) { payload.hash = layout.hash() as HashEvent[]; }
+    if (layout.resources.length > 0) { payload.resource = layout.resource() as ResourceEvent[]; }
+
+    return payload;
+}
+
+export function html(decoded: DecodedPayload): string {
+    let iframe = document.createElement("iframe");
+    render(decoded, iframe);
+    return iframe.contentDocument.documentElement.outerHTML;
+}
+
+export function render(decoded: DecodedPayload, iframe: HTMLIFrameElement, header?: HTMLElement): void {
+    // Reset rendering if we receive a new pageId
+    if (pageId !== decoded.envelope.pageId) {
+        pageId = decoded.envelope.pageId;
+        r.reset();
+    }
+
+    // Replay events
+    let events: DecodedEvent[] = [];
+    for (let key in decoded) {
+        if (Array.isArray(decoded[key])) {
+            events = events.concat(decoded[key]);
+        }
+    }
+    replay(events.sort(sort), iframe, header);
+}
+
+export async function replay(events: DecodedEvent[], iframe: HTMLIFrameElement, header?: HTMLElement): Promise<void> {
+    let start = events[0].time;
+    for (let entry of events) {
+        if (entry.time - start > 16) { start = await wait(entry.time); }
+
+        switch (entry.event) {
+            case Event.Page:
+                let pageEvent = entry as PageEvent;
+                r.page(pageEvent.data, iframe);
+                break;
+            case Event.Metric:
+                let metricEvent = entry as MetricEvent;
+                if (header) { r.metric(metricEvent.data, header); }
+                break;
+            case Event.Discover:
+            case Event.Mutation:
+                let domEvent = entry as DomEvent;
+                r.markup(domEvent.data, iframe);
+                break;
+            case Event.BoxModel:
+                let boxModelEvent = entry as BoxModelEvent;
+                r.boxmodel(boxModelEvent.data, iframe);
+                break;
+            case Event.MouseDown:
+            case Event.MouseUp:
+            case Event.MouseMove:
+            case Event.MouseWheel:
+            case Event.Click:
+            case Event.DoubleClick:
+            case Event.RightClick:
+            case Event.TouchStart:
+            case Event.TouchCancel:
+            case Event.TouchEnd:
+            case Event.TouchMove:
+                let pointerEvent = entry as PointerEvent;
+                r.pointer(pointerEvent.event, pointerEvent.data, iframe);
+                break;
+            case Event.InputChange:
+                let changeEvent = entry as InputChangeEvent;
+                r.change(changeEvent.data, iframe);
+                break;
+            case Event.Selection:
+                let selectionEvent = entry as SelectionEvent;
+                r.selection(selectionEvent.data, iframe);
+                break;
+            case Event.Resize:
+                let resizeEvent = entry as ResizeEvent;
+                r.resize(resizeEvent.data, iframe);
+                break;
+            case Event.Scroll:
+                let scrollEvent = entry as ScrollEvent;
+                r.scroll(scrollEvent.data, iframe);
+                break;
+        }
+    }
+}
+
+async function wait(timestamp: number): Promise<number> {
+    return new Promise<number>((resolve: FrameRequestCallback): void => {
+        setTimeout(resolve, 10, timestamp);
+    });
+}
+
+function sort(a: DecodedEvent, b: DecodedEvent): number {
+    return a.time - b.time;
+}

decode/data.ts

@@ -0,0 +1,79 @@
+import { BooleanFlag, Envelope, Event, MetricData, PageData, PingData } from "../types/data";
+import { SummaryData, TagData, Token, Upload, UploadData } from "../types/data";
+import { DataEvent } from "../types/decode/data";
+
+let summaries: { [key: number]: SummaryData[] } = null;
+const SUMMARY_THRESHOLD = 30;
+
+export function reset(): void {
+    summaries = {};
+}
+
+export function decode(tokens: Token[]): DataEvent {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Event;
+    switch (event) {
+        case Event.Page:
+            let page: PageData = {
+                timestamp: tokens[2] as number,
+                ua: tokens[3] as string,
+                url: tokens[4] as string,
+                referrer: tokens[5] as string,
+                lean: tokens[6] as BooleanFlag,
+            };
+            return { time, event, data: page };
+        case Event.Ping:
+            let ping: PingData = { gap: tokens[2] as number };
+            return { time, event, data: ping };
+        case Event.Tag:
+            let tag: TagData = { key: tokens[2] as string, value: tokens[3] as string };
+            return { time, event, data: tag };
+        case Event.Upload:
+            let upload: UploadData = { sequence: tokens[2] as number, attempts: tokens[3] as number, status: tokens[4] as number};
+            return { time, event, data: upload };
+        case Event.Metric:
+            let i = 2; // Start from 3rd index since first two are used for time & event
+            let metrics: MetricData = {};
+            while (i < tokens.length) {
+                metrics[tokens[i++] as number] = tokens[i++] as number;
+            }
+            return { time, event, data: metrics };
+    }
+}
+
+export function envelope(tokens: Token[]): Envelope {
+    return {
+        sequence: tokens[0] as number,
+        version: tokens[1] as string,
+        projectId: tokens[2] as string,
+        userId: tokens[3] as string,
+        sessionId: tokens[4] as string,
+        pageId: tokens[5] as string,
+        upload: tokens[6] as Upload,
+        end: tokens[7] as BooleanFlag
+    };
+}
+
+export function summarize(entry: Token[]): void {
+    let time = entry[0] as number;
+    let type = entry[1] as Event;
+    let data: SummaryData = { event: type, start: time, end: time };
+    if (!(type in summaries)) { summaries[type] = [data]; }
+
+    let s = summaries[type][summaries[type].length - 1];
+    if (time - s.end < SUMMARY_THRESHOLD) { s.end = time; } else { summaries[type].push(data); }
+}
+
+export function summary(): DataEvent[] {
+    let data: SummaryData[] = [];
+    let time = null;
+    for (let type in summaries) {
+        if (summaries[type]) {
+            for (let d of summaries[type]) {
+                time = time ? Math.min(time, d.start) : d.start;
+                data.push(d);
+            }
+        }
+    }
+    return data.length > 0 ? [{ time, event: Event.Summary, data }] : null;
+}

decode/diagnostic.ts

@@ -0,0 +1,25 @@
+import { Event, Token } from "../types/data";
+import { DiagnosticEvent } from "../types/decode/diagnostic";
+import { ImageErrorData, ScriptErrorData } from "../types/diagnostic";
+
+export function decode(tokens: Token[]): DiagnosticEvent {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Event;
+    switch (event) {
+        case Event.ImageError:
+            let imageError: ImageErrorData = {
+                source: tokens[2] as string,
+                target: tokens[3] as number
+            };
+            return { time, event, data: imageError };
+        case Event.ScriptError:
+            let scriptError: ScriptErrorData = {
+                message: tokens[3] as string,
+                line: tokens[4] as number,
+                column: tokens[5] as number,
+                stack: tokens[6] as string,
+                source: tokens[2] as string
+            };
+            return { time, event, data: scriptError };
+    }
+}

decode/index.ts

@@ -0,0 +1 @@
+export * from "./clarity";

decode/interaction.ts

@@ -0,0 +1,49 @@
+import { Event, Token } from "../types/data";
+import { InteractionEvent } from "../types/decode/interaction";
+import { InputChangeData, PointerData, ResizeData, ScrollData, SelectionData, UnloadData, VisibilityData } from "../types/interaction";
+
+export function decode(tokens: Token[]): InteractionEvent  {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Event;
+    switch (event) {
+        case Event.MouseDown:
+        case Event.MouseUp:
+        case Event.MouseMove:
+        case Event.MouseWheel:
+        case Event.Click:
+        case Event.DoubleClick:
+        case Event.RightClick:
+        case Event.TouchStart:
+        case Event.TouchCancel:
+        case Event.TouchEnd:
+        case Event.TouchMove:
+            let pointerData: PointerData = { target: tokens[2] as number, x: tokens[3] as number, y: tokens[4] as number };
+            return { time, event, data: pointerData };
+        case Event.Resize:
+            let resizeData: ResizeData = { width: tokens[2] as number, height: tokens[3] as number };
+            return { time, event, data: resizeData };
+        case Event.InputChange:
+            let changeData: InputChangeData = {
+                target: tokens[2] as number,
+                value: tokens[3] as string
+            };
+            return { time, event, data: changeData };
+        case Event.Selection:
+            let selectionData: SelectionData = {
+                start: tokens[2] as number,
+                startOffset: tokens[3] as number,
+                end: tokens[4] as number,
+                endOffset: tokens[5] as number
+            };
+            return { time, event, data: selectionData };
+        case Event.Scroll:
+            let scrollData: ScrollData = { target: tokens[2] as number, x: tokens[3] as number, y: tokens[4] as number };
+            return { time, event, data: scrollData };
+        case Event.Visibility:
+            let visibleData: VisibilityData = { visible: tokens[2] as string };
+            return { time, event, data: visibleData };
+        case Event.Unload:
+            let unloadData: UnloadData = { name: tokens[2] as string };
+            return { time, event, data: unloadData };
+    }
+}