@appxiom/web 0.1.8

package/ax_web_core/ax_web_core_bg.wasm.d.ts

@@ -0,0 +1,48 @@
+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export const __wbg_get_leakrecord_age: (a: number) => number;
+export const __wbg_get_leakrecord_first_seen: (a: number) => bigint;
+export const __wbg_get_leakrecord_gc_survivals: (a: number) => number;
+export const __wbg_get_leakrecord_instance_id: (a: number) => number;
+export const __wbg_get_leakrecord_last_gc_epoch: (a: number) => number;
+export const __wbg_leakanalyzer_free: (a: number, b: number) => void;
+export const __wbg_leakrecord_free: (a: number, b: number) => void;
+export const __wbg_set_leakrecord_age: (a: number, b: number) => void;
+export const __wbg_set_leakrecord_first_seen: (a: number, b: bigint) => void;
+export const __wbg_set_leakrecord_gc_survivals: (a: number, b: number) => void;
+export const __wbg_set_leakrecord_instance_id: (a: number, b: number) => void;
+export const __wbg_set_leakrecord_last_gc_epoch: (a: number, b: number) => void;
+export const end_goal: (a: number, b: number) => number;
+export const get_device_state_js: () => number;
+export const handle_api_after_request: (a: number, b: number, c: number, d: bigint) => number;
+export const handle_api_after_response: (a: number, b: number, c: number, d: bigint, e: number, f: number, g: bigint, h: number) => number;
+export const handle_api_on_error: (a: number, b: number, c: number, d: bigint, e: number) => number;
+export const init: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => number;
+export const leakanalyzer_evaluate_leaks: (a: number) => number;
+export const leakanalyzer_new: () => number;
+export const leakanalyzer_notify_gc_epoch: (a: number) => number;
+export const leakanalyzer_report_leak: (a: number) => number;
+export const leakanalyzer_track_instance: (a: number, b: number) => number;
+export const log_activity: (a: number, b: number, c: number) => number;
+export const log_event: (a: number, b: number) => number;
+export const log_event_activity: (a: number, b: number, c: number) => number;
+export const log_resource_load_error: (a: number, b: number, c: number) => number;
+export const report_custom_issue: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => number;
+export const report_error: (a: number) => number;
+export const set_custom_id: (a: number, b: number) => number;
+export const start_goal: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_458: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_1045: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_1102: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_455: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_461: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_461_4: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_450: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_465: (a: number, b: number) => void;
+export const __wbindgen_export: (a: number, b: number) => number;
+export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
+export const __wbindgen_export3: (a: number) => void;
+export const __wbindgen_export4: (a: number, b: number) => void;
+export const __wbindgen_export5: (a: number, b: number, c: number) => void;
+export const __wbindgen_add_to_stack_pointer: (a: number) => number;

package/console/patch.js

@@ -0,0 +1,10 @@
+import AX from '../core/ax.js';
+
+
+
+// Add a new function ax to console object. It should have blue color and aprefix with "AX: " 
+const log_api = AX.instance.wasm.log_api;
+console.ax = (message) => {
+    //log_api(`AX: ${message}`);
+    console.log(`%cAX: ${message}`, 'color: blue; font-weight: bold;');
+};

package/core/ax.js

