@djangocfg/monitor 2.1.217 → 2.1.219

package/README.md

@@ -124,6 +124,36 @@ class Config(DjangoConfig):
 
 Ingest endpoint: `POST /cfg/monitor/ingest/` — no auth required, 100 req/min per IP.
 
+## Browser Console Testing
+
+After `MonitorProvider` mounts, `window.monitor` is available in DevTools for manual testing:
+
+```javascript
+// Fire events from DevTools console
+window.monitor.error('Payment failed', { orderId: '123' })
+window.monitor.warn('Slow response', { ms: 2400 })
+window.monitor.info('User action', { action: 'checkout' })
+window.monitor.network(404, 'GET', '/api/users/')
+window.monitor.network(502, 'POST', '/api/orders/', { retries: 3 })
+
+// Force-send buffered events immediately
+window.monitor.flush()
+
+// Inspect current state
+window.monitor.status()
+// → logs config, buffer size, session_id
+```
+
+## Debug Panel Integration
+
+Install `@djangocfg/debuger` alongside this package — it auto-bridges the monitor event store into the debug panel's Logs tab. No extra setup needed.
+
+```bash
+pnpm add @djangocfg/debuger
+```
+
+Events captured by monitor (JS errors, console, network) appear in the panel as `monitor:JS_ERROR`, `monitor:NETWORK_ERROR`, etc.
+
 ## Safety
 
 Transport errors are **always swallowed** — monitor never crashes your app and never sends its own errors to itself. If the backend is unreachable, events are silently dropped.

package/dist/client.cjs

