npm - log-inject - Versions diffs - 0.0.0 - Mend

log-inject 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Maifee Ul Asad
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,167 @@
+# log-inject
+A **production-grade TypeScript console interceptor** that:
+- Wraps **every** `console.*` method (all 22 in the MDN spec)
+- Forwards batched log entries to your backend via `POST`
+- Preserves native DevTools behaviour (passthrough)
+- Persists a session-id via **localStorage** or a **non-tracking cookie** (your choice)
+- Guards against missing methods on old browsers (backward compatibility polyfill)
+- Survives page unloads via `sendBeacon` + synchronous XHR fallback
+- Ships as a single **7 kB minified** browser bundle
+---
+## Project structure
+```
+log-inject/
+├── src/
+│   ├── types.ts       — All TypeScript interfaces & type aliases
+│   ├── session.ts     — Session-id persistence (localStorage / cookie / none)
+│   ├── serializer.ts  — Safe arg serialisation + stack-trace capture
+│   ├── transport.ts   — Batched fetch + XHR fallback + sendBeacon unload flush
+│   ├── patch.ts       — Core interception logic for all 22 console methods
+│   └── index.ts       — Public barrel + data-attribute auto-installer
+├── dist/
+│   ├── log-inject.js       — Unminified bundle (with source map)
+│   └── log-inject.min.js  — Minified bundle (7 kB)
+├── example.html       — Interactive demo page
+├── tsconfig.json
+└── package.json
+```
+---
+## Quick start
+### Method 1 — data-attribute auto-install (zero JS)
+Drop one `<script>` tag at the **top of your `<head>`**, before any other scripts:
+```html
+<script
+  src="/log-inject.min.js"
+  data-endpoint="/api/console-logs"
+  data-methods="log,info,warn,error,debug,trace"
+  data-storage="localStorage"
+  data-flush-interval="3000"
+></script>
+```
+That's it. Every `console.*` call from that point is captured and batched.
+### Method 2 — programmatic install
+```html
+<script src="/log-inject.min.js"></script>
+<script>
+  ConsolePatch.install({
+    endpoint: '/api/console-logs',
+    // Add auth / correlation headers
+    headers: { 'Authorization': 'Bearer ' + getToken() },
+    // Limit to only these methods in production
+    methods: ['log', 'info', 'warn', 'error', 'assert', 'trace'],
+    // Keep native DevTools output
+    passthrough: true,
+    // Use a non-tracking session cookie instead of localStorage
+    storageType: 'cookie',
+    cookieOptions: {
+      maxAgeDays: 30,
+      sameSite: 'Strict',
+      secure: true,
+    },
+    flushInterval: 5000,   // ms between flushes
+    maxQueueSize: 200,     // immediate flush threshold
+    maxArgLength: 4000,    // truncate long strings
+    onFlush(entries) {
+      console.debug('[polyfill] flushed', entries.length, 'entries');
+    },
+    onFlushError(err, entries) {
+      console.error('[polyfill] flush failed:', err.message);
+    },
+  });
+</script>
+```
+---
+## Backend payload
+Each `POST` to your endpoint carries:
+```json
+{
+  "logs": [
+    {
+      "id": "1715510000000-1",
+      "method": "error",
+      "level": "error",
+      "timestamp": "2026-05-12T10:00:00.000Z",
+      "timestampMs": 1715510000000,
+      "url": "https://yourapp.com/dashboard",
+      "userAgent": "Mozilla/5.0 …",
+      "sessionId": "a1b2c3d4-…",
+      "args": ["Uncaught TypeError", "Cannot read properties of null"],
+      "stack": "TypeError: Cannot read …\n    at foo (app.js:42:7)\n    …",
+      "groupDepth": 0
+    }
+  ]
+}
+```
+---
+## Configuration reference
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `endpoint` | `string \| null` | `'/api/console-logs'` | POST URL. `null` disables remote shipping. |
+| `headers` | `Record<string,string>` | `{}` | Extra HTTP headers (e.g. auth). |
+| `methods` | `ConsoleMethod[]` | all 22 | Methods to intercept. |
+| `passthrough` | `boolean` | `true` | Also forward to native DevTools. |
+| `flushInterval` | `number` | `2000` | Milliseconds between batch flushes. |
+| `maxQueueSize` | `number` | `50` | Immediate flush when queue exceeds this. |
+| `sessionKey` | `string` | `'__cpoly_sid'` | Storage key for session-id. |
+| `storageType` | `'localStorage' \| 'cookie' \| 'none'` | `'localStorage'` | Where to persist session-id. |
+| `cookieOptions.maxAgeDays` | `number` | `365` | Cookie lifetime. |
+| `cookieOptions.sameSite` | `'Strict' \| 'Lax' \| 'None'` | `'Strict'` | Cookie SameSite attribute. |
+| `cookieOptions.secure` | `boolean` | `false` | Add Secure flag to cookie. |
+| `maxArgLength` | `number` | `2000` | Truncate serialised args at this length. |
+| `onFlush` | `(entries) => void` | — | Called after successful backend flush. |
+| `onFlushError` | `(err, entries) => void` | — | Called on flush failure. |
+---
+## Build commands
+```bash
+npm run build        # typecheck + bundle (dev + min)
+npm run typecheck    # tsc --noEmit only
+npm run dev          # watch mode (unminified)
+```
+---
+## Backward compatibility
+- All 22 console methods are **checked for existence** before wrapping.
+- Methods absent in old browsers get a no-op shim so call sites don't throw.
+- The bundle targets **ES2015** and works in all evergreen browsers.
+- `fetch` unavailable → falls back to `XMLHttpRequest`.
+- `sendBeacon` unavailable → falls back to synchronous XHR on page unload.
+---
+## Session tracking (non-tracking design)
+The session-id is a random UUID stored **only in your own origin**
+(`localStorage` or a `SameSite=Strict` cookie). It carries no PII and is
+used solely to correlate log entries from the same browser tab session.
+It is **not** shared with third parties.

