clarity-js 0.6.23

package/src/data/metadata.ts

@@ -0,0 +1,232 @@
+import { Time } from "@clarity-types/core";
+import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, Metric, Session, User, Setting } from "@clarity-types/data";
+import * as core from "@src/core";
+import config from "@src/core/config";
+import hash from "@src/core/hash";
+import * as dimension from "@src/data/dimension";
+import * as metric from "@src/data/metric";
+import { set } from "@src/data/variable";
+
+export let data: Metadata = null;
+export let callback: MetadataCallback = null;
+let rootDomain = null;
+
+export function start(): void {
+  callback = null;
+  rootDomain = null;
+  const ua = navigator && "userAgent" in navigator ? navigator.userAgent : Constant.Empty;
+  const title = document && document.title ? document.title : Constant.Empty;
+
+  // Populate ids for this page
+  let s = session();
+  let u = user();
+  data = {
+    projectId: config.projectId || hash(location.host),
+    userId: u.id,
+    sessionId: s.session,
+    pageNum: s.count
+  }
+
+  // Override configuration based on what's in the session storage
+  config.lean = config.track && s.upgrade !== null ? s.upgrade === BooleanFlag.False : config.lean;
+  config.upload = config.track && typeof config.upload === Constant.String && s.upload ? s.upload : config.upload;
+  // Log dimensions
+  dimension.log(Dimension.UserAgent, ua);
+  dimension.log(Dimension.PageTitle, title);
+  dimension.log(Dimension.Url, location.href);
+  dimension.log(Dimension.Referrer, document.referrer);
+  dimension.log(Dimension.TabId, tab());
+  dimension.log(Dimension.PageLanguage, document.documentElement.lang);
+  dimension.log(Dimension.DocumentDirection, document.dir);
+
+  if (navigator) {
+    dimension.log(Dimension.Language, (<any>navigator).userLanguage || navigator.language);
+  }
+
+  // Metrics
+  metric.max(Metric.ClientTimestamp, s.ts);
+  metric.max(Metric.Playback, BooleanFlag.False);
+  if (screen) {
+    metric.max(Metric.ScreenWidth, Math.round(screen.width));
+    metric.max(Metric.ScreenHeight, Math.round(screen.height));
+    metric.max(Metric.ColorDepth, Math.round(screen.colorDepth));
+  }
+
+  // Read cookies specified in configuration
+  for (let key of config.cookies) {
+    let value = getCookie(key);
+    if (value) { set(key, value); }
+  }
+
+  // Track ids using a cookie if configuration allows it
+  track(u);
+}
+
+export function stop(): void {
+  callback = null;
+  rootDomain = null;
+}
+
+export function metadata(cb: MetadataCallback): void {
+  callback = cb;
+}
+
+export function id(): string {
+  return data ? [data.userId, data.sessionId, data.pageNum].join(Constant.Dot) : Constant.Empty;
+}
+
+export function consent(): void {
+  if (core.active()) {
+    config.track = true;
+    track(user(), BooleanFlag.True);
+  }
+}
+
+export function clear(): void {
+  // Clear any stored information in the cookie that tracks session information so we can restart fresh the next time
+  setCookie(Constant.SessionKey, Constant.Empty, 0);
+}
+
+function tab(): string {
+  let id = shortid();
+  if (config.track && supported(window, Constant.SessionStorage)) {
+    let value = sessionStorage.getItem(Constant.TabKey);
+    id = value ? value : id;
+    sessionStorage.setItem(Constant.TabKey, id);
+  }
+  return id;
+}
+
+export function save(): void {
+  let ts = Math.round(Date.now());
+  let upgrade = config.lean ? BooleanFlag.False : BooleanFlag.True;
+  let upload = config.upload && typeof config.upload === Constant.String ? (config.upload as string).replace(Constant.HTTPS, Constant.Empty) : Constant.Empty;
+  if (upgrade && callback) { callback(data, !config.lean); }
+  setCookie(Constant.SessionKey, [data.sessionId, ts, data.pageNum, upgrade, upload].join(Constant.Pipe), Setting.SessionExpire);
+}
+
+function supported(target: Window | Document, api: string): boolean {
+  try { return !!target[api]; } catch { return false; }
+}
+
+function track(u: User, consent: BooleanFlag = null): void {
+  // If consent is not explicitly specified, infer it from the user object
+  consent = consent === null ? u.consent : consent;
+  // Convert time precision into days to reduce number of bytes we have to write in a cookie
+  // E.g. Math.ceil(1628735962643 / (24*60*60*1000)) => 18852 (days) => ejo in base36 (13 bytes => 3 bytes)
+  let end = Math.ceil((Date.now() + (Setting.Expire * Time.Day))/Time.Day);
+  // To avoid cookie churn, write user id cookie only once every day
+  if (u.expiry === null || Math.abs(end - u.expiry) >= Setting.CookieInterval || u.consent !== consent) {
+    setCookie(Constant.CookieKey, [data.userId, Setting.CookieVersion, end.toString(36), consent].join(Constant.Pipe), Setting.Expire);
+  }
+}
+
+function shortid(): string {
+  let id = Math.floor(Math.random() * Math.pow(2, 32));
+  if (window && window.crypto && window.crypto.getRandomValues && Uint32Array) {
+    id = window.crypto.getRandomValues(new Uint32Array(1))[0];
+  }
+  return id.toString(36);
+}
+
+function session(): Session {
+  let output: Session = { session: shortid(), ts: Math.round(Date.now()), count: 1, upgrade: null, upload: Constant.Empty };
+  let value = getCookie(Constant.SessionKey);
+  if (value) {
+    let parts = value.split(Constant.Pipe);
+    // Making it backward & forward compatible by using greater than comparison (v0.6.21)
+    // In future version, we can reduce the parts length to be 5 where the last part contains the full upload URL
+    if (parts.length >= 5 && output.ts - num(parts[1]) < Setting.SessionTimeout) {
+      output.session = parts[0];
+      output.count = num(parts[2]) + 1;
+      output.upgrade = num(parts[3]);
+      output.upload = parts.length >= 6 ? `${Constant.HTTPS}${parts[5]}/${parts[4]}` : `${Constant.HTTPS}${parts[4]}`;
+    }
+  }
+  return output;
+}
+
+function num(string: string, base: number = 10): number {
+  return parseInt(string, base);
+}
+
+function user(): User {
+  let output: User = { id: shortid(), expiry: null, consent: BooleanFlag.False };
+  let cookie = getCookie(Constant.CookieKey);
+  if(cookie && cookie.length > 0) {
+    // Splitting and looking up first part for forward compatibility, in case we wish to store additional information in a cookie
+    let parts = cookie.split(Constant.Pipe);
+    // For backward compatibility introduced in v0.6.18; following code can be removed with future iterations
+    // Count number of times Clarity's user cookie crumb appears in document.cookie (could be on different sub-domains e.g. www.domain.com and .domain.com)
+    let count = 0;
+    for (let c of document.cookie.split(Constant.Semicolon)) { count += c.split(Constant.Equals)[0].trim() === Constant.CookieKey ? 1 : 0; }
+    // Check if we either got version-less cookie value or saw multiple copies of the user cookie crumbs
+    // In both these cases, we go ahead and delete the existing cookie set on current domain
+    if (parts.length === 1 || count > 1) {
+      let deleted = `${Constant.Semicolon}${Constant.Expires}${(new Date(0)).toUTCString()}${Constant.Path}`;
+      // First, delete current user cookie which might be set on current sub-domain vs. root domain
+      document.cookie = `${Constant.CookieKey}=${deleted}`;
+      // Second, same thing for current session cookie so it can be re-written later with the root domain
+      document.cookie = `${Constant.SessionKey}=${deleted}`;
+    }
+    // End code for backward compatibility
+    // Read version information and timestamp from cookie, if available
+    if (parts.length > 2) { output.expiry = num(parts[2], 36); }
+    // Check if we have explicit consent to track this user
+    if (parts.length > 3 && num(parts[3]) === 1) { output.consent = BooleanFlag.True; }
+    // Set track configuration to true for this user if we have explicit consent, regardless of project setting
+    config.track = config.track || output.consent === BooleanFlag.True;
+    // Get user id from cookie only if we tracking is enabled, otherwise fallback to a random id
+    output.id = config.track ? parts[0] : output.id;
+  }
+  return output;
+}
+
+function getCookie(key: string): string {
+  if (supported(document, Constant.Cookie)) {
+    let cookies: string[] = document.cookie.split(Constant.Semicolon);
+    if (cookies) {
+      for (let i = 0; i < cookies.length; i++) {
+        let pair: string[] = cookies[i].split(Constant.Equals);
+        if (pair.length > 1 && pair[0] && pair[0].trim() === key) {
+          return pair[1];
+        }
+      }
+    }
+  }
+  return null;
+}
+
+function setCookie(key: string, value: string, time: number): void {
+  if (config.track && ((navigator && navigator.cookieEnabled) ||  supported(document, Constant.Cookie))) {
+    let expiry = new Date();
+    expiry.setDate(expiry.getDate() + time);
+    let expires = expiry ? Constant.Expires + expiry.toUTCString() : Constant.Empty;
+    let cookie = `${key}=${value}${Constant.Semicolon}${expires}${Constant.Path}`;
+    try {
+      // Attempt to get the root domain only once and fall back to writing cookie on the current domain.
+      if (rootDomain === null) {
+        let hostname = location.hostname ? location.hostname.split(Constant.Dot) : [];
+        // Walk backwards on a domain and attempt to set a cookie, until successful
+        for (let i = hostname.length - 1; i >= 0; i--) {
+          rootDomain = `.${hostname[i]}${rootDomain ? rootDomain : Constant.Empty}`;
+          // We do not wish to attempt writing a cookie on the absolute last part of the domain, e.g. .com or .net.
+          // So we start attempting after second-last part, e.g. .domain.com (PASS) or .co.uk (FAIL)
+          if (i < hostname.length - 1) { 
+            // Write the cookie on the current computed top level domain
+            document.cookie = `${cookie}${Constant.Semicolon}${Constant.Domain}${rootDomain}`;
+            // Once written, check if the cookie exists and its value matches exactly with what we intended to set
+            // Checking for exact value match helps us eliminate a corner case where the cookie may already be present with a different value
+            // If the check is successful, no more action is required and we can return from the function since rootDomain cookie is already set
+            // If the check fails, continue with the for loop until we can successfully set and verify the cookie
+            if (getCookie(key) === value) { return; }
+          }
+        }
+        // Finally, if we were not successful and gone through all the options, play it safe and reset rootDomain to be empty
+        // This forces our code to fall back to always writing cookie to the current domain
+        rootDomain = Constant.Empty;
+      }
+    } catch { rootDomain = Constant.Empty; }
+    document.cookie = rootDomain ? `${cookie}${Constant.Semicolon}${Constant.Domain}${rootDomain}` : cookie;
+  }
+}

