@bluebottle_gg/league-broadcast-client 1.1.1 → 1.2.0

package/dist/index.d.ts

@@ -2975,6 +2975,10 @@ interface LeagueBroadcastClientConfig {
     cacheRoute?: string;
     useHttps?: boolean;
     autoConnect?: boolean;
+    overlayHealth?: boolean | {
+        enabled?: boolean;
+        name?: string;
+    };
 }
 interface IngameEventHandlers {
     onPlayerEvent?: (event: playerUpdateEvent) => void;
@@ -3029,6 +3033,7 @@ declare class LeagueBroadcastClient {
     private ingameWs;
     private preGameWs;
     private config;
+    private _overlayHealth;
     private gameData;
     private gameState;
     private _isTestingEnvironment;
@@ -3082,6 +3087,11 @@ declare class LeagueBroadcastClient {
      * Disconnect from both WebSocket endpoints.
      */
     disconnect(): void;
+    /**
+     * Starts passive frontend-health monitoring once, unless disabled via the
+     * `overlayHealth` config. Guarded so it never throws into the client.
+     */
+    private startOverlayHealthIfEnabled;
     /**
      * Whether the in-game WebSocket is connected.
      */

package/dist/index.js

@@ -1389,10 +1389,436 @@ function createIngameTimerUtils(getGameTime) {
   };
 }
 
+// ../shared-overlay-health/src/transport.ts
+function resolveEndpoint(opts) {
+  if (opts.endpoint) return opts.endpoint;
+  const loc = typeof location !== "undefined" ? location : void 0;
+  const https = opts.useHttps ?? loc?.protocol === "https:";
+  const host = opts.host ?? loc?.hostname ?? "localhost";
+  const port = opts.port ?? loc?.port ?? 58869;
+  const portPart = port ? `:${port}` : "";
+  return `${https ? "https" : "http"}://${host}${portPart}/api/overlay/health`;
+}
+function sendReport(endpoint, report) {
+  let body;
+  try {
+    body = JSON.stringify(report);
+  } catch {
+    return false;
+  }
+  try {
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const blob = new Blob([body], { type: "text/plain;charset=UTF-8" });
+      if (navigator.sendBeacon(endpoint, blob)) return true;
+    }
+  } catch {
+  }
+  try {
+    if (typeof fetch === "function") {
+      void fetch(endpoint, {
+        method: "POST",
+        body,
+        headers: { "Content-Type": "text/plain;charset=UTF-8" },
+        keepalive: true,
+        mode: "cors",
+        credentials: "omit"
+      }).catch(() => {
+      });
+      return true;
+    }
+  } catch {
+  }
+  return false;
+}
+
+// ../shared-overlay-health/src/types.ts
+var DEFAULT_THRESHOLDS = {
+  maxDecodedBytes: 24 * 1024 * 1024,
+  // ~2500×2500 px
+  maxImageDimension: 4096,
+  maxOversampleRatio: 4,
+  oversampleMinArea: 1e6,
+  // ~1 MP
+  maxAssetBytes: 5 * 1024 * 1024,
+  // 5 MB on the wire
+  minFps: 30,
+  maxP95FrameMs: 50,
+  longTaskMs: 200,
+  maxJsHeapMb: 768,
+  maxDomNodes: 5e3
+};
+
+// ../shared-overlay-health/src/detector.ts
+var FRAME_WINDOW_MS = 3e3;
+var MAX_ISSUES = 50;
+var TRANSIENT_TTL_MS = 2e4;
+var TRANSIENT_KINDS = /* @__PURE__ */ new Set([
+  "low-fps",
+  "long-task",
+  "high-memory",
+  "dom-bloat"
+]);
+function now() {
+  return Date.now();
+}
+function randomId() {
+  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+}
+function describeElement(el) {
+  const id = el.id ? `#${el.id}` : "";
+  const cls = typeof el.className === "string" && el.className ? `.${el.className.trim().split(/\s+/).slice(0, 2).join(".")}` : "";
+  return `${el.tagName.toLowerCase()}${id}${cls}`;
+}
+var OverlayHealthMonitor = class {
+  constructor(opts) {
+    this.sessionId = randomId();
+    this.issues = /* @__PURE__ */ new Map();
+    /** Recent frame timestamps (epoch ms) within FRAME_WINDOW_MS. */
+    this.frameTimes = [];
+    this.lastFrameAt = 0;
+    this.longTaskTimes = [];
+    this.rafId = null;
+    this.reportTimer = null;
+    this.immediateTimer = null;
+    this.perfObserver = null;
+    this.stopped = false;
+    // ── Detection ──────────────────────────────────────────────────────────
+    this.onError = (e) => {
+      try {
+        const target = e.target;
+        if (target instanceof HTMLImageElement) {
+          const url = target.currentSrc || target.src || target.getAttribute("src") || "(unknown)";
+          this.record({
+            kind: "broken-image",
+            severity: "error",
+            key: url,
+            message: "Image failed to load",
+            url,
+            element: describeElement(target)
+          });
+          return;
+        }
+        const errEvent = e;
+        if (!(target instanceof Element) && errEvent.message) {
+          const where = errEvent.filename ? `${errEvent.filename}:${errEvent.lineno ?? 0}` : "";
+          this.record({
+            kind: "js-error",
+            severity: "error",
+            key: `${errEvent.message}|${where}`,
+            message: errEvent.message,
+            detail: where ? { location: where } : void 0
+          });
+        }
+      } catch {
+      }
+    };
+    this.onLoad = (e) => {
+      try {
+        const target = e.target;
+        if (target instanceof HTMLImageElement) {
+          this.inspectImage(target);
+        }
+      } catch {
+      }
+    };
+    this.onRejection = (e) => {
+      try {
+        const reason = e.reason instanceof Error ? e.reason.message : typeof e.reason === "string" ? e.reason : "Unhandled promise rejection";
+        this.record({
+          kind: "js-error",
+          severity: "error",
+          key: `rejection|${reason}`,
+          message: `Unhandled rejection: ${reason}`
+        });
+      } catch {
+      }
+    };
+    this.onVisibilityChange = () => {
+      if (document.visibilityState === "hidden") this.flush();
+    };
+    this.onPageHide = () => {
+      this.flush();
+    };
+    this.options = {
+      source: opts.source,
+      enabled: opts.enabled ?? true,
+      reportIntervalMs: opts.reportIntervalMs ?? 5e3,
+      thresholds: { ...DEFAULT_THRESHOLDS, ...opts.thresholds ?? {} }
+    };
+    this.endpoint = resolveEndpoint(opts);
+  }
+  start() {
+    if (this.stopped || !this.options.enabled) return;
+    if (typeof window === "undefined") return;
+    window.addEventListener("error", this.onError, true);
+    window.addEventListener("load", this.onLoad, true);
+    window.addEventListener("unhandledrejection", this.onRejection);
+    document.addEventListener("visibilitychange", this.onVisibilityChange);
+    window.addEventListener("pagehide", this.onPageHide);
+    this.startFrameSampling();
+    this.startPerfObserver();
+    this.reportTimer = setInterval(() => this.flush(), this.options.reportIntervalMs);
+  }
+  flush() {
+    if (this.stopped) return;
+    try {
+      const report = this.buildReport();
+      sendReport(this.endpoint, report);
+    } catch {
+    }
+  }
+  stop() {
+    if (this.stopped) return;
+    this.stopped = true;
+    window.removeEventListener("error", this.onError, true);
+    window.removeEventListener("load", this.onLoad, true);
+    window.removeEventListener("unhandledrejection", this.onRejection);
+    document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    window.removeEventListener("pagehide", this.onPageHide);
+    if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+    if (this.reportTimer !== null) clearInterval(this.reportTimer);
+    if (this.immediateTimer !== null) clearTimeout(this.immediateTimer);
+    this.perfObserver?.disconnect();
+  }
+  inspectImage(img) {
+    const nW = img.naturalWidth;
+    const nH = img.naturalHeight;
+    if (!nW || !nH) return;
+    const naturalArea = nW * nH;
+    const decodedBytes = naturalArea * 4;
+    const displayedArea = Math.max(1, img.clientWidth * img.clientHeight);
+    const oversampleRatio = naturalArea / displayedArea;
+    const t = this.options.thresholds;
+    const url = img.currentSrc || img.src;
+    const tooBig = decodedBytes > t.maxDecodedBytes || nW > t.maxImageDimension || nH > t.maxImageDimension;
+    const oversampled = naturalArea > t.oversampleMinArea && oversampleRatio > t.maxOversampleRatio;
+    if (tooBig || oversampled) {
+      this.record({
+        kind: "oversized-image",
+        severity: "warning",
+        key: url,
+        message: tooBig ? `Very large image (${nW}\xD7${nH})` : `Image is much larger than displayed (${nW}\xD7${nH})`,
+        url,
+        element: describeElement(img),
+        detail: {
+          naturalWidth: nW,
+          naturalHeight: nH,
+          displayedWidth: img.clientWidth,
+          displayedHeight: img.clientHeight,
+          approxDecodedMb: Math.round(decodedBytes / (1024 * 1024) * 10) / 10,
+          oversampleRatio: Math.round(oversampleRatio * 10) / 10
+        }
+      });
+    }
+  }
+  startPerfObserver() {
+    if (typeof PerformanceObserver === "undefined") return;
+    try {
+      this.perfObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.entryType === "longtask") {
+            this.longTaskTimes.push(now());
+            if (entry.duration >= this.options.thresholds.longTaskMs) {
+              this.record({
+                kind: "long-task",
+                severity: "warning",
+                key: "long-task",
+                message: "Main thread blocked by a long task",
+                detail: { lastDurationMs: Math.round(entry.duration) }
+              });
+            }
+          } else if (entry.entryType === "resource") {
+            this.inspectResource(entry);
+          }
+        }
+      });
+      this.tryObserve({ type: "longtask", buffered: true });
+      this.tryObserve({ type: "resource", buffered: true });
+    } catch {
+    }
+  }
+  tryObserve(init) {
+    try {
+      this.perfObserver?.observe(init);
+    } catch {
+    }
+  }
+  inspectResource(entry) {
+    if (entry.initiatorType !== "img" && entry.initiatorType !== "css") return;
+    const bytes = entry.encodedBodySize || entry.transferSize || 0;
+    if (bytes > this.options.thresholds.maxAssetBytes) {
+      this.record({
+        kind: "large-asset",
+        severity: "warning",
+        key: entry.name,
+        message: `Large asset download (${Math.round(bytes / (1024 * 1024) * 10) / 10} MB)`,
+        url: entry.name,
+        detail: {
+          encodedBytes: bytes,
+          decodedBytes: entry.decodedBodySize || 0,
+          initiator: entry.initiatorType
+        }
+      });
+    }
+  }
+  startFrameSampling() {
+    if (typeof requestAnimationFrame === "undefined") return;
+    this.lastFrameAt = now();
+    const tick = () => {
+      if (this.stopped) return;
+      const t = now();
+      this.frameTimes.push(t);
+      const cutoff = t - FRAME_WINDOW_MS;
+      while (this.frameTimes.length && this.frameTimes[0] < cutoff) this.frameTimes.shift();
+      this.lastFrameAt = t;
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+  // ── Metrics + reporting ────────────────────────────────────────────────
+  computeMetrics() {
+    const frames = this.frameTimes;
+    const deltas = [];
+    for (let i = 1; i < frames.length; i++) deltas.push(frames[i] - frames[i - 1]);
+    const spanMs = frames.length > 1 ? frames[frames.length - 1] - frames[0] : 0;
+    const fps = spanMs > 0 ? Math.round((frames.length - 1) / spanMs * 1e3) : 0;
+    let p95 = 0;
+    let longest = 0;
+    if (deltas.length) {
+      const sorted = [...deltas].sort((a, b) => a - b);
+      p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))];
+      longest = sorted[sorted.length - 1];
+    }
+    const cutoff = now() - FRAME_WINDOW_MS;
+    this.longTaskTimes = this.longTaskTimes.filter((tt) => tt >= cutoff);
+    const metrics = {
+      fps,
+      p95FrameMs: Math.round(p95),
+      longestFrameMs: Math.round(longest),
+      longTasksInWindow: this.longTaskTimes.length,
+      domNodes: document.getElementsByTagName("*").length
+    };
+    const mem = performance.memory;
+    if (mem) {
+      metrics.jsHeapUsedMb = Math.round(mem.usedJSHeapSize / (1024 * 1024));
+      metrics.jsHeapLimitMb = Math.round(mem.jsHeapSizeLimit / (1024 * 1024));
+    }
+    return metrics;
+  }
+  /** Evaluate window-derived issues (low fps, high memory, dom bloat). */
+  evaluateMetricIssues(metrics) {
+    const t = this.options.thresholds;
+    if (this.frameTimes.length > 30) {
+      if (metrics.fps < t.minFps || metrics.p95FrameMs > t.maxP95FrameMs) {
+        this.record({
+          kind: "low-fps",
+          severity: "warning",
+          key: "low-fps",
+          message: `Low frame rate (${metrics.fps} fps)`,
+          detail: { fps: metrics.fps, p95FrameMs: metrics.p95FrameMs }
+        });
+      }
+    }
+    if (metrics.jsHeapUsedMb !== void 0 && metrics.jsHeapUsedMb > t.maxJsHeapMb) {
+      this.record({
+        kind: "high-memory",
+        severity: "warning",
+        key: "high-memory",
+        message: `High memory use (${metrics.jsHeapUsedMb} MB)`,
+        detail: { jsHeapUsedMb: metrics.jsHeapUsedMb }
+      });
+    }
+    if (metrics.domNodes > t.maxDomNodes) {
+      this.record({
+        kind: "dom-bloat",
+        severity: metrics.domNodes > t.maxDomNodes * 2 ? "warning" : "info",
+        key: "dom-bloat",
+        message: `Large DOM (${metrics.domNodes} elements)`,
+        detail: { domNodes: metrics.domNodes }
+      });
+    }
+  }
+  buildReport() {
+    const metrics = this.computeMetrics();
+    this.evaluateMetricIssues(metrics);
+    this.pruneTransientIssues();
+    return {
+      source: this.options.source,
+      sessionId: this.sessionId,
+      url: typeof location !== "undefined" ? location.href : "",
+      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
+      timestamp: now(),
+      metrics,
+      issues: [...this.issues.values()]
+    };
+  }
+  record(input) {
+    const mapKey = `${input.kind}:${input.key}`;
+    const ts = now();
+    const existing = this.issues.get(mapKey);
+    if (existing) {
+      existing.count++;
+      existing.lastSeen = ts;
+      existing.message = input.message;
+      if (input.detail) existing.detail = input.detail;
+      return;
+    }
+    if (this.issues.size >= MAX_ISSUES) this.evictOldest();
+    this.issues.set(mapKey, {
+      kind: input.kind,
+      severity: input.severity,
+      key: input.key,
+      message: input.message,
+      url: input.url,
+      element: input.element,
+      detail: input.detail,
+      count: 1,
+      firstSeen: ts,
+      lastSeen: ts
+    });
+    if (input.severity === "error") this.scheduleImmediate();
+  }
+  scheduleImmediate() {
+    if (this.immediateTimer !== null) return;
+    this.immediateTimer = setTimeout(() => {
+      this.immediateTimer = null;
+      this.flush();
+    }, 750);
+  }
+  pruneTransientIssues() {
+    const cutoff = now() - TRANSIENT_TTL_MS;
+    for (const [k, issue] of this.issues) {
+      if (TRANSIENT_KINDS.has(issue.kind) && issue.lastSeen < cutoff) {
+        this.issues.delete(k);
+      }
+    }
+  }
+  evictOldest() {
+    let oldestKey = null;
+    let oldest = Infinity;
+    for (const [k, issue] of this.issues) {
+      if (issue.lastSeen < oldest) {
+        oldest = issue.lastSeen;
+        oldestKey = k;
+      }
+    }
+    if (oldestKey) this.issues.delete(oldestKey);
+  }
+};
+
+// ../shared-overlay-health/src/index.ts
+function startOverlayHealth(options) {
+  const monitor = new OverlayHealthMonitor(options);
+  monitor.start();
+  return monitor;
+}
+
 // src/LeagueBroadcastClient.ts
 var _clockInterval = null;
 var LeagueBroadcastClient = class {
   constructor(config) {
+    // -- Frontend-health monitoring ---------------------------------------------
+    this._overlayHealth = null;
     this.gameState = 0 /* OutOfGame */;
     this._isTestingEnvironment = false;
     this.champSelectWasActive = false;
@@ -1424,7 +1850,8 @@ var LeagueBroadcastClient = class {
       apiRoute: config.apiRoute ?? "/api",
       cacheRoute: config.cacheRoute ?? "/cache",
       useHttps: config.useHttps ?? false,
-      autoConnect: config.autoConnect ?? true
+      autoConnect: config.autoConnect ?? true,
+      overlayHealth: config.overlayHealth ?? true
     };
     const httpProtocol = this.config.useHttps ? "https" : "http";
     const apiBaseUrl = `${httpProtocol}://${this.config.host}:${this.config.port}${this.config.apiRoute}`;
@@ -1473,6 +1900,7 @@ var LeagueBroadcastClient = class {
    * promise rejects, but the other connection may still succeed.
    */
   async connect() {
+    this.startOverlayHealthIfEnabled();
     const protocol = this.config.useHttps ? "wss" : "ws";
     const base = `${protocol}://${this.config.host}:${this.config.port}`;
     const ingameUrl = `${base}${this.config.ingameWsRoute}`;
@@ -1499,6 +1927,28 @@ var LeagueBroadcastClient = class {
   disconnect() {
     this.ingameWs.disconnect();
     this.preGameWs.disconnect();
+    this._overlayHealth?.stop();
+    this._overlayHealth = null;
+  }
+  /**
+   * Starts passive frontend-health monitoring once, unless disabled via the
+   * `overlayHealth` config. Guarded so it never throws into the client.
+   */
+  startOverlayHealthIfEnabled() {
+    if (this._overlayHealth) return;
+    const setting = this.config.overlayHealth;
+    if (setting === false) return;
+    const opts = typeof setting === "object" ? setting : {};
+    if (opts.enabled === false) return;
+    try {
+      this._overlayHealth = startOverlayHealth({
+        source: { kind: "sdk", name: opts.name },
+        host: this.config.host,
+        port: this.config.port,
+        useHttps: this.config.useHttps
+      });
+    } catch {
+    }
   }
   /**
    * Whether the in-game WebSocket is connected.
@@ -1819,11 +2269,6 @@ var LeagueBroadcastClient = class {
         (event) => this.ingameEventHandlers.onKillFeedEvent.forEach((h) => h(event))
       );
     }
-    if (events.announcements) {
-      events.announcements.forEach(
-        (event) => this.ingameEventHandlers.onAnnouncementEvent.forEach((h) => h(event))
-      );
-    }
     if (events.smiteReaction !== void 0) {
       this.ingameEventHandlers.onSmiteReactionEvent.forEach(
         (h) => h(events.smiteReaction)