@@ -0,0 +1,96 @@
+/**
+ * Singleton class representing the AX-JS core module.
+ */
+
+import * as wasm from '../ax_web_core/ax_web_core.js';
+
+export default class AX {
+    // Static instance
+    static instance = null;
+
+    // Application and platform keys
+    appKey;
+    platformKey;
+    version;
+    buildIdentifier;
+    wasm;
+
+    // Singleton pattern
+
+    constructor(appKey, platformKey, version, buildIdentifier) {
+        if (AX.instance) return AX.instance;
+        this.wasm = wasm;
+        this.appKey = appKey;
+        this.platformKey = platformKey;
+        this.version = version;
+        this.buildIdentifier = buildIdentifier;
+        AX.instance = this;
+        // Additional initialization logic can go here
+    }
+
+    // Launch the AX module
+    async launch() {
+        // Load wasm module
+        await this.wasm.default();
+        // Load runtime patches synchronously using dynamic imports
+        await import('../console/patch.js');
+        await import('../error/patch.js');
+        await import('../http/ax-http.js');
+        await import('../event/ax-event.js');
+        await import('../memory/ax-dom-leak.js');
+
+        // initialize the wasm module with app key, platform key, version, and build identifier
+        await this.wasm.init(this.appKey, this.platformKey, this.version, this.buildIdentifier);
+
+    }
+
+    // Start a goal with the given name
+    startGoal(name) {
+        if (this.wasm && this.wasm.start_goal) {
+            this.wasm.start_goal(name);
+        } else {
+            // console.warn("AX Wasm not loaded, cannot start goal:", name);
+        }
+    }
+
+    // End a goal with the given name, properties, and value
+    endGoal(name, properties = {}, value = null) {
+        if (this.wasm && this.wasm.end_goal) {
+            this.wasm.end_goal(name, "Success", properties, value);
+        } else {
+            // console.warn("AX Wasm not loaded, cannot end goal:", name);
+        }
+    }
+
+    // Report a custom issue
+    // Severity can be 
+    // - 0 -> Minor
+    // - 1 -> Major
+    // - 2 -> Fatal
+    reportCustomIssue(title, description, severity, data = {}, stacktrace = null) {
+        if (this.wasm && this.wasm.report_custom_issue) {
+            this.wasm.report_custom_issue(title, description, severity, data, stacktrace);
+        }
+    }
+
+    // Set a custom ID
+    setCustomId(customId) {
+        if (this.wasm && this.wasm.set_custom_id) {
+            this.wasm.set_custom_id(customId);
+        }
+    }
+
+    // Log activity with the given name and properties
+    logActivity(name, properties = {}) {
+        if (this.wasm && this.wasm.log_activity) {
+            this.wasm.log_activity(name, properties);
+        }
+    }
+
+    // Log an event activity with the given name and properties
+    logEventActivity(name, properties = {}) {
+        if (this.wasm && this.wasm.log_event_activity) {
+            this.wasm.log_event_activity(name, properties);
+        }
+    }
+}

package/error/patch.js

@@ -0,0 +1,47 @@
+import AX from '../core/ax.js';
+
+// 1. Patch Sync errors.
+// Store old onerror handler if it exists
+const oldOnError = window.onerror;
+window.onerror = function(message, source, lineno, colno, error) {
+    if (oldOnError) {
+        try {
+            oldOnError(message, source, lineno, colno, error);
+        } catch (e) {}
+    }
+    handleOnError(1, message, source, lineno, colno, error);
+}
+
+async function handleOnError(category, message, source, lineno, colno, error) {
+    let e = {
+        category: category,
+        message: message,
+        fileName: source,
+        lineNumber: lineno,
+        columnNumber: colno,
+        stacktrace: error ? error.stack : null
+    };
+    AX.instance.wasm.report_error(e);
+}
+
+// 2. Async errors
+window.addEventListener('unhandledrejection', function(event) {
+    handleOnError(2, event.reason ? event.reason.message : null, null, null, null, event.reason);
+});
+
+// 3. Late handled promises - rejectionhandled
+window.addEventListener('rejectionhandled', function(event) {
+    handleOnError(3, event.reason ? event.reason.message : null, null, null, null, event.reason);
+});
+
+// 4. Resource loading errors
+window.addEventListener('error', function(event) {
+    if (event.target && (event.target.src || event.target.href)) {
+        const url = event.target.src || event.target.href;
+        AX.instance.wasm.log_resource_load_error(url, {
+            message: event.message || 'Resource load error',
+            tagName: event.target.tagName,
+            innerHTML: event.target.innerHTML,
+        });
+    }
+}, true);

package/event/ax-event.js

