@djangocfg/devtools 2.1.548 → 2.1.549

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/devtools",
-  "version": "2.1.548",
+  "version": "2.1.549",
   "description": "Frontend devtools for django-cfg apps: error/console capture with backend ingest, plus a floating debug panel. One package, one event stream.",
   "keywords": [
     "django",
@@ -49,16 +49,16 @@
     "lint": "eslint ."
   },
   "peerDependencies": {
-    "@djangocfg/ui-core": "^2.1.548",
+    "@djangocfg/ui-core": "^2.1.549",
     "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.548",
-    "@djangocfg/typescript-config": "^2.1.548",
-    "@djangocfg/ui-core": "^2.1.548",
+    "@djangocfg/eslint-config": "^2.1.549",
+    "@djangocfg/typescript-config": "^2.1.549",
+    "@djangocfg/ui-core": "^2.1.549",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/capture.ts

@@ -23,8 +23,17 @@ const HYDRATION_NOISE: RegExp[] = [
   /text content does not match server-rendered html/i,
 ]
 
+// Third-party libraries that log a handled failure through console.error.
+// The call already succeeded or fell back, so reporting it alerts on nothing.
+const LIBRARY_NOISE: RegExp[] = [
+  // input-otp probes `:autofill`, which older engines reject, then installs
+  // the `-webkit-autofill` rule that actually applies. Nothing is broken.
+  /input-otp could not insert CSS rule/i,
+]
+
 function isNoise(msg: string, stack?: string): boolean {
   if (HYDRATION_NOISE.some((p) => p.test(msg))) return true
+  if (LIBRARY_NOISE.some((p) => p.test(msg))) return true
   // Our own transport failing must never loop back into capture.
   return INGEST_PATTERN.test(msg) || INGEST_PATTERN.test(stack ?? '')
 }

package/src/instance.ts

@@ -13,7 +13,7 @@ import {
   installJsErrorCapture,
   installValidationCapture,
 } from './capture'
-import { DEFAULT_FLUSH_INTERVAL, getSessionId, isDevelopment } from './internal'
+import { DEFAULT_FLUSH_INTERVAL, getSessionId, isDevelopment, rawConsole } from './internal'
 import { devtoolsStore } from './store'
 import { EventLevel, EventType } from './types'
 import type { DevtoolsConfig, DevtoolsEvent, Logger } from './types'
@@ -145,9 +145,12 @@ export const devtools = {
         devtoolsStore.getState().addEntry({ level, source, message, data: cleanData, stack })
       }
       if (isDevelopment) {
+        // rawConsole, not console: `installConsoleCapture` wraps console.error
+        // and console.warn, so printing through them would feed this
+        // panel-only line back into capture and ingest it.
         const method = level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log'
-        if (cleanData) console[method](`[${source}]`, message, cleanData)
-        else console[method](`[${source}]`, message)
+        if (cleanData) rawConsole[method](`[${source}]`, message, cleanData)
+        else rawConsole[method](`[${source}]`, message)
       }
     }
     return {

package/src/internal.ts

@@ -83,3 +83,16 @@ export function makeDeduper(max = 200): (key: string, ttl: number) => boolean {
 export function truncate(s: string, max: number): string {
   return s.length > max ? s.slice(0, max - 1) + '…' : s
 }
+
+/**
+ * The console as it was before `installConsoleCapture` wrapped it.
+ *
+ * Bound at module load, which runs before any install, so callers that must
+ * NOT feed capture — the local logger — can still print. Going through the
+ * wrapped console instead turns a panel-only log line into an ingested event.
+ */
+export const rawConsole = {
+  log: console.log.bind(console),
+  warn: console.warn.bind(console),
+  error: console.error.bind(console),
+}

package/src/server.ts

@@ -27,10 +27,13 @@ let _config: ServerDevtoolsConfig = {}
 
 async function send(events: DevtoolsEvent[]): Promise<void> {
   try {
+    // `??`, not a spread of the config underneath: an event carrying an
+    // explicit `project_name: undefined` would otherwise blank the configured
+    // one. Same precedence as the browser store.
     await sendBatch(_config.baseUrl ?? '', events.map((e) => ({
-      project_name: _config.project,
-      environment: _config.environment,
       ...e,
+      project_name: e.project_name ?? _config.project,
+      environment: e.environment ?? _config.environment,
     })))
   } catch {
     // Never throw from error reporting

package/src/store.ts

@@ -24,6 +24,9 @@ import type { DevtoolsConfig, DevtoolsEvent, LogEntry, LogLevel } from './types'
 
 const MAX_ENTRIES = 1000
 const MAX_BATCH = 25
+// Ceiling for events held while ingest is failing. The oldest are dropped
+// first: during an outage the newest events describe the current state.
+const MAX_OUTBOX = 200
 
 // Circuit breaker: pause ingest after N consecutive transport failures
 const BREAKER_THRESHOLD = 3
@@ -152,7 +155,14 @@ export const devtoolsStore = createStore<DevtoolsState>((set, get) => ({
       () => set({ _failures: 0, _pausedUntil: 0 }),
       () => {
         const failures = get()._failures + 1
+        // Put the batch back, ahead of whatever arrived meanwhile: a failed
+        // send must not consume the events. Dropping them here would lose
+        // exactly the reports of an incident the backend was too busy to take.
+        // A beacon flush is the exception — the page is going away and there
+        // is no later attempt to hand them to.
+        const requeued = useBeacon ? get().outbox : [...batch, ...get().outbox]
         set({
+          outbox: requeued.length > MAX_OUTBOX ? requeued.slice(-MAX_OUTBOX) : requeued,
           _failures: failures,
           _pausedUntil:
             failures >= BREAKER_THRESHOLD ? Date.now() + BREAKER_COOLDOWN_MS : get()._pausedUntil,