@overcastsre/browser 1.0.0

package/README.md

@@ -0,0 +1,36 @@
+# @overcast/browser
+
+Overcast SRE monitoring SDK for browsers. One line — captures everything client-side.
+
+## Install
+
+```bash
+npm install @overcast/browser
+```
+
+## Usage
+
+```js
+import Overcast from '@overcast/browser';
+Overcast.init({ apiKey: 'oc_...', serviceName: 'my-app' });
+```
+
+Or via CDN:
+
+```html
+<script src="https://cdn.overcastsre.com/sdk/browser/1.0.0/overcast.min.js"></script>
+<script>Overcast.init({ apiKey: 'oc_...', serviceName: 'my-app' });</script>
+```
+
+Automatically captures:
+
+- All console output (log, info, debug, warn, error)
+- JavaScript errors and unhandled promise rejections
+- Resource loading failures (images, scripts, CSS)
+- All fetch() and XMLHttpRequest calls
+- Web Vitals (LCP, FID, CLS, INP)
+- Slow page loads and high memory
+- Rage clicks and dead clicks
+- SPA navigation (pushState, popstate, hashchange)
+- CSP violations
+- Online/offline connectivity changes

package/index.js

@@ -0,0 +1,845 @@
+/**
+ * @overcast/browser — Overcast SRE Monitoring SDK for Browsers
+ *
+ * Captures EVERYTHING from the client side:
+ *   - All console output (log, info, debug, warn, error)
+ *   - JavaScript errors (uncaught exceptions, promise rejections)
+ *   - Resource loading failures (images, scripts, stylesheets)
+ *   - All fetch() and XMLHttpRequest calls (status, latency, bodies)
+ *   - Web Vitals (LCP, FID, CLS, TTFB, INP)
+ *   - Performance (slow page loads, high memory)
+ *   - UX issues (rage clicks, dead clicks)
+ *   - Navigation / SPA route changes
+ *   - Content Security Policy violations
+ *
+ * Usage — two lines:
+ *   import Overcast from '@overcast/browser';
+ *   Overcast.init({ apiKey: 'oc_...', serviceName: 'my-app' });
+ *
+ * @module @overcast/browser
+ */
+
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory();
+  } else if (typeof define === 'function' && define.amd) {
+    define(factory);
+  } else {
+    root.Overcast = factory();
+  }
+})(typeof window !== 'undefined' ? window : typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // STATE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  var _config = {
+    apiKey: '',
+    serviceName: 'web-app',
+    environment: 'production',
+    baseUrl: 'https://platform.overcastsre.com',
+    version: '',
+
+    captureConsole: true,
+    captureErrors: true,
+    captureRejections: true,
+    captureResources: true,
+    captureNetwork: true,
+    capturePerformance: true,
+    captureWebVitals: true,
+    captureUX: true,
+    captureCSP: true,
+    captureNavigation: true,
+
+    slowPageLoadThreshold: 5000,
+    slowApiThreshold: 5000,
+    clickSamplingRate: 0.1,
+    logSamplingRate: 1.0,
+
+    batchSize: 50,
+    flushInterval: 5000,
+    maxBufferSize: 500,
+
+    encryptPayload: false,
+    encryptionKey: '',
+    sanitize: true,
+
+    debug: false,
+  };
+
+  var _initialized = false;
+  var _sending = false;
+  var _buffer = [];
+  var _flushTimer = null;
+  var _originals = {};
+  var INGEST_ENDPOINT = '/api/v1/ingest/logs';
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PUBLIC API
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function init(options) {
+    if (_initialized) return Overcast;
+    if (typeof window === 'undefined') return Overcast;
+
+    if (!options || !options.apiKey) {
+      console.error('[Overcast] apiKey is required. Get yours at https://overcastsre.com/settings');
+      return Overcast;
+    }
+
+    _assign(_config, options);
+    _initialized = true;
+
+    if (window.__OVERCAST_INSTALLED__) return Overcast;
+    window.__OVERCAST_INSTALLED__ = true;
+
+    if (_config.captureConsole) _installConsoleCapture();
+    if (_config.captureErrors) _installErrorCapture();
+    if (_config.captureRejections) _installRejectionCapture();
+    if (_config.captureResources) _installResourceCapture();
+    if (_config.captureNetwork) _installNetworkCapture();
+    if (_config.capturePerformance) _installPerformanceCapture();
+    if (_config.captureWebVitals) _installWebVitals();
+    if (_config.captureUX) _installUXCapture();
+    if (_config.captureCSP) _installCSPCapture();
+    if (_config.captureNavigation) _installNavigationCapture();
+
+    // Flush before page unload
+    window.addEventListener('beforeunload', function () { _flush(); });
+    document.addEventListener('visibilitychange', function () {
+      if (document.visibilityState === 'hidden') _flush();
+    });
+
+    // Start flush timer
+    _flushTimer = setInterval(_flush, _config.flushInterval);
+
+    _enqueue('INFO', 'Overcast SDK initialized', {
+      type: 'sdk_init',
+      sdkVersion: '1.0.0',
+      userAgent: navigator.userAgent,
+      url: location.href,
+      screenWidth: screen.width,
+      screenHeight: screen.height,
+      language: navigator.language,
+      online: navigator.onLine,
+    });
+
+    return Overcast;
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CONSOLE CAPTURE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installConsoleCapture() {
+    var methods = ['log', 'info', 'debug', 'warn', 'error', 'trace'];
+    var levelMap = { log: 'INFO', info: 'INFO', debug: 'DEBUG', warn: 'WARNING', error: 'ERROR', trace: 'DEBUG' };
+
+    methods.forEach(function (method) {
+      _originals['console_' + method] = console[method];
+      console[method] = function () {
+        var args = Array.prototype.slice.call(arguments);
+        _originals['console_' + method].apply(console, args);
+
+        if (_sending) return;
+        if (Math.random() > _config.logSamplingRate) return;
+
+        var parsed = _formatArgs(args);
+        var meta = { type: 'console_' + method };
+        if (parsed.errorObj) {
+          meta.error = { name: parsed.errorObj.name, message: parsed.errorObj.message, stack: parsed.errorObj.stack };
+        }
+        _enqueue(levelMap[method] || 'INFO', parsed.message, meta);
+      };
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ERROR CAPTURE — uncaught JS errors
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installErrorCapture() {
+    window.addEventListener('error', function (event) {
+      if (event.target !== window) return; // Resource errors handled separately
+      _enqueue('ERROR', event.message || 'Unknown JS error', {
+        type: 'javascript_error',
+        error: event.error ? { name: event.error.name, message: event.error.message, stack: event.error.stack } : null,
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+        url: location.href,
+      });
+    }, true);
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PROMISE REJECTION CAPTURE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installRejectionCapture() {
+    window.addEventListener('unhandledrejection', function (event) {
+      var err = event.reason instanceof Error ? event.reason : new Error(String(event.reason));
+      _enqueue('ERROR', 'Unhandled Promise Rejection: ' + err.message, {
+        type: 'unhandled_rejection',
+        error: { name: err.name, message: err.message, stack: err.stack },
+        url: location.href,
+      });
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RESOURCE FAILURE CAPTURE — images, scripts, CSS that fail to load
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installResourceCapture() {
+    window.addEventListener('error', function (event) {
+      if (event.target === window) return; // JS errors handled above
+      var tag = event.target.tagName || '';
+      var src = event.target.src || event.target.href || '';
+      _enqueue('WARNING', 'Failed to load ' + tag + ': ' + src, {
+        type: 'resource_failure',
+        resourceType: tag,
+        resourceUrl: src,
+        url: location.href,
+      });
+    }, true);
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // NETWORK CAPTURE — wraps fetch() and XMLHttpRequest
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installNetworkCapture() {
+    // ── Wrap fetch ──
+    if (typeof window.fetch === 'function') {
+      var origFetch = window.fetch;
+      window.fetch = function () {
+        var args = arguments;
+        var requestUrl = typeof args[0] === 'string' ? args[0] : (args[0] && args[0].url ? args[0].url : '');
+
+        // Skip Overcast's own calls
+        if (requestUrl.indexOf(_config.baseUrl) !== -1) return origFetch.apply(this, args);
+
+        var method = 'GET';
+        var requestBody = null;
+        try {
+          var opts = args[1] || {};
+          method = opts.method || 'GET';
+          if (opts.body) {
+            if (typeof opts.body === 'string') {
+              try { requestBody = JSON.parse(opts.body); } catch (e) { requestBody = opts.body.substring(0, 2000); }
+            } else if (opts.body instanceof FormData) {
+              requestBody = '[FormData]';
+            } else {
+              requestBody = '[Body]';
+            }
+          }
+        } catch (e) { /* ignore */ }
+
+        var startTime = Date.now();
+
+        return origFetch.apply(this, args).then(function (response) {
+          var duration = Date.now() - startTime;
+          var clone = response.clone();
+
+          // Read response body (async)
+          clone.text().then(function (text) {
+            var responseBody = text.substring(0, 2000);
+            try { responseBody = JSON.parse(text); } catch (e) { /* keep as string */ }
+
+            var meta = {
+              type: 'http_outgoing',
+              method: method,
+              url: requestUrl,
+              statusCode: response.status,
+              statusText: response.statusText,
+              duration: duration,
+              requestBody: requestBody,
+              responseBody: responseBody,
+            };
+
+            if (duration > _config.slowApiThreshold) {
+              _enqueue('WARNING', 'Slow request: ' + method + ' ' + requestUrl + ' (' + duration + 'ms)', _assign({}, meta, { type: 'slow_http' }));
+            }
+
+            if (response.status >= 500) {
+              _enqueue('ERROR', 'HTTP ' + response.status + ': ' + method + ' ' + requestUrl, meta);
+            } else if (response.status >= 400) {
+              _enqueue('WARNING', 'HTTP ' + response.status + ': ' + method + ' ' + requestUrl, meta);
+            } else {
+              _enqueue('DEBUG', 'HTTP ' + response.status + ': ' + method + ' ' + requestUrl + ' (' + duration + 'ms)', meta);
+            }
+          }).catch(function () { /* ignore body parse failures */ });
+
+          return response;
+        }).catch(function (err) {
+          var duration = Date.now() - startTime;
+          _enqueue('ERROR', 'Network error: ' + method + ' ' + requestUrl + ' — ' + err.message, {
+            type: 'http_network_error',
+            method: method,
+            url: requestUrl,
+            duration: duration,
+            error: { name: err.name, message: err.message, stack: err.stack },
+          });
+          throw err;
+        });
+      };
+    }
+
+    // ── Wrap XMLHttpRequest ──
+    if (typeof XMLHttpRequest !== 'undefined') {
+      var origOpen = XMLHttpRequest.prototype.open;
+      var origSend = XMLHttpRequest.prototype.send;
+
+      XMLHttpRequest.prototype.open = function (method, url) {
+        this._overcast = { method: method, url: url, startTime: 0 };
+        return origOpen.apply(this, arguments);
+      };
+
+      XMLHttpRequest.prototype.send = function (body) {
+        var xhr = this;
+        var meta = xhr._overcast || {};
+
+        // Skip Overcast's own calls
+        if (meta.url && meta.url.indexOf(_config.baseUrl) !== -1) return origSend.apply(this, arguments);
+
+        meta.startTime = Date.now();
+        meta.requestBody = body ? (typeof body === 'string' ? body.substring(0, 2000) : '[Body]') : null;
+
+        xhr.addEventListener('loadend', function () {
+          var duration = Date.now() - meta.startTime;
+          var responseBody = null;
+          try { responseBody = xhr.responseText ? xhr.responseText.substring(0, 2000) : null; } catch (e) { /* ignore */ }
+
+          var info = {
+            type: 'xhr_outgoing',
+            method: meta.method,
+            url: meta.url,
+            statusCode: xhr.status,
+            duration: duration,
+            requestBody: meta.requestBody,
+            responseBody: responseBody,
+          };
+
+          if (duration > _config.slowApiThreshold) {
+            _enqueue('WARNING', 'Slow XHR: ' + meta.method + ' ' + meta.url + ' (' + duration + 'ms)', _assign({}, info, { type: 'slow_xhr' }));
+          }
+
+          if (xhr.status >= 500) {
+            _enqueue('ERROR', 'XHR ' + xhr.status + ': ' + meta.method + ' ' + meta.url, info);
+          } else if (xhr.status >= 400) {
+            _enqueue('WARNING', 'XHR ' + xhr.status + ': ' + meta.method + ' ' + meta.url, info);
+          }
+        });
+
+        xhr.addEventListener('error', function () {
+          _enqueue('ERROR', 'XHR network error: ' + meta.method + ' ' + meta.url, {
+            type: 'xhr_network_error',
+            method: meta.method,
+            url: meta.url,
+            duration: Date.now() - meta.startTime,
+          });
+        });
+
+        xhr.addEventListener('timeout', function () {
+          _enqueue('ERROR', 'XHR timeout: ' + meta.method + ' ' + meta.url, {
+            type: 'xhr_timeout',
+            method: meta.method,
+            url: meta.url,
+            duration: Date.now() - meta.startTime,
+          });
+        });
+
+        return origSend.apply(this, arguments);
+      };
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PERFORMANCE — page load, memory
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installPerformanceCapture() {
+    window.addEventListener('load', function () {
+      setTimeout(function () {
+        // Navigation timing
+        if (performance.getEntriesByType) {
+          var nav = performance.getEntriesByType('navigation')[0];
+          if (nav) {
+            var loadTime = Math.round(nav.loadEventEnd - nav.startTime);
+            if (loadTime > _config.slowPageLoadThreshold) {
+              _enqueue('WARNING', 'Slow page load: ' + loadTime + 'ms', {
+                type: 'slow_page_load',
+                loadTime: loadTime,
+                domContentLoaded: Math.round(nav.domContentLoadedEventEnd - nav.startTime),
+                ttfb: Math.round(nav.responseStart - nav.requestStart),
+                domInteractive: Math.round(nav.domInteractive - nav.startTime),
+                url: location.href,
+              });
+            } else {
+              _enqueue('INFO', 'Page loaded in ' + loadTime + 'ms', {
+                type: 'page_load',
+                loadTime: loadTime,
+                domContentLoaded: Math.round(nav.domContentLoadedEventEnd - nav.startTime),
+                ttfb: Math.round(nav.responseStart - nav.requestStart),
+                url: location.href,
+              });
+            }
+          }
+        }
+
+        // Memory (Chrome only)
+        if (performance.memory) {
+          var usedMB = (performance.memory.usedJSHeapSize / 1048576).toFixed(1);
+          var totalMB = (performance.memory.jsHeapSizeLimit / 1048576).toFixed(1);
+          var pct = ((performance.memory.usedJSHeapSize / performance.memory.jsHeapSizeLimit) * 100).toFixed(1);
+
+          if (+pct > 85) {
+            _enqueue('WARNING', 'High memory: ' + pct + '% (' + usedMB + 'MB)', {
+              type: 'performance_memory',
+              usedMB: +usedMB,
+              totalMB: +totalMB,
+              percent: +pct,
+            });
+          }
+        }
+      }, 100);
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // WEB VITALS — LCP, FID, CLS, INP
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installWebVitals() {
+    // Largest Contentful Paint (LCP)
+    if (typeof PerformanceObserver !== 'undefined') {
+      try {
+        new PerformanceObserver(function (list) {
+          var entries = list.getEntries();
+          var last = entries[entries.length - 1];
+          if (last) {
+            var lcp = Math.round(last.startTime);
+            _enqueue(lcp > 2500 ? 'WARNING' : 'INFO', 'LCP: ' + lcp + 'ms', {
+              type: 'web_vital_lcp',
+              value: lcp,
+              rating: lcp <= 2500 ? 'good' : lcp <= 4000 ? 'needs-improvement' : 'poor',
+              element: last.element ? last.element.tagName : null,
+              url: location.href,
+            });
+          }
+        }).observe({ type: 'largest-contentful-paint', buffered: true });
+      } catch (e) { /* browser doesn't support */ }
+
+      // First Input Delay (FID) / Interaction to Next Paint (INP)
+      try {
+        new PerformanceObserver(function (list) {
+          var entries = list.getEntries();
+          entries.forEach(function (entry) {
+            var delay = Math.round(entry.processingStart - entry.startTime);
+            if (delay > 100) {
+              _enqueue('WARNING', 'Slow interaction: ' + delay + 'ms delay', {
+                type: 'web_vital_fid',
+                value: delay,
+                rating: delay <= 100 ? 'good' : delay <= 300 ? 'needs-improvement' : 'poor',
+                eventType: entry.name,
+                url: location.href,
+              });
+            }
+          });
+        }).observe({ type: 'first-input', buffered: true });
+      } catch (e) { /* ignore */ }
+
+      // Cumulative Layout Shift (CLS)
+      try {
+        var clsValue = 0;
+        new PerformanceObserver(function (list) {
+          list.getEntries().forEach(function (entry) {
+            if (!entry.hadRecentInput) {
+              clsValue += entry.value;
+            }
+          });
+
+          if (clsValue > 0.1) {
+            _enqueue('WARNING', 'High CLS: ' + clsValue.toFixed(3), {
+              type: 'web_vital_cls',
+              value: +clsValue.toFixed(3),
+              rating: clsValue <= 0.1 ? 'good' : clsValue <= 0.25 ? 'needs-improvement' : 'poor',
+              url: location.href,
+            });
+          }
+        }).observe({ type: 'layout-shift', buffered: true });
+      } catch (e) { /* ignore */ }
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // UX CAPTURE — rage clicks, dead clicks
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installUXCapture() {
+    var clickCounts = {};
+    var clickTimestamps = {};
+
+    document.addEventListener('click', function (event) {
+      if (Math.random() > _config.clickSamplingRate) return;
+
+      var target = event.target;
+      var xpath = _getXPath(target);
+      var now = Date.now();
+      var lastClick = clickTimestamps[xpath] || 0;
+
+      // Rage click: 3+ clicks in 1s on same element
+      if (now - lastClick < 1000) {
+        clickCounts[xpath] = (clickCounts[xpath] || 0) + 1;
+        if (clickCounts[xpath] >= 3) {
+          _enqueue('WARNING', 'Rage click on ' + (target.tagName || 'unknown'), {
+            type: 'ux_rage_click',
+            element: target.tagName,
+            id: target.id,
+            className: target.className,
+            xpath: xpath,
+            clickCount: clickCounts[xpath],
+            url: location.href,
+          });
+          clickCounts[xpath] = 0;
+        }
+      } else {
+        clickCounts[xpath] = 1;
+      }
+      clickTimestamps[xpath] = now;
+
+      // Dead click detection
+      var isInteractive = target.tagName === 'A' || target.tagName === 'BUTTON' ||
+        target.onclick !== null || target.getAttribute('role') === 'button' ||
+        target.closest('a, button, [role="button"]');
+
+      if (isInteractive) {
+        var url = location.href;
+        setTimeout(function () {
+          if (location.href === url && (!document.activeElement || document.activeElement === document.body)) {
+            _enqueue('INFO', 'Potential dead click on ' + target.tagName, {
+              type: 'ux_dead_click',
+              element: target.tagName,
+              id: target.id,
+              text: (target.textContent || '').substring(0, 50),
+              xpath: xpath,
+              url: location.href,
+            });
+          }
+        }, 500);
+      }
+    }, true);
+
+    // Track long tasks (> 50ms)
+    if (typeof PerformanceObserver !== 'undefined') {
+      try {
+        new PerformanceObserver(function (list) {
+          list.getEntries().forEach(function (entry) {
+            if (entry.duration > 100) {
+              _enqueue('WARNING', 'Long task: ' + Math.round(entry.duration) + 'ms', {
+                type: 'ux_long_task',
+                duration: Math.round(entry.duration),
+                url: location.href,
+              });
+            }
+          });
+        }).observe({ type: 'longtask', buffered: true });
+      } catch (e) { /* ignore */ }
+    }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CSP VIOLATION CAPTURE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installCSPCapture() {
+    document.addEventListener('securitypolicyviolation', function (event) {
+      _enqueue('WARNING', 'CSP violation: ' + event.violatedDirective, {
+        type: 'csp_violation',
+        violatedDirective: event.violatedDirective,
+        blockedURI: event.blockedURI,
+        originalPolicy: event.originalPolicy,
+        sourceFile: event.sourceFile,
+        lineNumber: event.lineNumber,
+        url: location.href,
+      });
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // NAVIGATION CAPTURE — SPA route changes
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _installNavigationCapture() {
+    // History API
+    var origPushState = history.pushState;
+    var origReplaceState = history.replaceState;
+
+    history.pushState = function () {
+      origPushState.apply(this, arguments);
+      _onNavigation('pushState');
+    };
+
+    history.replaceState = function () {
+      origReplaceState.apply(this, arguments);
+      _onNavigation('replaceState');
+    };
+
+    window.addEventListener('popstate', function () {
+      _onNavigation('popstate');
+    });
+
+    window.addEventListener('hashchange', function () {
+      _onNavigation('hashchange');
+    });
+
+    // Online/offline
+    window.addEventListener('online', function () {
+      _enqueue('INFO', 'Network came online', { type: 'connectivity_online' });
+    });
+    window.addEventListener('offline', function () {
+      _enqueue('WARNING', 'Network went offline', { type: 'connectivity_offline' });
+    });
+  }
+
+  function _onNavigation(trigger) {
+    _enqueue('INFO', 'Navigation: ' + location.href, {
+      type: 'navigation',
+      trigger: trigger,
+      url: location.href,
+      title: document.title,
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // DATA SANITIZATION
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _sanitize(data) {
+    if (!_config.sanitize) return data;
+    if (data === null || data === undefined) return data;
+    if (typeof data === 'string') return _sanitizeString(data);
+    if (typeof data === 'number' || typeof data === 'boolean') return data;
+    if (data instanceof Error) return { name: data.name, message: _sanitizeString(data.message), stack: data.stack ? _sanitizeString(data.stack) : undefined };
+    if (Array.isArray(data)) return data.map(_sanitize);
+    if (typeof data === 'object') {
+      var out = {};
+      for (var key in data) {
+        if (!data.hasOwnProperty(key)) continue;
+        if (_isSensitiveKey(key.toLowerCase())) { out[key] = '[REDACTED]'; }
+        else { try { out[key] = _sanitize(data[key]); } catch (e) { out[key] = '[Unserializable]'; } }
+      }
+      return out;
+    }
+    return data;
+  }
+
+  function _isSensitiveKey(k) {
+    return /password|passwd|pwd|secret|token|auth|apikey|api_key|access_key|private_key|credential|credit|card|ssn|social|cookie|session_id/.test(k);
+  }
+
+  function _sanitizeString(str) {
+    if (typeof str !== 'string') return str;
+    return str
+      .replace(/\b(password|passwd|pwd|secret|pass)\s*[:=]\s*["']?([^\s"',;}\]]+)["']?/gi, '$1=[REDACTED]')
+      .replace(/\b(Bearer)\s+[A-Za-z0-9\-._~+\/]+=*/gi, '$1 [REDACTED]')
+      .replace(/\beyJ[A-Za-z0-9\-_=]+\.eyJ[A-Za-z0-9\-_=]+\.[A-Za-z0-9\-_.+\/=]*/g, '[REDACTED_JWT]')
+      .replace(/\b(sk_|pk_|api_|key_|token_)[A-Za-z0-9]{16,}/gi, '[REDACTED_KEY]')
+      .replace(/\b(AKIA|ASIA)[A-Z0-9]{16}/g, '[REDACTED_AWS]')
+      .replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b/g, '[REDACTED_EMAIL]')
+      .replace(/(\+\d{1,3}[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}/g, '[REDACTED_PHONE]')
+      .replace(/\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g, '[REDACTED_CC]')
+      .replace(/\b\d{3}-\d{2}-\d{4}\b/g, '[REDACTED_SSN]')
+      .replace(/([?&])(session|sess|sid|token|auth|key|apikey)=([^&\s]+)/gi, '$1$2=[REDACTED]')
+      .replace(/(Authorization|X-Auth-Token|X-API-Key)\s*:\s*([^\s,;]+)/gi, '$1: [REDACTED]');
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ENCRYPTION — AES-256-GCM (uses Web Crypto API)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _encrypt(plaintext) {
+    if (!_config.encryptPayload || !_config.encryptionKey || !window.crypto?.subtle) {
+      return Promise.resolve(plaintext);
+    }
+
+    var keyBytes = _hexToBytes(_config.encryptionKey);
+    var iv = window.crypto.getRandomValues(new Uint8Array(12));
+    var data = new TextEncoder().encode(plaintext);
+
+    return window.crypto.subtle.importKey('raw', keyBytes, { name: 'AES-GCM' }, false, ['encrypt'])
+      .then(function (key) {
+        return window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: iv }, key, data);
+      })
+      .then(function (encrypted) {
+        return JSON.stringify({
+          encrypted: true,
+          algorithm: 'aes-256-gcm',
+          iv: _bytesToBase64(iv),
+          data: _bytesToBase64(new Uint8Array(encrypted)),
+        });
+      })
+      .catch(function () { return plaintext; });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TRANSPORT
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _enqueue(level, message, metadata) {
+    if (!_initialized || _sending) return;
+
+    var sanitizedMessage = _sanitize(message);
+    var sanitizedMeta = _sanitize(metadata || {});
+
+    var entry = {
+      timestamp: new Date().toISOString(),
+      level: level,
+      message: typeof sanitizedMessage === 'string' ? sanitizedMessage : JSON.stringify(sanitizedMessage),
+      service: _config.serviceName,
+      environment: _config.environment,
+      raw_log: typeof sanitizedMessage === 'string' ? sanitizedMessage : JSON.stringify(sanitizedMessage),
+      metadata: _assign({}, sanitizedMeta, {
+        sdkLanguage: 'browser',
+        sdkVersion: '1.0.0',
+        userAgent: navigator.userAgent,
+        url: location.href,
+      }),
+    };
+
+    if (sanitizedMeta.error && sanitizedMeta.error.stack) {
+      entry.message += '\n\nStack trace:\n' + sanitizedMeta.error.stack;
+      entry.raw_log = entry.message;
+    }
+
+    _buffer.push(entry);
+
+    if (_buffer.length > _config.maxBufferSize) {
+      _buffer = _buffer.slice(_buffer.length - _config.maxBufferSize);
+    }
+
+    if (level === 'ERROR' || _buffer.length >= _config.batchSize) {
+      _flush();
+    }
+  }
+
+  function _flush() {
+    if (_buffer.length === 0) return;
+
+    var logs = _buffer.splice(0, _config.batchSize);
+    var body = JSON.stringify({
+      api_key: _config.apiKey,
+      source_type: 'application',
+      source_description: _config.serviceName + ' (browser)',
+      logs: logs,
+    });
+
+    if (_config.encryptPayload) {
+      _encrypt(body).then(function (payload) { _send(payload); });
+    } else {
+      _send(body);
+    }
+  }
+
+  function _send(body) {
+    _sending = true;
+    var url = _config.baseUrl + INGEST_ENDPOINT;
+
+    // Use sendBeacon for unload, fetch otherwise
+    if (document.visibilityState === 'hidden' && navigator.sendBeacon) {
+      try { navigator.sendBeacon(url, body); } catch (e) { /* ignore */ }
+      _sending = false;
+      return;
+    }
+
+    // Use original fetch to avoid re-interception
+    var fetchFn = _originals._fetch || window.fetch;
+    fetchFn(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Overcast-Key': _config.apiKey,
+        'X-Overcast-Service': _config.serviceName,
+        'X-Overcast-SDK': 'browser/1.0.0',
+      },
+      body: body,
+      keepalive: true,
+    }).catch(function () { /* silent fail */ }).finally(function () { _sending = false; });
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // HELPERS
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _formatArgs(args) {
+    var errorObj = null;
+    var parts = [];
+    for (var i = 0; i < args.length; i++) {
+      if (args[i] instanceof Error) { if (!errorObj) errorObj = args[i]; parts.push(args[i].message); }
+      else if (typeof args[i] === 'object') { try { parts.push(JSON.stringify(args[i])); } catch (e) { parts.push('[Object]'); } }
+      else { parts.push(String(args[i])); }
+    }
+    return { message: parts.join(' '), errorObj: errorObj };
+  }
+
+  function _getXPath(el) {
+    if (!el) return '';
+    if (el.id) return '//*[@id="' + el.id + '"]';
+    if (el === document.body) return '/html/body';
+    var path = '';
+    while (el && el.nodeType === 1) {
+      var idx = 0, sib = el.previousSibling;
+      while (sib) { if (sib.nodeType === 1 && sib.nodeName === el.nodeName) idx++; sib = sib.previousSibling; }
+      path = '/' + el.nodeName.toLowerCase() + (idx ? '[' + (idx + 1) + ']' : '') + path;
+      el = el.parentNode;
+    }
+    return path;
+  }
+
+  function _assign(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var src = arguments[i];
+      if (src) { for (var k in src) { if (src.hasOwnProperty(k)) target[k] = src[k]; } }
+    }
+    return target;
+  }
+
+  function _hexToBytes(hex) {
+    var bytes = new Uint8Array(hex.length / 2);
+    for (var i = 0; i < hex.length; i += 2) bytes[i / 2] = parseInt(hex.substr(i, 2), 16);
+    return bytes;
+  }
+
+  function _bytesToBase64(bytes) {
+    var bin = '';
+    for (var i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+    return btoa(bin);
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PUBLIC INTERFACE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  var Overcast = {
+    init: init,
+    error: function (msg, meta) { _enqueue('ERROR', msg, _assign({ type: 'manual' }, meta)); },
+    warn: function (msg, meta) { _enqueue('WARNING', msg, _assign({ type: 'manual' }, meta)); },
+    info: function (msg, meta) { _enqueue('INFO', msg, _assign({ type: 'manual' }, meta)); },
+    debug: function (msg, meta) { _enqueue('DEBUG', msg, _assign({ type: 'manual' }, meta)); },
+    captureException: function (err, meta) {
+      if (!(err instanceof Error)) err = new Error(String(err));
+      _enqueue('ERROR', err.message, _assign({ type: 'captured_exception', error: { name: err.name, message: err.message, stack: err.stack } }, meta));
+    },
+    flush: _flush,
+    getBufferSize: function () { return _buffer.length; },
+  };
+
+  // Save original fetch before we wrap it
+  if (typeof window !== 'undefined' && typeof window.fetch === 'function') {
+    _originals._fetch = window.fetch.bind(window);
+  }
+
+  return Overcast;
+});

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@overcastsre/browser",
+  "version": "1.0.0",
+  "description": "Overcast SRE monitoring SDK for browsers — captures everything client-side.",
+  "main": "index.js",
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "license": "MIT",
+  "keywords": ["overcast", "monitoring", "error-tracking", "browser", "frontend", "observability"],
+  "files": ["index.js", "index.mjs", "index.d.ts", "README.md"],
+  "repository": { "type": "git", "url": "https://github.com/overcast/sdk-browser" },
+  "homepage": "https://overcastsre.com/docs/browser"
+}