@@ -0,0 +1,167 @@
+import AX from '../core/ax.js';
+
+// Track page load and unload events
+function reportExit() {
+  // navigator.sendBeacon(
+  //   "/telemetry",
+  //   JSON.stringify({
+  //     type: "page_exit",
+  //     url: location.href,
+  //     ts: Date.now(),
+  //   })
+  // );
+}
+
+// Track page load
+window.addEventListener("load", () => {
+  AX.instance.wasm.log_event_activity("Page Load", {
+    url: location.href,
+    referrer: document.referrer,
+    userAgent: navigator.userAgent,
+  });
+});
+
+// // Track page unload
+// document.addEventListener("visibilitychange", () => {
+//   if (document.visibilityState === "hidden") {
+//     AX.instance.wasm.log_event_activity("Page out of visibility", {
+//       url: location.href,
+//       ts: Date.now(),
+//     });
+//     reportExit();
+//   } else if (document.visibilityState === "visible") {
+//     AX.instance.wasm.log_event_activity("Page in visibility", {
+//       url: location.href,
+//       ts: Date.now(),
+//     });
+//   }
+// });
+
+// // Also track pagehide for older browsers
+// window.addEventListener("pagehide", () => {
+//   AX.instance.wasm.log_event_activity("Page Unload", {
+//     url: location.href,
+//     ts: Date.now(),
+//   });
+//   reportExit();
+// });
+
+// Track SPA route changes (if using a SPA framework)
+// This is a generic example; you may need to adapt it based on your SPA framework.
+window.addEventListener("popstate", () => {
+  AX.instance.wasm.log_event_activity("SPA Route Change", {
+    url: location.href,
+    ts: Date.now(),
+  });
+});
+
+// Track hash changes for SPA routing
+window.addEventListener("hashchange", () => {
+  AX.instance.wasm.log_event_activity("Hash Change", {
+    url: location.href,
+    ts: Date.now(),
+  });
+});
+
+// Patch pushState and replaceState to track SPA route changes
+(function () {
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+
+  history.pushState = function (...args) {
+    AX.instance.wasm.log_event_activity("SPA Route Change (pushState)", {
+      url: location.href,
+      ts: Date.now(),
+    });
+    // dispatch event ax-push-state.
+    const pushStateEvent = new Event('ax-push-state');
+    window.dispatchEvent(pushStateEvent);
+
+    const result = originalPushState.apply(this, args);
+    return result;
+  };
+
+  history.replaceState = function (...args) {
+    AX.instance.wasm.log_event_activity("SPA Route Change (replaceState)", {
+      url: location.href,
+      ts: Date.now(),
+    });
+    const replaceStateEvent = new Event('ax-replace-state');
+    window.dispatchEvent(replaceStateEvent);
+
+    const result = originalReplaceState.apply(this, args);
+    return result;
+  };
+})();
+
+// Track clicks on buttons and links
+document.addEventListener('click', (event) => {
+  const target = event.target.closest('button, a, li');
+  if (!target) return;
+
+  const info = {
+    type: event.type,
+    tag: target.tagName.toLowerCase(),
+    text: target.innerText.trim(),
+    href: target.getAttribute('href'),
+    x: event.clientX,
+    y: event.clientY,
+    ctrl: event.ctrlKey,
+    shift: event.shiftKey,
+    meta: event.metaKey,
+    button: event.button,
+    timestamp: event.timeStamp,
+    url: window.location.href,
+    path: event.composedPath().map(el => el.tagName || el.nodeName),
+  };
+
+  AX.instance.wasm.log_event_activity(`Clicked - ${info.tag} - ${info.text}`, info);
+});
+
+// Track form elements
+// listen for events after focus is changed from the element.
+document.addEventListener('change', function (event) {
+  const el = event.target;
+  if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
+    return; // Ignore non-form elements
+  }
+
+  const fieldType = el.type || el.tagName.toLowerCase();
+  let valueSummary;
+
+  switch (fieldType) {
+    case 'checkbox':
+    case 'radio':
+      valueSummary = el.checked;
+      break;
+    case 'select-one':
+      valueSummary = el.selectedIndex; // or el.value if it's non-sensitive
+      break;
+    case 'select-multiple':
+      valueSummary = Array.from(el.selectedOptions).map(o => o.index);
+      break;
+    case 'range':
+    case 'number':
+      valueSummary = Number(el.value);
+      break;
+    default:
+      valueSummary = el.value.length; // just length, not content
+      name = el.name || null;
+      break;
+  }
+
+  const data = {
+    tag: el.tagName.toLowerCase(),
+    type: fieldType,
+    name: el.name || null,
+    formName: el.form ? el.form.name : null,
+    formId: el.form ? el.form.id : null,
+    length: typeof valueSummary === 'number' ? valueSummary : 0,
+    value: valueSummary,//typeof valueSummary !== 'number' ? valueSummary : "*",
+    timestamp: Date.now(),
+  };
+
+  // Example: send to your analytics endpoint
+  // navigator.sendBeacon('/track', JSON.stringify({ event: 'form_input', ...data }));
+  AX.instance.wasm.log_event_activity(`FormFill - ${data.tag} - ${data.name}`, data);
+});

