@djangocfg/monitor 2.1.229 → 2.1.231

package/README.md

@@ -76,6 +76,7 @@ const res = await monitoredFetch('/api/orders', { method: 'POST', body: JSON.str
 |--------|------|---------|-------------|
 | `project` | `string` | `''` | Project name sent with every event |
 | `environment` | `string` | `''` | `production` / `staging` / `development` |
+| `buildId` | `string` | `sdk:<version>` | Build identifier (e.g. Next.js `BUILD_ID` or git SHA). Stamped on every event as `build_id`. Auto-filled with SDK version if not set |
 | `baseUrl` | `string` | same origin | Base URL of the django-cfg backend |
 | `flushInterval` | `number` | `5000` | Buffer flush interval (ms) |
 | `maxBufferSize` | `number` | `20` | Max events before immediate flush |
@@ -137,7 +138,21 @@ window.monitor.flush()
 
 // Inspect current state
 window.monitor.status()
-// → logs config, buffer size, session_id
+// → logs sdk version, build_id, config, buffer size, session_id
+```
+
+## Debug Mode
+
+`useDebugMode` hook controls whether the debug panel is unlocked:
+
+- **development** — always `true`, no localStorage needed
+- **production** — `?debug=1` in URL → persists to `localStorage.__debug_mode__`, panel unlocks
+- **production** — `?debug=0` in URL → clears `localStorage.__debug_mode__`, panel locks
+
+```typescript
+import { useDebugMode } from '@djangocfg/monitor/client'
+
+const isDebug = useDebugMode()
 ```
 
 ## Debug Panel Integration

package/dist/client.cjs

@@ -266,11 +266,15 @@ __export(client_exports, {
   EventLevel: () => FrontendEventIngestRequestLevel,
   EventType: () => FrontendEventIngestRequestEventType,
   FrontendMonitor: () => FrontendMonitor,
+  MONITOR_VERSION: () => MONITOR_VERSION,
   MonitorProvider: () => MonitorProvider,
   getSessionId: () => getSessionId,
   initWindowMonitor: () => initWindowMonitor,
+  isDevelopment: () => isDevelopment,
+  isProduction: () => isProduction,
   monitorStore: () => monitorStore,
-  monitoredFetch: () => monitoredFetch
+  monitoredFetch: () => monitoredFetch,
+  useDebugMode: () => useDebugMode
 });
 module.exports = __toCommonJS(client_exports);
 
@@ -1353,6 +1357,11 @@ async function sendBatch(batch, useBeacon = false) {
 }
 __name(sendBatch, "sendBatch");
 
+// src/client/utils/env.ts
+var isDevelopment = true;
+var isProduction = false;
+var MONITOR_VERSION = "2.1.231";
+
 // src/client/store/index.ts
 var CIRCUIT_BREAKER_THRESHOLD = 3;
 var CIRCUIT_BREAKER_COOLDOWN_MS = 6e4;
@@ -1366,6 +1375,7 @@ var monitorStore = (0, import_vanilla.createStore)((set, get) => ({
     const { config, buffer } = get();
     const maxSize = config.maxBufferSize ?? 20;
     const sanitized = {
+      build_id: event.build_id ?? config.buildId ?? `sdk:${MONITOR_VERSION}`,
       ...event,
       // Enforce field size limits before buffering (last-resort backstop)
       message: event.message && event.message.length > 4997 ? event.message.slice(0, 4997) + "..." : event.message,
@@ -1727,6 +1737,8 @@ function initWindowMonitor() {
     status() {
       const state = monitorStore.getState();
       console.group("[monitor] status");
+      console.log("sdk version:", MONITOR_VERSION);
+      console.log("build_id:", state.config.buildId ?? `sdk:${MONITOR_VERSION}`);
       console.log("config:", state.config);
       console.log("buffer size:", state.buffer.length);
       console.log("initialized:", state.initialized);
@@ -1749,6 +1761,62 @@ function MonitorProvider({ children, ...config }) {
 }
 __name(MonitorProvider, "MonitorProvider");
 
+// src/client/hooks/useDebugMode.ts
+var import_react2 = require("react");
+var LS_KEY = "__debug_mode__";
+function readFromStorage() {
+  try {
+    return localStorage.getItem(LS_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+__name(readFromStorage, "readFromStorage");
+function persistToStorage() {
+  try {
+    localStorage.setItem(LS_KEY, "1");
+  } catch {
+  }
+}
+__name(persistToStorage, "persistToStorage");
+function clearFromStorage() {
+  try {
+    localStorage.removeItem(LS_KEY);
+  } catch {
+  }
+}
+__name(clearFromStorage, "clearFromStorage");
+function consumeDebugParam() {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  const value = params.get("debug");
+  if (value === null) return null;
+  if (value === "1") {
+    persistToStorage();
+  } else {
+    clearFromStorage();
+  }
+  params.delete("debug");
+  const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}${window.location.hash}`;
+  window.history.replaceState(null, "", newUrl);
+  return value === "1";
+}
+__name(consumeDebugParam, "consumeDebugParam");
+function useDebugMode() {
+  if (isDevelopment) return true;
+  const [isDebug, setIsDebug] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const fromUrl = consumeDebugParam();
+    if (fromUrl !== null) {
+      setIsDebug(fromUrl);
+      return;
+    }
+    setIsDebug(readFromStorage());
+  }, []);
+  return isDebug;
+}
+__name(useDebugMode, "useDebugMode");
+
 // src/client/index.ts
 var flushInterval = null;
 var cleanupFns = [];