package/src/data/metric.ts

@@ -0,0 +1,51 @@
+import { Event, Metric, MetricData } from "@clarity-types/data";
+import encode from "./encode";
+
+export let data: MetricData = null;
+export let updates: MetricData = null;
+
+export function start(): void {
+    data = {};
+    updates = {};
+    count(Metric.InvokeCount);
+}
+
+export function stop(): void {
+    data = {};
+    updates = {};
+}
+
+export function count(metric: Metric, increment: number = 1): void {
+    if (!(metric in data)) { data[metric] = 0; }
+    if (!(metric in updates)) { updates[metric] = 0; }
+    data[metric] += increment;
+    updates[metric] += increment;
+}
+
+export function sum(metric: Metric, value: number): void {
+    if (value !== null) { 
+        if (!(metric in data)) { data[metric] = 0; }
+        if (!(metric in updates)) { updates[metric] = 0; }
+        data[metric] += value;
+        updates[metric] += value;
+    }
+}
+
+export function max(metric: Metric, value: number): void {
+    // Ensure that we do not process null or NaN values
+    if (value !== null && isNaN(value) === false) { 
+        if (!(metric in data)) { data[metric] = 0; }
+        if (value > data[metric] || data[metric] === 0) {
+            updates[metric] = value;
+            data[metric] = value;
+        }
+    }
+}
+
+export function compute(): void {
+    encode(Event.Metric);
+}
+
+export function reset(): void {
+    updates = {};
+}