package/http/ax-http.js

@@ -0,0 +1,63 @@
+import AX from '../core/ax.js';
+
+// Track fetch
+const originalFetch = window.fetch;
+window.fetch = async function(...args) {
+    const [resource, init] = args;
+    const request = resource instanceof Request && init == null
+        ? resource.clone()
+        : new Request(resource, init);
+
+    // If request headers contain X-App-Key, skip tracking to avoid infinite loop
+    if (request.headers.get('X-App-Key'))
+        return originalFetch.apply(this, args);
+
+    const url = request.url;
+    const requestTime = BigInt(Date.now());
+
+    handleApiCallAfterRequest(url, request, requestTime);
+    
+    // Clone response to safely read body
+    let response = null;
+    try {
+        response = await originalFetch.apply(this, args);
+        let clonedResponse = response.clone();
+        handleApiCallAfterResponse(url, request, requestTime, clonedResponse, BigInt(Date.now()), new Error("Request Location:"));
+    } catch (e) {
+        handleApiCallOnError(url, request, requestTime, e);
+        throw e; // Re-throw the error to maintain the original behavior
+    }
+    return response;
+};
+
+// Track XMLHttpRequest
+const originalOpen = XMLHttpRequest.prototype.open;
+XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+    this._apiTrackerUrl = url;
+    this._apiTrackerMethod = method;
+    let result = originalOpen.apply(this, [method, url, ...rest]);
+    // console.ax(`[API TRACKER] XMLHttpRequest opened: ${method} ${url}`);
+    return result;
+};
+const originalSend = XMLHttpRequest.prototype.send;
+XMLHttpRequest.prototype.send = function(...args) {
+            // if (console.ax && this._apiTrackerUrl && (this._apiTrackerUrl.startsWith('http://') || this._apiTrackerUrl.startsWith('https://')))
+            //     console.ax(`[API TRACKER] XHR request: ${this._apiTrackerMethod} ${this._apiTrackerUrl} ${JSON.stringify(args[0] || {})}`);
+    this.addEventListener('loadend', function() {
+        // if (console.ax && this._apiTrackerUrl && (this._apiTrackerUrl.startsWith('http://') || this._apiTrackerUrl.startsWith('https://')))
+        //     console.ax(`[API TRACKER] XHR response: ${this._apiTrackerMethod} ${this._apiTrackerUrl} status=${this.status} response=${this.response}`);
+    });
+    return originalSend.apply(this, args);
+};
+
+async function handleApiCallAfterResponse(url, request, requestTime, response, responseTime, error) {
+   AX.instance.wasm.handle_api_after_response(url, request, requestTime, response, responseTime, error);
+}
+
+async function handleApiCallAfterRequest(url, request, requestTime) {
+    AX.instance.wasm.handle_api_after_request(url, request, requestTime);
+}
+
+async function handleApiCallOnError(url, request, requestTime, error) {
+    AX.instance.wasm.handle_api_on_error(url, request, requestTime, error);
+}