@@ -6,6 +6,9 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -28,12 +31,243 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/lib/retry_operation.js
+var require_retry_operation = __commonJS({
+  "../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/lib/retry_operation.js"(exports, module2) {
+    function RetryOperation(timeouts, options) {
+      if (typeof options === "boolean") {
+        options = { forever: options };
+      }
+      this._originalTimeouts = JSON.parse(JSON.stringify(timeouts));
+      this._timeouts = timeouts;
+      this._options = options || {};
+      this._maxRetryTime = options && options.maxRetryTime || Infinity;
+      this._fn = null;
+      this._errors = [];
+      this._attempts = 1;
+      this._operationTimeout = null;
+      this._operationTimeoutCb = null;
+      this._timeout = null;
+      this._operationStart = null;
+      this._timer = null;
+      if (this._options.forever) {
+        this._cachedTimeouts = this._timeouts.slice(0);
+      }
+    }
+    __name(RetryOperation, "RetryOperation");
+    module2.exports = RetryOperation;
+    RetryOperation.prototype.reset = function() {
+      this._attempts = 1;
+      this._timeouts = this._originalTimeouts.slice(0);
+    };
+    RetryOperation.prototype.stop = function() {
+      if (this._timeout) {
+        clearTimeout(this._timeout);
+      }
+      if (this._timer) {
+        clearTimeout(this._timer);
+      }
+      this._timeouts = [];
+      this._cachedTimeouts = null;
+    };
+    RetryOperation.prototype.retry = function(err) {
+      if (this._timeout) {
+        clearTimeout(this._timeout);
+      }
+      if (!err) {
+        return false;
+      }
+      var currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (err && currentTime - this._operationStart >= this._maxRetryTime) {
+        this._errors.push(err);
+        this._errors.unshift(new Error("RetryOperation timeout occurred"));
+        return false;
+      }
+      this._errors.push(err);
+      var timeout = this._timeouts.shift();
+      if (timeout === void 0) {
+        if (this._cachedTimeouts) {
+          this._errors.splice(0, this._errors.length - 1);
+          timeout = this._cachedTimeouts.slice(-1);
+        } else {
+          return false;
+        }
+      }
+      var self = this;
+      this._timer = setTimeout(function() {
+        self._attempts++;
+        if (self._operationTimeoutCb) {
+          self._timeout = setTimeout(function() {
+            self._operationTimeoutCb(self._attempts);
+          }, self._operationTimeout);
+          if (self._options.unref) {
+            self._timeout.unref();
+          }
+        }
+        self._fn(self._attempts);
+      }, timeout);
+      if (this._options.unref) {
+        this._timer.unref();
+      }
+      return true;
+    };
+    RetryOperation.prototype.attempt = function(fn, timeoutOps) {
+      this._fn = fn;
+      if (timeoutOps) {
+        if (timeoutOps.timeout) {
+          this._operationTimeout = timeoutOps.timeout;
+        }
+        if (timeoutOps.cb) {
+          this._operationTimeoutCb = timeoutOps.cb;
+        }
+      }
+      var self = this;
+      if (this._operationTimeoutCb) {
+        this._timeout = setTimeout(function() {
+          self._operationTimeoutCb();
+        }, self._operationTimeout);
+      }
+      this._operationStart = (/* @__PURE__ */ new Date()).getTime();
+      this._fn(this._attempts);
+    };
+    RetryOperation.prototype.try = function(fn) {
+      console.log("Using RetryOperation.try() is deprecated");
+      this.attempt(fn);
+    };
+    RetryOperation.prototype.start = function(fn) {
+      console.log("Using RetryOperation.start() is deprecated");
+      this.attempt(fn);
+    };
+    RetryOperation.prototype.start = RetryOperation.prototype.try;
+    RetryOperation.prototype.errors = function() {
+      return this._errors;
+    };
+    RetryOperation.prototype.attempts = function() {
+      return this._attempts;
+    };
+    RetryOperation.prototype.mainError = function() {
+      if (this._errors.length === 0) {
+        return null;
+      }
+      var counts = {};
+      var mainError = null;
+      var mainErrorCount = 0;
+      for (var i = 0; i < this._errors.length; i++) {
+        var error = this._errors[i];
+        var message = error.message;
+        var count = (counts[message] || 0) + 1;
+        counts[message] = count;
+        if (count >= mainErrorCount) {
+          mainError = error;
+          mainErrorCount = count;
+        }
+      }
+      return mainError;
+    };
+  }
+});
+
+// ../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/lib/retry.js
+var require_retry = __commonJS({
+  "../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/lib/retry.js"(exports) {
+    var RetryOperation = require_retry_operation();
+    exports.operation = function(options) {
+      var timeouts = exports.timeouts(options);
+      return new RetryOperation(timeouts, {
+        forever: options && (options.forever || options.retries === Infinity),
+        unref: options && options.unref,
+        maxRetryTime: options && options.maxRetryTime
+      });
+    };
+    exports.timeouts = function(options) {
+      if (options instanceof Array) {
+        return [].concat(options);
+      }
+      var opts = {
+        retries: 10,
+        factor: 2,
+        minTimeout: 1 * 1e3,
+        maxTimeout: Infinity,
+        randomize: false
+      };
+      for (var key in options) {
+        opts[key] = options[key];
+      }
+      if (opts.minTimeout > opts.maxTimeout) {
+        throw new Error("minTimeout is greater than maxTimeout");
+      }
+      var timeouts = [];
+      for (var i = 0; i < opts.retries; i++) {
+        timeouts.push(this.createTimeout(i, opts));
+      }
+      if (options && options.forever && !timeouts.length) {
+        timeouts.push(this.createTimeout(i, opts));
+      }
+      timeouts.sort(function(a, b) {
+        return a - b;
+      });
+      return timeouts;
+    };
+    exports.createTimeout = function(attempt, opts) {
+      var random = opts.randomize ? Math.random() + 1 : 1;
+      var timeout = Math.round(random * Math.max(opts.minTimeout, 1) * Math.pow(opts.factor, attempt));
+      timeout = Math.min(timeout, opts.maxTimeout);
+      return timeout;
+    };
+    exports.wrap = function(obj, options, methods) {
+      if (options instanceof Array) {
+        methods = options;
+        options = null;
+      }
+      if (!methods) {
+        methods = [];
+        for (var key in obj) {
+          if (typeof obj[key] === "function") {
+            methods.push(key);
+          }
+        }
+      }
+      for (var i = 0; i < methods.length; i++) {
+        var method = methods[i];
+        var original = obj[method];
+        obj[method] = (/* @__PURE__ */ __name(function retryWrapper(original2) {
+          var op = exports.operation(options);
+          var args = Array.prototype.slice.call(arguments, 1);
+          var callback = args.pop();
+          args.push(function(err) {
+            if (op.retry(err)) {
+              return;
+            }
+            if (err) {
+              arguments[0] = op.mainError();
+            }
+            callback.apply(this, arguments);
+          });
+          op.attempt(function() {
+            original2.apply(obj, args);
+          });
+        }, "retryWrapper")).bind(obj, original);
+        obj[method].options = options;
+      }
+    };
+  }
+});
+
+// ../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/index.js
+var require_retry2 = __commonJS({
+  "../../node_modules/.pnpm/retry@0.13.1/node_modules/retry/index.js"(exports, module2) {
+    module2.exports = require_retry();
+  }
+});
+
 // src/client/index.ts
 var client_exports = {};
 __export(client_exports, {
   FrontendMonitor: () => FrontendMonitor,
   MonitorProvider: () => MonitorProvider,
   getSessionId: () => getSessionId,
+  initWindowMonitor: () => initWindowMonitor,
+  monitorStore: () => monitorStore,
   monitoredFetch: () => monitoredFetch
 });
 module.exports = __toCommonJS(client_exports);