package/src/data/ping.ts

@@ -0,0 +1,36 @@
+import { Event, PingData, Setting } from "@clarity-types/data";
+import { suspend } from "@src/core";
+import { time } from "@src/core/time";
+import { clearTimeout, setTimeout } from "@src/core/timeout";
+import encode from "./encode";
+
+export let data: PingData;
+let last = 0;
+let interval = 0;
+let timeout: number = null;
+
+export function start(): void {
+    interval = Setting.PingInterval;
+    last = 0;
+}
+
+export function reset(): void {
+    if (timeout) { clearTimeout(timeout); }
+    timeout = setTimeout(ping, interval);
+    last = time();
+}
+
+function ping(): void {
+    let now = time();
+    data = { gap: now - last };
+    encode(Event.Ping);
+    if (data.gap < Setting.PingTimeout) {
+        timeout = setTimeout(ping, interval);
+    } else { suspend(); }
+}
+
+export function stop(): void {
+    clearTimeout(timeout);
+    last = 0;
+    interval = 0;
+}

package/src/data/summary.ts

@@ -0,0 +1,34 @@
+import { Event, SummaryData, Setting } from "@clarity-types/data";
+import encode from "./encode";
+
+export let data: SummaryData = null;
+
+export function start(): void {
+    data = {};
+}
+
+export function stop(): void {
+    data = {};
+}
+
+export function track(event: Event, time: number): void {
+    if (!(event in data)) {
+        data[event] = [[time, 0]];
+    } else {
+        let e = data[event];
+        let last = e[e.length - 1];
+        // Add a new entry only if the new event occurs after configured interval
+        // Otherwise, extend the duration of the previous entry
+        if (time - last[0] > Setting.SummaryInterval) {
+            data[event].push([time, 0]);
+        } else { last[1] = time - last[0]; }
+    }
+}
+
+export function compute(): void {
+    encode(Event.Summary);
+}
+
+export function reset(): void {
+    data = {};
+}