package/index.d.ts

@@ -0,0 +1,53 @@
+export type IssueSeverity = 0 | 1 | 2;
+
+export interface AppxiomProperties {
+  [key: string]: unknown;
+}
+
+export class AX {
+  static instance: AX | null;
+
+  constructor(
+    appKey: string,
+    platformKey: string,
+    version: string,
+    buildIdentifier?: string,
+  );
+
+  launch(): Promise<void>;
+  startGoal(name: string): void;
+  endGoal<TProperties extends object = AppxiomProperties>(
+    name: string,
+    properties?: TProperties,
+    value?: number | null,
+  ): void;
+  reportCustomIssue<TData extends object = AppxiomProperties>(
+    title: string,
+    description: string,
+    severity: IssueSeverity,
+    data?: TData,
+    stacktrace?: string | null,
+  ): void;
+  setCustomId(customId: string): void;
+  logActivity<TProperties extends object = AppxiomProperties>(
+    name: string,
+    properties?: TProperties,
+  ): void;
+  logEventActivity<TProperties extends object = AppxiomProperties>(
+    name: string,
+    properties?: TProperties,
+  ): void;
+}
+
+export class LeakTracker {
+  constructor(type?: number);
+
+  trackInstance(instance: object, snapshot?: unknown): void;
+}
+
+export default function init(
+  appKey: string,
+  platformKey: string,
+  version: string,
+  buildIdentifier?: string,
+): Promise<AX>;

package/index.js

@@ -0,0 +1,10 @@
+import AX from './core/ax.js';
+export { LeakTracker } from './memory/ax-leak.js';
+
+export default async function init(appKey, platformKey, version, buildIdentifier) {
+    const ax = new AX(appKey, platformKey, version, buildIdentifier);
+    await ax.launch();
+    return ax;
+}
+
+export { AX };

package/memory/ax-dom-leak.js