@@ -428,8 +662,127 @@ __name(_APILogger, "APILogger");
 var APILogger = _APILogger;
 var defaultLogger = new APILogger();
 
+// ../../node_modules/.pnpm/p-retry@6.2.1/node_modules/p-retry/index.js
+var import_retry = __toESM(require_retry2(), 1);
+
+// ../../node_modules/.pnpm/is-network-error@1.3.0/node_modules/is-network-error/index.js
+var objectToString = Object.prototype.toString;
+var isError = /* @__PURE__ */ __name((value) => objectToString.call(value) === "[object Error]", "isError");
+var errorMessages = /* @__PURE__ */ new Set([
+  "network error",
+  // Chrome
+  "Failed to fetch",
+  // Chrome
+  "NetworkError when attempting to fetch resource.",
+  // Firefox
+  "The Internet connection appears to be offline.",
+  // Safari 16
+  "Network request failed",
+  // `cross-fetch`
+  "fetch failed",
+  // Undici (Node.js)
+  "terminated",
+  // Undici (Node.js)
+  " A network error occurred.",
+  // Bun (WebKit)
+  "Network connection lost"
+  // Cloudflare Workers (fetch)
+]);
+function isNetworkError(error) {
+  const isValid = error && isError(error) && error.name === "TypeError" && typeof error.message === "string";
+  if (!isValid) {
+    return false;
+  }
+  const { message, stack } = error;
+  if (message === "Load failed") {
+    return stack === void 0 || "__sentry_captured__" in error;
+  }
+  if (message.startsWith("error sending request for url")) {
+    return true;
+  }
+  return errorMessages.has(message);
+}
+__name(isNetworkError, "isNetworkError");
+
+// ../../node_modules/.pnpm/p-retry@6.2.1/node_modules/p-retry/index.js
+var _AbortError = class _AbortError extends Error {
+  constructor(message) {
+    super();
+    if (message instanceof Error) {
+      this.originalError = message;
+      ({ message } = message);
+    } else {
+      this.originalError = new Error(message);
+      this.originalError.stack = this.stack;
+    }
+    this.name = "AbortError";
+    this.message = message;
+  }
+};
+__name(_AbortError, "AbortError");
+var AbortError = _AbortError;
+var decorateErrorWithCounts = /* @__PURE__ */ __name((error, attemptNumber, options) => {
+  const retriesLeft = options.retries - (attemptNumber - 1);
+  error.attemptNumber = attemptNumber;
+  error.retriesLeft = retriesLeft;
+  return error;
+}, "decorateErrorWithCounts");
+async function pRetry(input, options) {
+  return new Promise((resolve, reject) => {
+    options = { ...options };
+    options.onFailedAttempt ?? (options.onFailedAttempt = () => {
+    });
+    options.shouldRetry ?? (options.shouldRetry = () => true);
+    options.retries ?? (options.retries = 10);
+    const operation = import_retry.default.operation(options);
+    const abortHandler = /* @__PURE__ */ __name(() => {
+      operation.stop();
+      reject(options.signal?.reason);
+    }, "abortHandler");
+    if (options.signal && !options.signal.aborted) {
+      options.signal.addEventListener("abort", abortHandler, { once: true });
+    }
+    const cleanUp = /* @__PURE__ */ __name(() => {
+      options.signal?.removeEventListener("abort", abortHandler);
+      operation.stop();
+    }, "cleanUp");
+    operation.attempt(async (attemptNumber) => {
+      try {
+        const result = await input(attemptNumber);
+        cleanUp();
+        resolve(result);
+      } catch (error) {
+        try {
+          if (!(error instanceof Error)) {
+            throw new TypeError(`Non-error was thrown: "${error}". You should only throw errors.`);
+          }
+          if (error instanceof AbortError) {
+            throw error.originalError;
+          }
+          if (error instanceof TypeError && !isNetworkError(error)) {
+            throw error;
+          }
+          decorateErrorWithCounts(error, attemptNumber, options);
+          if (!await options.shouldRetry(error)) {
+            operation.stop();
+            reject(error);
+          }
+          await options.onFailedAttempt(error);
+          if (!operation.retry(error)) {
+            throw operation.mainError();
+          }
+        } catch (finalError) {
+          decorateErrorWithCounts(finalError, attemptNumber, options);
+          cleanUp();
+          reject(finalError);
+        }
+      }
+    });
+  });
+}
+__name(pRetry, "pRetry");
+
 // src/_api/generated/cfg_monitor/retry.ts