package/src/data/token.ts

@@ -0,0 +1,39 @@
+import {Constant, Token} from "@clarity-types/data";
+
+// Following code takes an array of tokens and transforms it to optimize for repeating tokens and make it efficient to send over the wire
+// The way it works is that it iterate over all tokens and checks if the current token was already seen in the tokens array so far
+// If so, it replaces the token with its reference (index). This helps us save bytes by not repeating the same value twice.
+// E.g. If tokens array is: ["hello", "world", "coding", "language", "world", "language", "example"]
+// Then the resulting tokens array after following code execution would be: ["hello", "world", "coding", "language", [1, 3], "example"]
+// Where [1,3] points to tokens[1] => "world" and tokens[3] => "language"
+export default function(tokens: Token[]): Token[] {
+    let output: Token[] = [];
+    let lookup: {[key: string]: number} = {};
+    let pointer = 0;
+    let reference = null;
+    for (let i = 0; i < tokens.length; i++) {
+        // Only optimize for string values
+        if (typeof tokens[i] === Constant.String) {
+            let token = tokens[i] as string;
+            let index = lookup[token] || -1;
+            if (index >= 0) {
+                if (reference) { reference.push(index); } else {
+                    reference = [index];
+                    output.push(reference);
+                    pointer++;
+                }
+            } else {
+                reference = null;
+                output.push(token);
+                lookup[token] = pointer++;
+            }
+        } else {
+            // If the value is anything other than string, append it as it is to the output array
+            // And, also increment the pointer to stay in sync with output array
+            reference = null;
+            output.push(tokens[i]);
+            pointer++;
+        }
+    }
+    return output;
+}

package/src/data/upgrade.ts