@@ -0,0 +1,77 @@
+import { LeakTracker } from './ax-leak.js';
+
+/** Dom Leak Tracker */
+class DomLeakTracker extends LeakTracker {
+    // Constructor
+    constructor() {
+        super(1); // DOM Leak Type
+
+        // Mutation Observer to track removed nodes
+        new MutationObserver(mutations => {
+            for (const m of mutations) {
+                for (const node of m.removedNodes) {
+                    if (node.nodeType === Node.ELEMENT_NODE
+                        && node.tagName.toUpperCase() !== 'SCRIPT'
+                        && node.tagName.toUpperCase() !== 'STYLE'
+                        && node.tagName.toUpperCase() !== 'BR'
+                        && node.tagName.toUpperCase() !== 'HR'
+                        && node.tagName.toUpperCase() !== 'WBR'
+                    ) {
+                        this.trackInstance(node, this.serializeWithParents(node));
+                    }
+                }
+            }
+        }).observe(document.documentElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+
+    // Check for Leak - Overriding here.
+    // A DOM element is considered leaking if it is not connected to the document.
+    isLeaking (instanceRecord) {
+        if (!super.isLeaking(instanceRecord)) return false;
+        const instance = instanceRecord.instanceRef.deref();
+        return !instance.isConnected;
+    }
+
+    // Serialize Element
+    serializeElement = (el) => {
+        if (!el || el.nodeType !== Node.ELEMENT_NODE) return null;
+
+        return {
+            tag: el.tagName.toLowerCase(),
+            id: el.id || null,
+            classes: el.className || null,
+            attributes: [...el.attributes].reduce((acc, attr) => {
+                acc[attr.name] = attr.value;
+                return acc;
+            }, {}),
+            isConnected: el.isConnected
+        };
+    }
+
+    // Serialize with Parents
+    serializeWithParents = (node, maxDepth = 5) => {
+        const chain = [];
+        let current = node;
+        let depth = 0;
+
+        while (current && depth < maxDepth) {
+            const serialized = this.serializeElement(current);
+            if (!serialized) break;
+
+            chain.push(serialized);
+            current = current.parentElement;
+            depth++;
+        }
+
+        return {
+            depth: chain.length,
+            chain
+        };
+    }
+}
+
+// Initialize DomLeakTracker
+new DomLeakTracker();

package/memory/ax-leak.js

@@ -0,0 +1,107 @@
+import AX from '../core/ax.js';
+
+// Instance Record
+class InstanceRecord {
+  constructor(id, instance, snapshot) {
+    this.id = id;
+    this.instanceRef = new WeakRef(instance); // WeakRef
+    this.snapshot = snapshot; // Serialized snapshot
+  }
+}
+
+/** Base Leak Tracker */
+export class LeakTracker {
+
+  // Leak Type
+  static LeakType = 0;
+  // LeakAnalyzer instance
+  leakAnalyzer = null;
+
+  // Weak maps for tracking instances
+  instanceIds = null;
+  instanceRefs = null;
+  nextInstanceId = 0;
+  type = 0;
+
+  // FinalizationRegistry for GC epoch signaling
+  gcRegistry = new FinalizationRegistry(async () => {
+    this.leakAnalyzer.notify_gc_epoch();
+  });
+
+  // Constructor
+  constructor(type = 0) {
+    if (typeof WeakRef == "undefined" || typeof FinalizationRegistry == "undefined") return;
+    this.type = type;
+    this.leakAnalyzer = new AX.instance.wasm.LeakAnalyzer();
+    this.instanceIds = new WeakMap();
+    this.instanceRefs = new Map();
+    this.nextInstanceId++;
+
+    // FinalizationRegistry for GC epoch signaling
+    this.gcRegistry = new FinalizationRegistry(async () => {
+      this.leakAnalyzer.notify_gc_epoch();
+    });
+
+    // Detection Loop
+    setInterval(() => {
+      // Schedule a GC observation signal
+      this.scheduleGcSignal();
+      this.detectLeaks();
+
+    }, 30_000);
+  }
+
+  // Schedule GC Signal
+  scheduleGcSignal = async () => {
+    const sentinel = {};
+    this.gcRegistry.register(sentinel, null);
+  }
+
+  // Track Instance
+  trackInstance = (instance, snapshot) => {
+    if (!instance) return;
+    let id = this.instanceIds.get(instance);
+    if (!id) {
+      id = this.nextInstanceId++;
+      this.instanceIds.set(instance, id);
+      this.instanceRefs.set(id, new InstanceRecord(id, instance, snapshot));
+    }
+    this.leakAnalyzer.track_instance(id);
+  }
+
+  // Resolve Instance by ID
+  resolveInstanceById = (id) => {
+    const instanceRecord = this.instanceRefs.get(id);
+    if (!instanceRecord) return null;
+    const instance = instanceRecord.instanceRef.deref();
+    if (!instance) {
+      // GC collected → cleanup
+      this.instanceRefs.delete(id);
+      return null;
+    }
+    return instanceRecord;
+  }
+
+  // Check for Leak - Override in subclass
+  isLeaking(instanceRecord) {
+    // Override in subclass
+    if (!instanceRecord || !instanceRecord.instanceRef.deref()) return false;
+    return true;
+  }
+
+  // Detect Leaks
+  detectLeaks = async () => {
+    let leaks = await this.leakAnalyzer.evaluate_leaks();
+    for (const rec of leaks) {
+      const instanceRecord = this.resolveInstanceById(rec.instance_id);
+      if (this.isLeaking(instanceRecord)) {
+        this.reportLeak(instanceRecord);
+      }
+    }
+  }
+
+  // Report Leak
+  reportLeak = (instanceRecord) => {
+    // Override in subclass
+  }
+}