@dataxamas/tracker-js 1.0.1

package/dist/index.js

@@ -0,0 +1,672 @@
+// src/constants.ts
+var BASE_URL = "https://dataxamas.izakdvlpr.com";
+
+// src/utils.ts
+var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+
+// src/exceptions.ts
+function normalizeError(error) {
+  if (error instanceof Error) {
+    return { name: error.name || "Error", message: error.message || String(error), stack: error.stack };
+  }
+  if (typeof error === "string") {
+    return { name: "Error", message: error };
+  }
+  try {
+    return { name: "Error", message: JSON.stringify(error) };
+  } catch {
+    return { name: "Error", message: String(error) };
+  }
+}
+var DataxamasExceptions = class {
+  constructor(config) {
+    this.config = config;
+    this.installed = false;
+  }
+  captureException(error, context) {
+    if (!this.config.enabled) return Promise.resolve();
+    const { name, message, stack } = normalizeError(error);
+    const payload = {
+      name,
+      message,
+      stack,
+      source: isBrowser() ? "CLIENT" : "SERVER",
+      level: "ERROR",
+      environment: this.config.environment,
+      release: this.config.release,
+      data: context
+    };
+    if (isBrowser()) {
+      payload.url = window.location.href;
+      payload.userAgent = window.navigator.userAgent;
+    }
+    return this.send(payload);
+  }
+  install() {
+    if (this.installed || !this.config.enabled) return;
+    this.installed = true;
+    if (isBrowser()) {
+      window.addEventListener("error", (event) => {
+        this.captureException(event.error ?? event.message);
+      });
+      window.addEventListener("unhandledrejection", (event) => {
+        this.captureException(event.reason ?? "Unhandled promise rejection");
+      });
+      return;
+    }
+    if (typeof process !== "undefined" && typeof process.on === "function") {
+      process.on("uncaughtException", (error) => this.captureException(error));
+      process.on("unhandledRejection", (reason) => this.captureException(reason ?? "Unhandled promise rejection"));
+    }
+  }
+  send(payload) {
+    return fetch(`${this.config.baseUrl}/api/v1/errors`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.config.apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(payload)
+    }).then(async (response) => {
+      if (response.ok) return;
+      const body = await response.json().catch(() => null);
+      const errorMessage = body?.error?.message ?? `Request failed with status ${response.status}`;
+      console.error(`[Dataxamas] ${errorMessage}`);
+    }).catch(() => {
+    });
+  }
+};
+
+// src/logs.ts
+import { pino } from "pino";
+var CUSTOM_LEVELS = { log: 25, success: 35 };
+var LEVEL_METHOD = {
+  DEBUG: "debug",
+  INFO: "info",
+  WARN: "warn",
+  LOG: "log",
+  SUCCESS: "success"
+};
+var ANSI = {
+  DEBUG: "\x1B[90m",
+  INFO: "\x1B[36m",
+  WARN: "\x1B[33m",
+  LOG: "\x1B[37m",
+  SUCCESS: "\x1B[32m",
+  ERROR: "\x1B[31m"
+};
+var CSS = {
+  DEBUG: "color:#888",
+  INFO: "color:#0aa",
+  WARN: "color:#c90",
+  LOG: "color:#bbb",
+  SUCCESS: "color:#0a0",
+  ERROR: "color:#e33"
+};
+var RESET = "\x1B[0m";
+function formatData(data) {
+  if (data === void 0) return "";
+  try {
+    return ` ${JSON.stringify(data)}`;
+  } catch {
+    return ` ${String(data)}`;
+  }
+}
+var nodeDestination = {
+  write(line) {
+    try {
+      const record = JSON.parse(line);
+      const level = String(record.level ?? "LOG").toUpperCase();
+      const color = ANSI[level] ?? "";
+      process.stdout.write(`${color}[${level}]${RESET} ${record.msg ?? ""}${formatData(record.data)}
+`);
+    } catch {
+      process.stdout.write(line);
+    }
+  }
+};
+function browserWriter(level) {
+  return (record) => {
+    const method = level === "WARN" ? "warn" : "log";
+    const args = [`%c[${level}]%c ${record.msg ?? ""}`, CSS[level] ?? "", ""];
+    if (record.data !== void 0) args.push(record.data);
+    console[method](...args);
+  };
+}
+function createLogger() {
+  return pino(
+    {
+      customLevels: CUSTOM_LEVELS,
+      level: "debug",
+      base: void 0,
+      formatters: { level: (label) => ({ level: label }) },
+      browser: {
+        asObject: true,
+        write: {
+          debug: browserWriter("DEBUG"),
+          info: browserWriter("INFO"),
+          warn: browserWriter("WARN"),
+          log: browserWriter("LOG"),
+          success: browserWriter("SUCCESS"),
+          error: browserWriter("WARN")
+        }
+      }
+    },
+    nodeDestination
+  );
+}
+var DataxamasLogs = class {
+  constructor(config) {
+    this.config = config;
+    this.logger = createLogger();
+  }
+  debug(message, data) {
+    return this.emit("DEBUG", message, data);
+  }
+  info(message, data) {
+    return this.emit("INFO", message, data);
+  }
+  warn(message, data) {
+    return this.emit("WARN", message, data);
+  }
+  log(message, data) {
+    return this.emit("LOG", message, data);
+  }
+  success(message, data) {
+    return this.emit("SUCCESS", message, data);
+  }
+  emit(level, message, data) {
+    if (!this.config.enableLogs) return Promise.resolve();
+    const method = LEVEL_METHOD[level];
+    const fn = this.logger[method];
+    if (data === void 0) {
+      fn.call(this.logger, message);
+    } else {
+      fn.call(this.logger, { data }, message);
+    }
+    return this.send(level, message, data);
+  }
+  send(level, message, data) {
+    return fetch(`${this.config.baseUrl}/api/v1/logs`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.config.apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ level, message, data, environment: this.config.environment })
+    }).then(async (response) => {
+      if (response.ok) return;
+      const body = await response.json().catch(() => null);
+      const errorMessage = body?.error?.message ?? `Request failed with status ${response.status}`;
+      this.logger.error(`[Dataxamas] ${errorMessage}`);
+    }).catch((error) => {
+      this.logger.error(`[Dataxamas] Failed to send log: ${error}`);
+    });
+  }
+};
+
+// src/tracking.ts
+var QUEUE_DELAY_MS = 4e3;
+var STORAGE_PREFIX = "@dataxamas";
+var REPLAY_FLUSH_SIZE = 100;
+var REPLAY_FLUSH_INTERVAL_MS = 5e3;
+var CAP_CHECK_MS = 1e3;
+var MAX_RECORDING_MS = 10 * 60 * 1e3;
+var MAX_EVENTS_PER_RECORDING = 2e4;
+var KEEPALIVE_LIMIT_BYTES = 60 * 1024;
+var REPLAY_SAMPLE_RATE = 1;
+var DataxamasTracking = class {
+  constructor(options) {
+    /**
+     * Primeiro gesto da pageview liga o gravador; os seguintes só o religam se ele tiver parado
+     * (aba que foi para segundo plano, por exemplo), sempre no mesmo `recordingId`.
+     */
+    this.markReplayActivity = () => {
+      if (this.replayHalted || this.replayCapped || this.isRecording()) return;
+      if (document.visibilityState === "hidden") return;
+      this.startReplayRecorder();
+    };
+    if (!options.apiKey) {
+      throw new Error("DataxamasTracking: apiKey is required.");
+    }
+    this.apiKey = options.apiKey;
+    this.baseUrl = options.baseUrl ?? BASE_URL;
+    this.allowLocalhost = options.allowLocalhost ?? false;
+    this.sessionId = null;
+    this.currentPage = isBrowser() ? window.location.pathname : "";
+    this.heatMapEnabled = options.heatMapEnabled ?? true;
+    this.replayEnabled = options.replayEnabled ?? true;
+    this.eventQueue = [];
+    this.isProcessing = false;
+    this.rrwebRecord = null;
+    this.stopRrweb = void 0;
+    this.replayBuffer = [];
+    this.snapshotFlushed = false;
+    this.replayHalted = false;
+    this.replayCapped = false;
+    this.cutoffPending = false;
+    this.replayStarting = false;
+    this.lifecycleReady = false;
+    this.recordingId = null;
+    this.recordingStartedAt = null;
+    this.recordingStartedAtMs = 0;
+    this.recordingSeq = 0;
+    this.recordingEvents = 0;
+  }
+  isLocalhost() {
+    return window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
+  }
+  getSessionId() {
+    try {
+      return window.localStorage.getItem(`${STORAGE_PREFIX}/session`);
+    } catch (_) {
+      return null;
+    }
+  }
+  createSessionId() {
+    const id = crypto.randomUUID();
+    try {
+      window.localStorage.setItem(`${STORAGE_PREFIX}/session`, id);
+    } catch (_) {
+    }
+    return id;
+  }
+  async processQueue() {
+    if (this.isProcessing || this.eventQueue.length === 0) return;
+    this.isProcessing = true;
+    const event = this.eventQueue.shift();
+    try {
+      await window.fetch(`${this.baseUrl}/api/v1/events`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${this.apiKey}`,
+          "Content-Type": "application/json",
+          "x-screen-width": String(window.screen.width),
+          "x-screen-height": String(window.screen.height)
+        },
+        body: JSON.stringify(event)
+      });
+    } catch (_) {
+    }
+    setTimeout(() => {
+      this.isProcessing = false;
+      this.processQueue();
+    }, QUEUE_DELAY_MS);
+  }
+  async sendEvent({
+    name,
+    path = this.currentPage,
+    data = {}
+  }) {
+    if (!this.sessionId) return;
+    this.eventQueue.push({
+      name,
+      path,
+      referrer: document.referrer,
+      sessionId: this.sessionId,
+      data
+    });
+    await this.processQueue();
+  }
+  trackPageChanges() {
+    let lastPath = this.currentPage;
+    setInterval(() => {
+      const newPath = window.location.pathname;
+      if (newPath !== lastPath) {
+        this.stopReplayRecorder(false);
+        this.rotateRecording();
+        this.currentPage = newPath;
+        this.sendEvent({ name: "PAGE_VIEW", path: newPath });
+        lastPath = newPath;
+      }
+    }, 500);
+  }
+  async fetchWebsiteConfig() {
+    try {
+      const res = await window.fetch(`${this.baseUrl}/api/v1/config`, {
+        headers: { Authorization: `Bearer ${this.apiKey}` }
+      });
+      if (!res.ok) return;
+      const cfg = await res.json();
+      if (typeof cfg.heatMapEnabled === "boolean") this.heatMapEnabled = cfg.heatMapEnabled;
+      if (typeof cfg.replayEnabled === "boolean") this.replayEnabled = cfg.replayEnabled;
+    } catch (_) {
+    }
+  }
+  buildHeatMap(e) {
+    if (!this.heatMapEnabled) return null;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (!viewportWidth || !viewportHeight) return null;
+    const doc = document.documentElement;
+    const pageWidth = Math.max(doc.scrollWidth, viewportWidth);
+    const pageHeight = Math.max(doc.scrollHeight, viewportHeight);
+    const xRatio = Math.min(1, Math.max(0, e.clientX / viewportWidth));
+    const yRatio = Math.min(1, Math.max(0, e.clientY / viewportHeight));
+    const interactionType = e.pointerType === "touch" ? "TAP" : "CLICK";
+    return {
+      interactionType,
+      xRatio,
+      yRatio,
+      viewportWidth,
+      viewportHeight,
+      pageWidth,
+      pageHeight,
+      scrollX: Math.round(window.scrollX || 0),
+      scrollY: Math.round(window.scrollY || 0),
+      layoutFingerprint: `${this.currentPage}:${Math.round(pageWidth / 100)}x${Math.round(pageHeight / 100)}`
+    };
+  }
+  safeText(t) {
+    const tag = t.tagName?.toLowerCase();
+    if (tag === "input" || tag === "textarea" || tag === "select" || tag === "option") return void 0;
+    if (t.isContentEditable) return void 0;
+    return t.textContent?.trim().substring(0, 50);
+  }
+  safeString(value, max) {
+    if (typeof value !== "string") return void 0;
+    const trimmed = value.trim();
+    return trimmed ? trimmed.substring(0, max) : void 0;
+  }
+  getTarget(e) {
+    const t = e.target;
+    if (!t || t.nodeType !== 1) return null;
+    return t;
+  }
+  trackClicks() {
+    document.addEventListener(
+      "click",
+      (e) => {
+        const t = this.getTarget(e);
+        if (!t) return;
+        this.sendEvent({
+          name: "CLICK",
+          data: {
+            tagName: t.tagName?.toLowerCase(),
+            text: this.safeText(t),
+            href: this.safeString(t.href, 2048),
+            id: this.safeString(t.id, 128),
+            classes: this.safeString(typeof t.className === "string" ? t.className : t.getAttribute?.("class"), 256),
+            heatMap: this.buildHeatMap(e)
+          }
+        });
+      },
+      true
+    );
+  }
+  trackScroll() {
+    let timeout;
+    window.addEventListener("scroll", () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        const max = document.documentElement.scrollHeight - window.innerHeight;
+        if (max <= 0) return;
+        const percentage = Math.round(window.scrollY / max * 100);
+        this.sendEvent({
+          name: "SCROLL",
+          data: { percentage }
+        });
+      }, 1e3);
+    });
+  }
+  measureReplay() {
+    const doc = document.documentElement;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const pageWidth = Math.max(doc.scrollWidth, viewportWidth);
+    const pageHeight = Math.max(doc.scrollHeight, viewportHeight);
+    const layoutFingerprint = `${this.currentPage}:${Math.round(pageWidth / 100)}x${Math.round(pageHeight / 100)}`;
+    return { viewportWidth, viewportHeight, pageWidth, pageHeight, layoutFingerprint };
+  }
+  /**
+   * Sorteio por visitante, não por gravação: quem entrou no sorteio tem a sessão inteira, em vez
+   * de um replay picotado que não dá para assistir.
+   */
+  isReplaySampled() {
+    if (REPLAY_SAMPLE_RATE >= 1) return true;
+    if (REPLAY_SAMPLE_RATE <= 0) return false;
+    try {
+      const stored = window.localStorage.getItem(`${STORAGE_PREFIX}/replay-sample`);
+      if (stored === "1") return true;
+      if (stored === "0") return false;
+      const sampled = Math.random() < REPLAY_SAMPLE_RATE;
+      window.localStorage.setItem(`${STORAGE_PREFIX}/replay-sample`, sampled ? "1" : "0");
+      return sampled;
+    } catch (_) {
+      return Math.random() < REPLAY_SAMPLE_RATE;
+    }
+  }
+  isRecording() {
+    return Boolean(this.stopRrweb);
+  }
+  exceededReplayCaps() {
+    return this.recordingEvents >= MAX_EVENTS_PER_RECORDING || Date.now() - this.recordingStartedAtMs >= MAX_RECORDING_MS;
+  }
+  rotateRecording() {
+    this.replayCapped = false;
+    this.recordingId = crypto.randomUUID();
+    this.recordingStartedAt = (/* @__PURE__ */ new Date()).toISOString();
+    this.recordingStartedAtMs = Date.now();
+    this.recordingSeq = 0;
+    this.recordingEvents = 0;
+  }
+  flushReplay(urgent) {
+    if (this.replayBuffer.length === 0 || !this.recordingId) return;
+    const events = this.replayBuffer;
+    this.replayBuffer = [];
+    const payload = JSON.stringify({
+      sessionId: this.sessionId,
+      recordingId: this.recordingId,
+      path: this.currentPage,
+      startedAt: this.recordingStartedAt,
+      seq: this.recordingSeq++,
+      mode: "REPLAY",
+      ...this.measureReplay(),
+      events
+    });
+    void this.sendReplayBatch(payload, urgent);
+  }
+  /**
+   * Um full snapshot com CSS inline passa fácil de 100KB cru, e era isso que tomava 413 no
+   * ingest. O servidor aceita os dois formatos, então navegador sem `CompressionStream` manda cru.
+   */
+  async compressPayload(payload) {
+    if (typeof CompressionStream === "undefined") return null;
+    try {
+      const stream = new Blob([payload]).stream().pipeThrough(new CompressionStream("gzip"));
+      return await new Response(stream).blob();
+    } catch (_) {
+      return null;
+    }
+  }
+  async sendReplayBatch(payload, urgent) {
+    const url = `${this.baseUrl}/api/v1/replay`;
+    const rawSize = new Blob([payload]).size;
+    const compressed = urgent && rawSize < KEEPALIVE_LIMIT_BYTES ? null : await this.compressPayload(payload);
+    const headers = {
+      Authorization: `Bearer ${this.apiKey}`,
+      "Content-Type": "application/json"
+    };
+    if (compressed) headers["Content-Encoding"] = "gzip";
+    const size = compressed ? compressed.size : rawSize;
+    try {
+      const res = await window.fetch(url, {
+        method: "POST",
+        headers,
+        body: compressed ?? payload,
+        // O flush do full snapshot sai de dentro do `emit`, no exato momento em que o visitante
+        // interage: sem `keepalive` o unload logo em seguida cancelava o POST e a gravação ficava
+        // sem o `seq` 0. O browser recusa keepalive acima de 64KB, então só liga quando cabe.
+        keepalive: size < KEEPALIVE_LIMIT_BYTES,
+        // Sem isto um embed same-origin mandaria cookie e o `*` do ingest reprovaria a resposta.
+        credentials: "omit"
+      });
+      if (!res.ok) return;
+      const body = await res.json().catch(() => null);
+      if (body?.stop) {
+        this.replayHalted = true;
+        this.stopReplayRecorder(false);
+      }
+    } catch (_) {
+    }
+  }
+  stopReplayRecorder(urgent) {
+    this.flushReplay(urgent);
+    if (this.stopRrweb) {
+      this.stopRrweb();
+      this.stopRrweb = void 0;
+    }
+  }
+  /**
+   * Bateu o teto: encerra a gravação e fica parado até a próxima pageview, em vez de emendar um
+   * clipe atrás do outro enquanto a página só anima sozinha.
+   */
+  scheduleReplayCutoff() {
+    if (this.cutoffPending) return;
+    this.cutoffPending = true;
+    this.replayCapped = true;
+    setTimeout(() => {
+      this.cutoffPending = false;
+      this.stopReplayRecorder(false);
+    }, 0);
+  }
+  setupReplayLifecycle() {
+    if (this.lifecycleReady) return;
+    this.lifecycleReady = true;
+    for (const type of ["pointerdown", "keydown", "wheel", "touchstart", "scroll"]) {
+      window.addEventListener(type, this.markReplayActivity, { passive: true, capture: true });
+    }
+    setInterval(() => {
+      if (this.isRecording()) this.flushReplay(false);
+    }, REPLAY_FLUSH_INTERVAL_MS);
+    setInterval(() => {
+      if (!this.isRecording()) return;
+      if (this.exceededReplayCaps()) this.scheduleReplayCutoff();
+    }, CAP_CHECK_MS);
+    window.addEventListener("pagehide", () => this.stopReplayRecorder(true));
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "hidden") this.stopReplayRecorder(true);
+    });
+  }
+  async startReplayRecorder() {
+    if (this.isRecording() || this.replayHalted || this.replayStarting) return;
+    this.replayStarting = true;
+    try {
+      if (!this.rrwebRecord) {
+        const { record } = await import("./rrweb-F6UF6U3D.js");
+        this.rrwebRecord = record;
+      }
+    } catch (_) {
+      return;
+    } finally {
+      this.replayStarting = false;
+    }
+    if (this.isRecording() || this.replayHalted) return;
+    if (!this.recordingId) this.rotateRecording();
+    this.snapshotFlushed = false;
+    this.stopRrweb = this.rrwebRecord({
+      emit: (event) => {
+        this.replayBuffer.push(event);
+        this.recordingEvents++;
+        if (!this.snapshotFlushed && event.type === 2) {
+          this.snapshotFlushed = true;
+          this.flushReplay(false);
+          return;
+        }
+        if (this.exceededReplayCaps()) {
+          this.scheduleReplayCutoff();
+          return;
+        }
+        if (this.replayBuffer.length >= REPLAY_FLUSH_SIZE) this.flushReplay(false);
+      },
+      maskAllInputs: true,
+      maskTextClass: "dx-mask",
+      blockClass: "dx-block",
+      sampling: { mousemove: 150, scroll: 300, media: 800, input: "last" },
+      inlineStylesheet: true,
+      inlineImages: false,
+      collectFonts: false,
+      slimDOMOptions: {
+        script: true,
+        comment: true,
+        headFavicon: true,
+        headMetaDescKeywords: true,
+        headMetaSocial: true,
+        headMetaRobots: true,
+        headMetaHttpEquiv: true,
+        headMetaAuthorship: true,
+        headMetaVerification: true
+      }
+    });
+  }
+  startTracking() {
+    this.sessionId = this.getSessionId() ?? this.createSessionId();
+    this.sendEvent({ name: "PAGE_VIEW" });
+    this.trackPageChanges();
+    this.trackClicks();
+    this.trackScroll();
+    this.fetchWebsiteConfig().then(() => {
+      if (!this.replayEnabled || !this.isReplaySampled()) return;
+      this.setupReplayLifecycle();
+    });
+  }
+  start() {
+    if (!isBrowser()) {
+      throw new Error("DataxamasTracking: This SDK can only be used in a browser environment.");
+    }
+    if (!this.allowLocalhost && this.isLocalhost()) return;
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", this.startTracking.bind(this));
+    } else {
+      this.startTracking();
+    }
+  }
+};
+
+// src/client.ts
+var Dataxamas = class {
+  constructor(options) {
+    if (!options.apiKey) throw new Error("Dataxamas: apiKey is required.");
+    const baseUrl = options.baseUrl ?? BASE_URL;
+    this.logs = new DataxamasLogs({
+      apiKey: options.apiKey,
+      baseUrl,
+      enableLogs: options.enableLogs ?? true,
+      environment: options.environment
+    });
+    this.exceptions = new DataxamasExceptions({
+      apiKey: options.apiKey,
+      baseUrl,
+      enabled: options.enableErrorTracking ?? true,
+      environment: options.environment,
+      release: options.release
+    });
+    if (options.captureGlobalErrors ?? true) {
+      this.exceptions.install();
+    }
+    this.tracking = new DataxamasTracking({
+      apiKey: options.apiKey,
+      baseUrl,
+      replayEnabled: options.replayEnabled ?? true,
+      heatMapEnabled: options.heatMapEnabled ?? true,
+      allowLocalhost: options.allowLocalhost ?? false
+    });
+  }
+};
+
+// src/errors.ts
+var DataxamasApiError = class extends Error {
+  constructor(code, message, status) {
+    super(message);
+    this.code = code;
+    this.status = status;
+    this.name = "DataxamasApiError";
+  }
+};
+export {
+  Dataxamas,
+  DataxamasApiError,
+  DataxamasExceptions,
+  DataxamasLogs,
+  DataxamasTracking
+};