@@ -0,0 +1,36 @@
+import { Constant, Event, UpgradeData } from "@clarity-types/data";
+import * as core from "@src/core";
+import config from "@src/core/config";
+import encode from "@src/data/encode";
+import * as metadata from "@src/data/metadata";
+
+export let data: UpgradeData = null;
+
+export function start(): void {
+    if (!config.lean && config.upgrade) { config.upgrade(Constant.Config); }
+    data = null;
+}
+
+// Following call will upgrade the session from lean mode into the full mode retroactively from the start of the page.
+// As part of the lean mode, we do not send back any layout information - including discovery of DOM and mutations.
+// However, if there's a need for full fidelity playback, calling this function will disable lean mode
+// and send all backed up layout events to the server.
+export function upgrade(key: string): void {
+    // Upgrade only if Clarity was successfully activated on the page
+    if (core.active() && config.lean) {
+        config.lean = false;
+        data = { key };
+
+        // Update metadata to track we have upgraded this session
+        metadata.save();
+
+        // Callback upgrade handler, if configured
+        if (config.upgrade) { config.upgrade(key); }
+
+        encode(Event.Upgrade);
+    }
+}
+
+export function stop(): void {
+    data = null;
+}

package/src/data/upload.ts

@@ -0,0 +1,250 @@
+import { UploadCallback } from "@clarity-types/core";
+import { BooleanFlag, Check, Constant, EncodedPayload, Event, Metric, Setting, Token, Transit, UploadData, XMLReadyState } from "@clarity-types/data";
+import * as clarity from "@src/clarity";
+import config from "@src/core/config";
+import measure from "@src/core/measure";
+import { time } from "@src/core/time";
+import { clearTimeout, setTimeout } from "@src/core/timeout";
+import compress from "@src/data/compress";
+import encode from "@src/data/encode";
+import * as envelope from "@src/data/envelope";
+import * as data from "@src/data/index";
+import * as limit from "@src/data/limit";
+import * as metadata from "@src/data/metadata";
+import * as metric from "@src/data/metric";
+import * as ping from "@src/data/ping";
+import * as timeline from "@src/interaction/timeline";
+import * as region from "@src/layout/region";
+
+let discoverBytes: number = 0;
+let playbackBytes: number = 0;
+let playback: string[];
+let analysis: string[];
+let timeout: number = null;
+let transit: Transit;
+let active: boolean;
+let queuedTime: number = 0;
+export let track: UploadData;
+
+export function start(): void {
+    active = true;
+    discoverBytes = 0;
+    playbackBytes = 0;
+    queuedTime = 0;
+    playback = [];
+    analysis = [];
+    transit = {};
+    track = null;
+}
+
+export function queue(tokens: Token[], transmit: boolean = true): void {
+    if (active) {
+        let now = time();
+        let type = tokens.length > 1 ? tokens[1] : null;
+        let event = JSON.stringify(tokens);
+        
+        switch (type) {
+            case Event.Discover:
+                discoverBytes += event.length;
+            case Event.Box:
+            case Event.Mutation:
+                playbackBytes += event.length;
+                playback.push(event);
+                break;
+            default:
+                analysis.push(event);
+                break;
+        }
+
+        // Following two checks are precautionary and act as a fail safe mechanism to get out of unexpected situations.
+        // Check 1: If for any reason the upload hasn't happened after waiting for 2x the config.delay time,
+        // reset the timer. This allows Clarity to attempt an upload again.
+        let gap = delay();
+        if (now - queuedTime > (gap * 2)) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+
+        // Transmit Check: When transmit is set to true (default), it indicates that we should schedule an upload
+        // However, in certain scenarios - like metric calculation - which are triggered as part of an existing upload
+        // We enrich the data going out with the existing upload. In these cases, call to upload comes with 'transmit' set to false.
+        if (transmit && timeout === null) {
+            if (type !== Event.Ping) { ping.reset(); }
+            timeout = setTimeout(upload, gap);
+            queuedTime = now;
+            limit.check(playbackBytes);
+        }
+    }
+}
+
+export function stop(): void {
+    clearTimeout(timeout);
+    upload(true);
+    discoverBytes = 0;
+    playbackBytes = 0;
+    queuedTime = 0;
+    playback = [];
+    analysis = [];
+    transit = {};
+    track = null;
+    active = false;
+}
+
+async function upload(final: boolean = false): Promise<void> {
+    timeout = null;
+
+    // Check if we can send playback bytes over the wire or not
+    // For better instrumentation coverage, we send playback bytes from second sequence onwards
+    // And, we only send playback metric when we are able to send the playback bytes back to server
+    let sendPlaybackBytes = config.lean === false && playbackBytes > 0 && (playbackBytes < Setting.MaxFirstPayloadBytes || envelope.data.sequence > 0);
+    if (sendPlaybackBytes) { metric.max(Metric.Playback, BooleanFlag.True); }
+
+    // CAUTION: Ensure "transmit" is set to false in the queue function for following events
+    // Otherwise you run a risk of infinite loop.
+    region.compute();
+    timeline.compute();
+    data.compute();
+
+    // Treat this as the last payload only if final boolean was explicitly set to true.
+    // In real world tests, we noticed that certain third party scripts (e.g. https://www.npmjs.com/package/raven-js)
+    // could inject function arguments for internal tracking (likely stack traces for script errors).
+    // For these edge cases, we want to ensure that an injected object (e.g. {"key": "value"}) isn't mistaken to be true.
+    let last = final === true;
+    let e = JSON.stringify(envelope.envelope(last));
+    let a = `[${analysis.join()}]`;
+
+    let p = sendPlaybackBytes ? `[${playback.join()}]` : Constant.Empty;
+    let encoded: EncodedPayload = {e, a, p};
+    
+    // Get the payload ready for sending over the wire
+    // We also attempt to compress the payload if it is not the last payload and the browser supports it
+    // In all other cases, we continue to send back string value
+    let payload = stringify(encoded);
+    let zipped = last ? null : await compress(payload) 
+    metric.sum(Metric.TotalBytes, zipped ? zipped.length : payload.length);
+    send(payload, zipped, envelope.data.sequence, last);
+
+    // Clear out events now that payload has been dispatched
+    analysis = [];
+    if (sendPlaybackBytes) {
+        playback = [];
+        playbackBytes = 0;
+        discoverBytes = 0;
+    }
+}
+
+function stringify(encoded: EncodedPayload): string {
+    return encoded.p.length > 0 ? `{"e":${encoded.e},"a":${encoded.a},"p":${encoded.p}}` : `{"e":${encoded.e},"a":${encoded.a}}`;
+}
+
+function send(payload: string, zipped: Uint8Array, sequence: number, beacon: boolean = false): void {
+    // Upload data if a valid URL is defined in the config
+    if (typeof config.upload === Constant.String) {
+        const url = config.upload as string;
+        let dispatched = false;
+
+        // If it's the last payload, attempt to upload using sendBeacon first.
+        // The advantage to using sendBeacon is that browser can decide to upload asynchronously, improving chances of success
+        // However, we don't want to rely on it for every payload, since we have no ability to retry if the upload failed.
+        // Also, in case of sendBeacon, we do not have a way to alter HTTP headers and therefore can't send compressed payload
+        if (beacon && "sendBeacon" in navigator) {
+            dispatched = navigator.sendBeacon(url, payload);
+            if (dispatched) { done(sequence); }
+        }
+
+        // Before initiating XHR upload, we check if the data has already been uploaded using sendBeacon
+        // There are two cases when dispatched could still be false:
+        //   a) It's not the last payload, and therefore we didn't attempt sending sendBeacon
+        //   b) It's the last payload, however, we failed to queue sendBeacon call and need to now fall back to XHR.
+        //      E.g. if data is over 64KB, several user agents (like Chrome) will reject to queue the sendBeacon call.
+        if (dispatched === false) {
+            // While tracking payload for retry, we only track string value of the payload to err on the safe side
+            // Not all browsers support compression API and the support for it in supported browsers is still experimental
+            if (sequence in transit) { transit[sequence].attempts++; } else { transit[sequence] = { data: payload, attempts: 1 }; }
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", url);
+            if (sequence !== null) { xhr.onreadystatechange = (): void => { measure(check)(xhr, sequence); }; }
+            xhr.withCredentials = true;
+            if (zipped) {
+                // If we do have valid compressed array, send it with appropriate HTTP headers so server can decode it appropriately
+                xhr.setRequestHeader(Constant.Accept, Constant.ClarityGzip);
+                xhr.send(zipped);
+            } else {
+                // In all other cases, continue sending string back to the server
+                xhr.send(payload);
+            }
+        }
+    } else if (config.upload) {
+        const callback = config.upload as UploadCallback;
+        callback(payload);
+        done(sequence);
+    }
+}
+
+function check(xhr: XMLHttpRequest, sequence: number): void {
+    var transitData = transit[sequence];
+    if (xhr && xhr.readyState === XMLReadyState.Done && transitData) {
+        // Attempt send payload again (as configured in settings) if we do not receive a success (2XX) response code back from the server
+        if ((xhr.status < 200 || xhr.status > 208) && transitData.attempts <= Setting.RetryLimit) {
+            // We re-attempt in all cases except when server explicitly rejects our request with 4XX error 
+            if (xhr.status >= 400 && xhr.status < 500) {
+                // In case of a 4XX response from the server, we bail out instead of trying again
+                limit.trigger(Check.Server);
+            } else {
+                // Browser will send status = 0 when it refuses to put network request over the wire
+                // This could happen for several reasons, couple of known ones are:
+                //    1: Browsers block upload because of content security policy violation
+                //    2: Safari will terminate pending XHR requests with status code 0 if the user navigates away from the page
+                // In any case, we switch the upload URL to fallback configuration (if available) before re-trying one more time
+                if (xhr.status === 0) { config.upload = config.fallback ? config.fallback : config.upload; }
+                // In all other cases, re-attempt sending the same data
+                // For retry we always fallback to string payload, even though we may have attempted
+                // sending zipped payload earlier
+                send(transitData.data, null, sequence);
+            }
+        } else {
+            track = { sequence, attempts: transitData.attempts, status: xhr.status };
+            // Send back an event only if we were not successful in our first attempt
+            if (transitData.attempts > 1) { encode(Event.Upload); }
+            // Handle response if it was a 200 response with a valid body
+            if (xhr.status === 200 && xhr.responseText) { response(xhr.responseText); }
+            // If we exhausted our retries then trigger Clarity's shutdown for this page since the data will be incomplete
+            if (xhr.status === 0) { 
+                // And, right before we terminate the session, we will attempt one last time to see if we can use
+                // different transport option (sendBeacon vs. XHR) to get this data to the server for analysis purposes
+                send(transitData.data, null, sequence, true);
+                limit.trigger(Check.Retry);
+            }
+            // Signal that this request completed successfully
+            if (xhr.status >= 200 && xhr.status <= 208) { done(sequence); }
+            // Stop tracking this payload now that it's all done
+            delete transit[sequence];
+        }
+    }
+}
+
+function done(sequence: number): void {
+    // If we everything went successfully, and it is the first sequence, save this session for future reference
+    if (sequence === 1) { metadata.save(); }
+}
+
+function delay(): number {
+    // Progressively increase delay as we continue to send more payloads from the client to the server
+    // If we are not uploading data to a server, and instead invoking UploadCallback, in that case keep returning configured value 
+    let gap = config.lean === false && discoverBytes > 0 ? Setting.MinUploadDelay : envelope.data.sequence * config.delay;
+    return typeof config.upload === Constant.String ? Math.max(Math.min(gap, Setting.MaxUploadDelay), Setting.MinUploadDelay) : config.delay;
+}
+
+function response(payload: string): void {
+    let key = payload && payload.length > 0 ? payload.split(" ")[0] : Constant.Empty;
+    switch (key) {
+        case Constant.End:
+            // Clear out session storage and end the session so we can start fresh the next time
+            limit.trigger(Check.Server);
+            break;
+        case Constant.Upgrade:
+            // Upgrade current session to send back playback information
+            clarity.upgrade(Constant.Auto);
+            break;
+    }
+}