package/dist/log-inject.js ADDED Viewed

@@ -0,0 +1,497 @@
+"use strict";
+(() => {
+  // session.ts
+  function generateId() {
+    var template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+    return template.replace(/[xy]/g, function(c) {
+      var r = Math.random() * 16 | 0;
+      var v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  function lsGet(key) {
+    try {
+      return typeof localStorage !== "undefined" ? localStorage.getItem(key) : null;
+    } catch (_) {
+      return null;
+    }
+  }
+  function lsSet(key, value) {
+    try {
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(key, value);
+      }
+    } catch (_) {
+    }
+  }
+  function cookieGet(name) {
+    try {
+      if (typeof document === "undefined") return null;
+      var pairs = document.cookie.split(";");
+      for (var i = 0; i < pairs.length; i++) {
+        var pair = pairs[i].trim().split("=");
+        if (pair[0] === name) {
+          return decodeURIComponent(pair[1] || "");
+        }
+      }
+    } catch (_) {
+    }
+    return null;
+  }
+  function cookieSet(name, value, maxAgeDays, sameSite, secure) {
+    try {
+      if (typeof document === "undefined") return;
+      var maxAge = maxAgeDays * 24 * 60 * 60;
+      var parts = [
+        name + "=" + encodeURIComponent(value),
+        "Max-Age=" + maxAge,
+        "SameSite=" + sameSite,
+        "Path=/"
+      ];
+      if (secure) parts.push("Secure");
+      document.cookie = parts.join("; ");
+    } catch (_) {
+    }
+  }
+  function resolveSessionId(config) {
+    var key = config.sessionKey || "__cpoly_sid";
+    var storageType = config.storageType || "localStorage";
+    var existing = null;
+    if (storageType === "localStorage") {
+      existing = lsGet(key);
+    } else if (storageType === "cookie") {
+      existing = cookieGet(key);
+    }
+    if (existing && existing.length > 0) {
+      return existing;
+    }
+    var id = generateId();
+    if (storageType === "localStorage") {
+      lsSet(key, id);
+    } else if (storageType === "cookie") {
+      var opts = config.cookieOptions || {};
+      cookieSet(
+        key,
+        id,
+        opts.maxAgeDays !== void 0 ? opts.maxAgeDays : 365,
+        opts.sameSite || "Strict",
+        opts.secure || false
+      );
+    }
+    return id;
+  }
+  // serializer.ts
+  function serializeArg(value, maxLength) {
+    var result;
+    if (value === null) {
+      result = "null";
+    } else if (value === void 0) {
+      result = "undefined";
+    } else if (typeof value === "function") {
+      result = "[Function: " + (value.name || "anonymous") + "]";
+    } else if (typeof value === "symbol") {
+      result = value.toString();
+    } else if (typeof value === "string") {
+      result = value;
+    } else if (typeof value === "number" || typeof value === "boolean") {
+      result = String(value);
+    } else if (value instanceof Error) {
+      result = value.name + ": " + value.message;
+      if (value.stack) {
+        result += "\n" + value.stack;
+      }
+    } else if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) {
+      result = value.outerHTML ? value.outerHTML.slice(0, 200) : "[HTMLElement: " + value.tagName + "]";
+    } else {
+      result = safeStringify(value);
+    }
+    if (result.length > maxLength) {
+      result = result.slice(0, maxLength) + " \u2026 [truncated]";
+    }
+    return result;
+  }
+  function safeStringify(value) {
+    var seen = [];
+    try {
+      return JSON.stringify(value, function(_key, val) {
+        if (typeof val === "object" && val !== null) {
+          if (seen.indexOf(val) !== -1) {
+            return "[Circular]";
+          }
+          seen.push(val);
+        }
+        if (typeof val === "bigint") {
+          return val.toString() + "n";
+        }
+        if (typeof val === "undefined") {
+          return "[undefined]";
+        }
+        return val;
+      }, 2);
+    } catch (e) {
+      return "[UnserializableObject]";
+    }
+  }
+  function captureStack(frameOffset) {
+    try {
+      var err = new Error();
+      if (!err.stack) return void 0;
+      var lines = err.stack.split("\n");
+      var start = frameOffset + 2;
+      return lines.slice(start).join("\n").trim() || void 0;
+    } catch (_) {
+      return void 0;
+    }
+  }
+  // transport.ts
+  function sendBatch(entries, config) {
+    var endpoint = config.endpoint;
+    if (!endpoint) return Promise.resolve();
+    var body = JSON.stringify({ logs: entries });
+    var headers = Object.assign(
+      { "Content-Type": "application/json" },
+      config.headers || {}
+    );
+    if (typeof fetch !== "undefined") {
+      return fetch(endpoint, {
+        method: "POST",
+        headers,
+        body,
+        // keepalive allows the request to outlive the page — useful for
+        // capturing errors that happen just before navigation.
+        keepalive: true
+      }).then(function(res) {
+        if (!res.ok) {
+          throw new Error("HTTP " + res.status + " from " + endpoint);
+        }
+        if (config.onFlush) config.onFlush(entries);
+      }).catch(function(err) {
+        if (config.onFlushError) config.onFlushError(err, entries);
+      });
+    }
+    return new Promise(function(resolve) {
+      try {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", endpoint, true);
+        for (var key in headers) {
+          if (Object.prototype.hasOwnProperty.call(headers, key)) {
+            xhr.setRequestHeader(key, headers[key]);
+          }
+        }
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState !== 4) return;
+          if (xhr.status >= 200 && xhr.status < 300) {
+            if (config.onFlush) config.onFlush(entries);
+          } else {
+            var err = new Error("XHR " + xhr.status + " from " + endpoint);
+            if (config.onFlushError) config.onFlushError(err, entries);
+          }
+          resolve();
+        };
+        xhr.send(body);
+      } catch (e) {
+        if (config.onFlushError) {
+          config.onFlushError(e instanceof Error ? e : new Error(String(e)), entries);
+        }
+        resolve();
+      }
+    });
+  }
+  function sendBeaconFallback(entries, endpoint) {
+    if (typeof navigator === "undefined" || !navigator.sendBeacon) return false;
+    try {
+      var blob = new Blob([JSON.stringify({ logs: entries })], {
+        type: "application/json"
+      });
+      return navigator.sendBeacon(endpoint, blob);
+    } catch (_) {
+      return false;
+    }
+  }
+  // patch.ts
+  var ALL_METHODS = [
+    "assert",
+    "clear",
+    "count",
+    "countReset",
+    "debug",
+    "dir",
+    "dirxml",
+    "error",
+    "group",
+    "groupCollapsed",
+    "groupEnd",
+    "info",
+    "log",
+    "profile",
+    "profileEnd",
+    "table",
+    "time",
+    "timeEnd",
+    "timeLog",
+    "timeStamp",
+    "trace",
+    "warn"
+  ];
+  var METHOD_TO_LEVEL = {
+    assert: "error",
+    clear: "log",
+    count: "log",
+    countReset: "log",
+    debug: "debug",
+    dir: "log",
+    dirxml: "log",
+    error: "error",
+    group: "log",
+    groupCollapsed: "log",
+    groupEnd: "log",
+    info: "info",
+    log: "log",
+    profile: "log",
+    profileEnd: "log",
+    table: "log",
+    time: "log",
+    timeEnd: "log",
+    timeLog: "log",
+    timeStamp: "log",
+    trace: "log",
+    warn: "warn"
+  };
+  var _idCounter = 0;
+  function nextId() {
+    _idCounter += 1;
+    return Date.now() + "-" + _idCounter;
+  }
+  var state = {
+    installed: false,
+    sessionId: "",
+    queue: [],
+    flushTimer: null,
+    counters: {},
+    timers: {},
+    groupDepth: 0,
+    originalMethods: {}
+  };
+  function handleMethodSemantics(method, args) {
+    switch (method) {
+      case "assert": {
+        var condition = !!args[0];
+        return { assertionPassed: condition };
+      }
+      case "count": {
+        var countLabel = String(args[0] !== void 0 ? args[0] : "default");
+        state.counters[countLabel] = (state.counters[countLabel] || 0) + 1;
+        return { counterValue: state.counters[countLabel] };
+      }
+      case "countReset": {
+        var resetLabel = String(args[0] !== void 0 ? args[0] : "default");
+        state.counters[resetLabel] = 0;
+        return { counterValue: 0 };
+      }
+      case "time": {
+        var timeLabel = String(args[0] !== void 0 ? args[0] : "default");
+        state.timers[timeLabel] = Date.now();
+        return { timerLabel: timeLabel };
+      }
+      case "timeLog":
+      case "timeEnd": {
+        var teLabel = String(args[0] !== void 0 ? args[0] : "default");
+        var start = state.timers[teLabel];
+        var elapsed = start !== void 0 ? Date.now() - start : -1;
+        if (method === "timeEnd") {
+          delete state.timers[teLabel];
+        }
+        return { timerLabel: teLabel, timerElapsed: elapsed };
+      }
+      case "timeStamp": {
+        var tsLabel = String(args[0] !== void 0 ? args[0] : "");
+        return { timerLabel: tsLabel };
+      }
+      case "group":
+      case "groupCollapsed": {
+        var depth = state.groupDepth;
+        state.groupDepth += 1;
+        return { groupDepth: depth };
+      }
+      case "groupEnd": {
+        if (state.groupDepth > 0) state.groupDepth -= 1;
+        return { groupDepth: state.groupDepth };
+      }
+      default:
+        return {};
+    }
+  }
+  function createWrapper(method, config) {
+    var maxLen = config.maxArgLength !== void 0 ? config.maxArgLength : 2e3;
+    var passthrough = config.passthrough !== false;
+    return function(...args) {
+      if (passthrough) {
+        var native = state.originalMethods[method];
+        if (typeof native === "function") {
+          try {
+            native.apply(console, args);
+          } catch (_) {
+          }
+        }
+      }
+      if (method === "assert" && args[0]) return;
+      var semantics = handleMethodSemantics(method, args);
+      var now = Date.now();
+      var serialisedArgs = args.map(function(a) {
+        return serializeArg(a, maxLen);
+      });
+      var entry = Object.assign(
+        {
+          id: nextId(),
+          method,
+          level: METHOD_TO_LEVEL[method],
+          timestamp: new Date(now).toISOString(),
+          timestampMs: now,
+          url: typeof location !== "undefined" ? location.href : "",
+          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
+          sessionId: state.sessionId,
+          args: serialisedArgs,
+          stack: method === "trace" || method === "error" ? captureStack(1) : void 0,
+          groupDepth: state.groupDepth
+        },
+        semantics
+      );
+      state.queue.push(entry);
+      var maxQueue = config.maxQueueSize !== void 0 ? config.maxQueueSize : 50;
+      if (state.queue.length >= maxQueue) {
+        flushNow(config);
+      }
+    };
+  }
+  function flushNow(config) {
+    if (state.queue.length === 0) return;
+    var batch = state.queue.splice(0);
+    sendBatch(batch, config);
+  }
+  function scheduleFlush(config) {
+    if (state.flushTimer !== null) return;
+    var interval = config.flushInterval !== void 0 ? config.flushInterval : 2e3;
+    state.flushTimer = setTimeout(function() {
+      state.flushTimer = null;
+      flushNow(config);
+      scheduleFlush(config);
+    }, interval);
+  }
+  function installUnloadFlush(config) {
+    var endpoint = config.endpoint;
+    if (!endpoint) return;
+    var handler = function() {
+      if (state.queue.length === 0) return;
+      var batch = state.queue.splice(0);
+      if (!sendBeaconFallback(batch, endpoint)) {
+        try {
+          var xhr = new XMLHttpRequest();
+          xhr.open(
+            "POST",
+            endpoint,
+            false
+            /* sync */
+          );
+          xhr.setRequestHeader("Content-Type", "application/json");
+          xhr.send(JSON.stringify({ logs: batch }));
+        } catch (_) {
+        }
+      }
+    };
+    if (typeof addEventListener !== "undefined") {
+      addEventListener("visibilitychange", function() {
+        if (document.visibilityState === "hidden") handler();
+      });
+      addEventListener("pagehide", handler);
+      addEventListener("beforeunload", handler);
+    }
+  }
+  function install(userConfig) {
+    if (state.installed) return;
+    var config = Object.assign(
+      {
+        endpoint: "/api/console-logs",
+        methods: ALL_METHODS,
+        passthrough: true,
+        flushInterval: 2e3,
+        maxQueueSize: 50,
+        sessionKey: "__cpoly_sid",
+        storageType: "localStorage",
+        maxArgLength: 2e3
+      },
+      userConfig || {}
+    );
+    state.sessionId = resolveSessionId(config);
+    var methodsToWrap = config.methods || ALL_METHODS;
+    for (var i = 0; i < methodsToWrap.length; i++) {
+      var method = methodsToWrap[i];
+      var original = console[method];
+      if (typeof original === "function") {
+        state.originalMethods[method] = original;
+      } else {
+        state.originalMethods[method] = function() {
+        };
+      }
+      console[method] = createWrapper(method, config);
+    }
+    scheduleFlush(config);
+    installUnloadFlush(config);
+    state.installed = true;
+  }
+  function uninstall(config) {
+    if (!state.installed) return;
+    if (config) flushNow(config);
+    for (var method in state.originalMethods) {
+      if (Object.prototype.hasOwnProperty.call(state.originalMethods, method)) {
+        var orig = state.originalMethods[method];
+        if (orig !== void 0) {
+          console[method] = orig;
+        }
+      }
+    }
+    state.originalMethods = {};
+    state.installed = false;
+    if (state.flushTimer !== null) {
+      clearTimeout(state.flushTimer);
+      state.flushTimer = null;
+    }
+  }
+  function flush(config) {
+    flushNow(config);
+  }
+  function getQueue() {
+    return state.queue.slice();
+  }
+  function isInstalled() {
+    return state.installed;
+  }
+  // index.ts
+  (function autoInstall() {
+    if (typeof document === "undefined") return;
+    var scripts = document.querySelectorAll("script[data-endpoint]");
+    if (!scripts || scripts.length === 0) return;
+    var tag = scripts[scripts.length - 1];
+    var endpoint = tag.getAttribute("data-endpoint");
+    if (!endpoint) return;
+    var rawMethods = tag.getAttribute("data-methods");
+    var storage = tag.getAttribute("data-storage");
+    var flushRaw = tag.getAttribute("data-flush-interval");
+    var maxQueueRaw = tag.getAttribute("data-max-queue");
+    var maxArgRaw = tag.getAttribute("data-max-arg-length");
+    var config = { endpoint };
+    if (rawMethods) {
+      config.methods = rawMethods.split(",").map(function(m) {
+        return m.trim();
+      });
+    }
+    if (storage) config.storageType = storage;
+    if (flushRaw) config.flushInterval = parseInt(flushRaw, 10);
+    if (maxQueueRaw) config.maxQueueSize = parseInt(maxQueueRaw, 10);
+    if (maxArgRaw) config.maxArgLength = parseInt(maxArgRaw, 10);
+    install(config);
+  })();
+})();