-var import_p_retry = __toESM(require("p-retry"), 1);
 var DEFAULT_RETRY_CONFIG = {
   retries: 3,
   factor: 2,
@@ -458,13 +811,13 @@ function shouldRetry(error) {
 __name(shouldRetry, "shouldRetry");
 async function withRetry(fn, config) {
   const finalConfig = { ...DEFAULT_RETRY_CONFIG, ...config };
-  return (0, import_p_retry.default)(
+  return pRetry(
     async () => {
       try {
         return await fn();
       } catch (error) {
         if (!shouldRetry(error)) {
-          throw new import_p_retry.AbortError(error);
+          throw new AbortError(error);
         }
         throw error;
       }
@@ -1237,9 +1590,76 @@ __name(monitoredFetch, "monitoredFetch");
 
 // src/client/MonitorProvider.tsx
 var import_react = require("react");
+
+// src/client/window.ts
+function makeEvent(type, level, message, extra) {
+  const state = monitorStore.getState();
+  const cfg = state.config;
+  return {
+    event_type: type,
+    level,
+    message,
+    session_id: getSessionId(),
+    url: window.location.href,
+    user_agent: navigator.userAgent,
+    project_name: cfg.project ?? "",
+    environment: cfg.environment ?? "",
+    ...extra ? { extra } : {}
+  };
+}
+__name(makeEvent, "makeEvent");
+function initWindowMonitor() {
+  if (typeof window === "undefined") return;
+  const api = {
+    error(message, extra) {
+      monitorStore.getState().push(makeEvent("JS_ERROR" /* JS_ERROR */, "error" /* ERROR */, message, extra));
+      console.log("[monitor] error captured \u2192", message);
+    },
+    warn(message, extra) {
+      monitorStore.getState().push(makeEvent("WARNING" /* WARNING */, "warn" /* WARN */, message, extra));
+      console.log("[monitor] warn captured \u2192", message);
+    },
+    info(message, extra) {
+      monitorStore.getState().push(makeEvent("INFO" /* INFO */, "info" /* INFO */, message, extra));
+      console.log("[monitor] info captured \u2192", message);
+    },
+    network(status, method, url, extra) {
+      const event = makeEvent(
+        "NETWORK_ERROR" /* NETWORK_ERROR */,
+        status >= 500 ? "error" /* ERROR */ : "warn" /* WARN */,
+        `${method} ${url} \u2192 ${status}`,
+        extra
+      );
+      monitorStore.getState().push({ ...event, http_status: status, http_method: method, http_url: url });
+      console.log("[monitor] network captured \u2192", method, url, status);
+    },
+    capture(event) {
+      monitorStore.getState().push(event);
+      console.log("[monitor] event captured \u2192", event);
+    },
+    flush() {
+      monitorStore.getState().flush();
+      console.log("[monitor] flushed");
+    },
+    status() {
+      const state = monitorStore.getState();
+      console.group("[monitor] status");
+      console.log("config:", state.config);
+      console.log("buffer size:", state.buffer.length);
+      console.log("initialized:", state.initialized);
+      console.log("session_id:", getSessionId());
+      console.groupEnd();
+    }
+  };
+  window.monitor = api;
+}
+__name(initWindowMonitor, "initWindowMonitor");
+
+// src/client/MonitorProvider.tsx
 function MonitorProvider({ children, ...config }) {
   (0, import_react.useEffect)(() => {
     FrontendMonitor.init(config);
+    initWindowMonitor();
     return () => FrontendMonitor.destroy();
   }, []);
   return children ?? null;
@@ -1252,7 +1672,8 @@ var cleanupFns = [];
 var FrontendMonitor = {
   init(config = {}) {
     if (typeof window === "undefined") return;
-    if (config.baseUrl) configureMonitorApi(config.baseUrl);
+    const baseUrl = config.baseUrl ?? process.env.NEXT_PUBLIC_API_URL ?? "";
+    if (baseUrl) configureMonitorApi(baseUrl);
     monitorStore.getState().setConfig(config);
     ensureSessionCookie();
     if (config.captureJsErrors !== false) cleanupFns.push(installJsErrorCapture());