@jarve/bug-reporter 1.0.1 → 1.0.2

package/dist/index.d.mts

@@ -7,6 +7,15 @@ interface BugReporterUser {
     name: string;
     email: string;
 }
+type BugReporterClientContextValue = string | number | boolean | null | BugReporterClientContextValue[] | {
+    [key: string]: BugReporterClientContextValue;
+};
+type BugReporterClientContext = Record<string, BugReporterClientContextValue>;
+interface BugReporterAccount {
+    id?: string;
+    name?: string;
+    plan?: string;
+}
 interface ClickedElement {
     tagName: string;
     textContent: string | null;
@@ -38,6 +47,11 @@ interface CaptureMetadata {
      * derived from the secret API key.
      */
     siteId: string;
+    widgetVersion?: string;
+    appVersion?: string;
+    appEnvironment?: string;
+    release?: string;
+    clientContext?: BugReporterClientContext;
     screenshotCaptureFailed?: boolean;
     clickedElement?: ClickedElement;
 }
@@ -144,6 +158,18 @@ interface JarveBugReporterProps {
      * See Issue E11.
      */
     theme?: JarveTheme;
+    /** Optional host app version/release label to include in submitted reports. */
+    appVersion?: string;
+    /** Optional host environment label, e.g. "production", "preview", or "staging". */
+    environment?: string;
+    /** Optional deploy/release identifier, such as a git SHA or Vercel deployment URL. */
+    release?: string;
+    /** Optional account/tenant labels supplied by the host app. Values are redacted and size-capped. */
+    account?: BugReporterAccount;
+    /** Optional small tags supplied by the host app. Values are redacted and size-capped. */
+    tags?: string[];
+    /** Optional host debugging context. Values are redacted, depth-limited, and size-capped. */
+    context?: Record<string, unknown>;
     /**
      * Final chance to scrub the bug-report payload before it leaves the
      * browser. The hook receives the full `/submit` payload and must return
@@ -155,6 +181,6 @@ interface JarveBugReporterProps {
     onBeforeSubmit?: (payload: BugReportSubmitPayload) => BugReportSubmitPayload | null | false | Promise<BugReportSubmitPayload | null | false>;
     children: React.ReactNode;
 }
-declare function JarveBugReporter({ apiUrl, apiKey, siteId, user, buttonPosition, zIndexBase, captureResponseBodies, theme, onBeforeSubmit, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
+declare function JarveBugReporter({ apiUrl, apiKey, siteId, user, buttonPosition, zIndexBase, captureResponseBodies, theme, appVersion, environment, release, account, tags, context, onBeforeSubmit, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
 
-export { type BugReportSubmitPayload, type BugReporterApiConfig, type BugReporterUser, type FloatingButtonPosition, JarveBugReporter, type JarveBugReporterProps };
+export { type BugReportSubmitPayload, type BugReporterAccount, type BugReporterApiConfig, type BugReporterClientContext, type BugReporterUser, type FloatingButtonPosition, JarveBugReporter, type JarveBugReporterProps };

package/dist/index.d.ts

@@ -7,6 +7,15 @@ interface BugReporterUser {
     name: string;
     email: string;
 }
+type BugReporterClientContextValue = string | number | boolean | null | BugReporterClientContextValue[] | {
+    [key: string]: BugReporterClientContextValue;
+};
+type BugReporterClientContext = Record<string, BugReporterClientContextValue>;
+interface BugReporterAccount {
+    id?: string;
+    name?: string;
+    plan?: string;
+}
 interface ClickedElement {
     tagName: string;
     textContent: string | null;
@@ -38,6 +47,11 @@ interface CaptureMetadata {
      * derived from the secret API key.
      */
     siteId: string;
+    widgetVersion?: string;
+    appVersion?: string;
+    appEnvironment?: string;
+    release?: string;
+    clientContext?: BugReporterClientContext;
     screenshotCaptureFailed?: boolean;
     clickedElement?: ClickedElement;
 }
@@ -144,6 +158,18 @@ interface JarveBugReporterProps {
      * See Issue E11.
      */
     theme?: JarveTheme;
+    /** Optional host app version/release label to include in submitted reports. */
+    appVersion?: string;
+    /** Optional host environment label, e.g. "production", "preview", or "staging". */
+    environment?: string;
+    /** Optional deploy/release identifier, such as a git SHA or Vercel deployment URL. */
+    release?: string;
+    /** Optional account/tenant labels supplied by the host app. Values are redacted and size-capped. */
+    account?: BugReporterAccount;
+    /** Optional small tags supplied by the host app. Values are redacted and size-capped. */
+    tags?: string[];
+    /** Optional host debugging context. Values are redacted, depth-limited, and size-capped. */
+    context?: Record<string, unknown>;
     /**
      * Final chance to scrub the bug-report payload before it leaves the
      * browser. The hook receives the full `/submit` payload and must return
@@ -155,6 +181,6 @@ interface JarveBugReporterProps {
     onBeforeSubmit?: (payload: BugReportSubmitPayload) => BugReportSubmitPayload | null | false | Promise<BugReportSubmitPayload | null | false>;
     children: React.ReactNode;
 }
-declare function JarveBugReporter({ apiUrl, apiKey, siteId, user, buttonPosition, zIndexBase, captureResponseBodies, theme, onBeforeSubmit, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
+declare function JarveBugReporter({ apiUrl, apiKey, siteId, user, buttonPosition, zIndexBase, captureResponseBodies, theme, appVersion, environment, release, account, tags, context, onBeforeSubmit, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
 
-export { type BugReportSubmitPayload, type BugReporterApiConfig, type BugReporterUser, type FloatingButtonPosition, JarveBugReporter, type JarveBugReporterProps };
+export { type BugReportSubmitPayload, type BugReporterAccount, type BugReporterApiConfig, type BugReporterClientContext, type BugReporterUser, type FloatingButtonPosition, JarveBugReporter, type JarveBugReporterProps };

package/dist/index.js

@@ -256,7 +256,7 @@ function collectElementInfo(target, section, coords) {
     relativeClickY: coords.clientY - sectionRect.top
   };
 }
-function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement) {
+function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement, context) {
   const { browser, os } = parseUserAgent();
   const now = /* @__PURE__ */ new Date();
   return {
@@ -270,6 +270,11 @@ function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, cl
     timestamp: now.toISOString(),
     timestampUtc: now.toUTCString(),
     siteId,
+    widgetVersion: context == null ? void 0 : context.widgetVersion,
+    appVersion: context == null ? void 0 : context.appVersion,
+    appEnvironment: context == null ? void 0 : context.appEnvironment,
+    release: context == null ? void 0 : context.release,
+    clientContext: context == null ? void 0 : context.clientContext,
     reporterName,
     reporterEmail,
     clickedElement
@@ -571,6 +576,11 @@ function dataUrlToBlob(dataUrl) {
 function CaptureOverlay({
   isActive,
   siteId,
+  widgetVersion,
+  appVersion,
+  appEnvironment,
+  release,
+  clientContext,
   reporterName,
   reporterEmail,
   onCapture,
@@ -629,7 +639,14 @@ function CaptureOverlay({
           siteId,
           reporterName,
           reporterEmail,
-          elementInfo
+          elementInfo,
+          {
+            widgetVersion,
+            appVersion,
+            appEnvironment,
+            release,
+            clientContext
+          }
         );
         const consoleErrors = getCapturedErrors();
         const networkErrors = getCapturedNetworkErrors();
@@ -652,7 +669,14 @@ function CaptureOverlay({
             siteId,
             reporterName,
             reporterEmail,
-            elementInfo
+            elementInfo,
+            {
+              widgetVersion,
+              appVersion,
+              appEnvironment,
+              release,
+              clientContext
+            }
           );
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
@@ -664,7 +688,14 @@ function CaptureOverlay({
             siteId,
             reporterName,
             reporterEmail,
-            elementInfo
+            elementInfo,
+            {
+              widgetVersion,
+              appVersion,
+              appEnvironment,
+              release,
+              clientContext
+            }
           );
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
@@ -679,7 +710,17 @@ function CaptureOverlay({
         setIsCapturing(false);
       }
     },
-    [siteId, reporterName, reporterEmail, onCapture]
+    [
+      siteId,
+      reporterName,
+      reporterEmail,
+      onCapture,
+      widgetVersion,
+      appVersion,
+      appEnvironment,
+      release,
+      clientContext
+    ]
   );
   const handleMouseMove = (0, import_react2.useCallback)(
     (e) => {
@@ -1417,6 +1458,105 @@ function ReportModal({
 
 // src/bug-reporter.tsx
 var import_widget_shared6 = require("@jarve/widget-shared");
+
+// src/context.ts
+var MAX_TOP_LEVEL_KEYS = 24;
+var MAX_ARRAY_ITEMS = 20;
+var MAX_DEPTH = 3;
+var MAX_STRING_LENGTH = 500;
+var MAX_SERIALIZED_BYTES = 8 * 1024;
+var SENSITIVE_KEY = /(token|password|secret|api[_-]?key|authorization|cookie|session)/i;
+function trimString(value) {
+  return redactSensitive(value).slice(0, MAX_STRING_LENGTH);
+}
+function normalizeKey(key) {
+  const trimmed = key.trim().slice(0, 80);
+  if (!trimmed) return null;
+  return trimmed;
+}
+function normalizeValue(key, value, depth) {
+  if (value === void 0) return void 0;
+  if (value === null) return null;
+  if (SENSITIVE_KEY.test(key)) {
+    return "[REDACTED]";
+  }
+  if (typeof value === "string") return trimString(value);
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value === "boolean") return value;
+  if (Array.isArray(value)) {
+    if (depth >= MAX_DEPTH) return "[TRUNCATED]";
+    return value.slice(0, MAX_ARRAY_ITEMS).map((item, index) => normalizeValue(`${key}.${index}`, item, depth + 1)).filter((item) => item !== void 0);
+  }
+  if (typeof value === "object") {
+    if (depth >= MAX_DEPTH) return "[TRUNCATED]";
+    const output = {};
+    for (const [childKey, childValue] of Object.entries(value).slice(
+      0,
+      MAX_TOP_LEVEL_KEYS
+    )) {
+      const normalizedKey = normalizeKey(childKey);
+      if (!normalizedKey) continue;
+      const normalizedValue = normalizeValue(normalizedKey, childValue, depth + 1);
+      if (normalizedValue !== void 0) {
+        output[normalizedKey] = normalizedValue;
+      }
+    }
+    return output;
+  }
+  return trimString(String(value));
+}
+function serializedBytes(value) {
+  try {
+    return new TextEncoder().encode(JSON.stringify(value)).length;
+  } catch (e) {
+    return MAX_SERIALIZED_BYTES + 1;
+  }
+}
+function trimToBudget(value) {
+  const output = {};
+  for (const [key, entry] of Object.entries(value)) {
+    output[key] = entry;
+    if (serializedBytes(output) > MAX_SERIALIZED_BYTES) {
+      delete output[key];
+      output._truncated = true;
+      break;
+    }
+  }
+  return output;
+}
+function normalizeClientContext({
+  account,
+  tags,
+  context
+}) {
+  const output = {};
+  if (account) {
+    const normalizedAccount = normalizeValue("account", account, 0);
+    if (normalizedAccount !== void 0) {
+      output.account = normalizedAccount;
+    }
+  }
+  if (tags && tags.length > 0) {
+    output.tags = tags.slice(0, MAX_ARRAY_ITEMS).map((tag) => trimString(tag));
+  }
+  if (context) {
+    for (const [key, value] of Object.entries(context).slice(0, MAX_TOP_LEVEL_KEYS)) {
+      const normalizedKey = normalizeKey(key);
+      if (!normalizedKey) continue;
+      const normalizedValue = normalizeValue(normalizedKey, value, 0);
+      if (normalizedValue !== void 0) {
+        output[normalizedKey] = normalizedValue;
+      }
+    }
+  }
+  if (Object.keys(output).length === 0) return void 0;
+  return trimToBudget(output);
+}
+
+// src/version.ts
+var BUG_REPORTER_WIDGET_VERSION = "1.0.2";
+
+// src/bug-reporter.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function isValidApiUrl(raw) {
   if (typeof raw !== "string" || raw.length === 0) return false;
@@ -1438,11 +1578,21 @@ function JarveBugReporter({
   zIndexBase,
   captureResponseBodies = false,
   theme,
+  appVersion,
+  environment,
+  release,
+  account,
+  tags,
+  context,
   onBeforeSubmit,
   children
 }) {
   const mounted = (0, import_widget_shared6.useHasMounted)();
   const apiUrlValid = (0, import_react4.useMemo)(() => isValidApiUrl(apiUrl), [apiUrl]);
+  const clientContext = (0, import_react4.useMemo)(
+    () => normalizeClientContext({ account, tags, context }),
+    [account, tags, context]
+  );
   (0, import_react4.useEffect)(() => {
     if (!apiUrlValid) {
       console.error(
@@ -1463,6 +1613,31 @@ function JarveBugReporter({
       stopNetworkCapture();
     };
   }, [apiUrlValid, isPrimary, captureResponseBodies]);
+  (0, import_react4.useEffect)(() => {
+    if (!apiUrlValid || !isPrimary) return;
+    const controller = new AbortController();
+    const timeout = window.setTimeout(() => controller.abort(), 8e3);
+    void fetch(`${apiUrl.replace(/\/+$/, "")}/heartbeat`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Bug-Reporter-Key": apiKey.trim()
+      },
+      body: JSON.stringify({
+        siteId,
+        widgetVersion: BUG_REPORTER_WIDGET_VERSION,
+        appVersion,
+        environment,
+        release
+      }),
+      signal: controller.signal
+    }).catch(() => {
+    });
+    return () => {
+      window.clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [apiUrl, apiKey, apiUrlValid, appVersion, environment, isPrimary, release, siteId]);
   const toggleCaptureMode = (0, import_react4.useCallback)(() => {
     setCaptureMode((prev) => !prev);
   }, []);
@@ -1549,6 +1724,11 @@ function JarveBugReporter({
         {
           isActive: captureMode,
           siteId,
+          widgetVersion: BUG_REPORTER_WIDGET_VERSION,
+          appVersion,
+          appEnvironment: environment,
+          release,
+          clientContext,
           reporterName,
           reporterEmail,
           onCapture: handleCapture,

package/dist/index.mjs

@@ -224,7 +224,7 @@ function collectElementInfo(target, section, coords) {
     relativeClickY: coords.clientY - sectionRect.top
   };
 }
-function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement) {
+function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement, context) {
   const { browser, os } = parseUserAgent();
   const now = /* @__PURE__ */ new Date();
   return {
@@ -238,6 +238,11 @@ function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, cl
     timestamp: now.toISOString(),
     timestampUtc: now.toUTCString(),
     siteId,
+    widgetVersion: context == null ? void 0 : context.widgetVersion,
+    appVersion: context == null ? void 0 : context.appVersion,
+    appEnvironment: context == null ? void 0 : context.appEnvironment,
+    release: context == null ? void 0 : context.release,
+    clientContext: context == null ? void 0 : context.clientContext,
     reporterName,
     reporterEmail,
     clickedElement
@@ -539,6 +544,11 @@ function dataUrlToBlob(dataUrl) {
 function CaptureOverlay({
   isActive,
   siteId,
+  widgetVersion,
+  appVersion,
+  appEnvironment,
+  release,
+  clientContext,
   reporterName,
   reporterEmail,
   onCapture,
@@ -597,7 +607,14 @@ function CaptureOverlay({
           siteId,
           reporterName,
           reporterEmail,
-          elementInfo
+          elementInfo,
+          {
+            widgetVersion,
+            appVersion,
+            appEnvironment,
+            release,
+            clientContext
+          }
         );
         const consoleErrors = getCapturedErrors();
         const networkErrors = getCapturedNetworkErrors();
@@ -620,7 +637,14 @@ function CaptureOverlay({
             siteId,
             reporterName,
             reporterEmail,
-            elementInfo
+            elementInfo,
+            {
+              widgetVersion,
+              appVersion,
+              appEnvironment,
+              release,
+              clientContext
+            }
           );
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
@@ -632,7 +656,14 @@ function CaptureOverlay({
             siteId,
             reporterName,
             reporterEmail,
-            elementInfo
+            elementInfo,
+            {
+              widgetVersion,
+              appVersion,
+              appEnvironment,
+              release,
+              clientContext
+            }
           );
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
@@ -647,7 +678,17 @@ function CaptureOverlay({
         setIsCapturing(false);
       }
     },
-    [siteId, reporterName, reporterEmail, onCapture]
+    [
+      siteId,
+      reporterName,
+      reporterEmail,
+      onCapture,
+      widgetVersion,
+      appVersion,
+      appEnvironment,
+      release,
+      clientContext
+    ]
   );
   const handleMouseMove = useCallback(
     (e) => {
@@ -1392,6 +1433,105 @@ function ReportModal({
 
 // src/bug-reporter.tsx
 import { emit, useHasMounted } from "@jarve/widget-shared";
+
+// src/context.ts
+var MAX_TOP_LEVEL_KEYS = 24;
+var MAX_ARRAY_ITEMS = 20;
+var MAX_DEPTH = 3;
+var MAX_STRING_LENGTH = 500;
+var MAX_SERIALIZED_BYTES = 8 * 1024;
+var SENSITIVE_KEY = /(token|password|secret|api[_-]?key|authorization|cookie|session)/i;
+function trimString(value) {
+  return redactSensitive(value).slice(0, MAX_STRING_LENGTH);
+}
+function normalizeKey(key) {
+  const trimmed = key.trim().slice(0, 80);
+  if (!trimmed) return null;
+  return trimmed;
+}
+function normalizeValue(key, value, depth) {
+  if (value === void 0) return void 0;
+  if (value === null) return null;
+  if (SENSITIVE_KEY.test(key)) {
+    return "[REDACTED]";
+  }
+  if (typeof value === "string") return trimString(value);
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value === "boolean") return value;
+  if (Array.isArray(value)) {
+    if (depth >= MAX_DEPTH) return "[TRUNCATED]";
+    return value.slice(0, MAX_ARRAY_ITEMS).map((item, index) => normalizeValue(`${key}.${index}`, item, depth + 1)).filter((item) => item !== void 0);
+  }
+  if (typeof value === "object") {
+    if (depth >= MAX_DEPTH) return "[TRUNCATED]";
+    const output = {};
+    for (const [childKey, childValue] of Object.entries(value).slice(
+      0,
+      MAX_TOP_LEVEL_KEYS
+    )) {
+      const normalizedKey = normalizeKey(childKey);
+      if (!normalizedKey) continue;
+      const normalizedValue = normalizeValue(normalizedKey, childValue, depth + 1);
+      if (normalizedValue !== void 0) {
+        output[normalizedKey] = normalizedValue;
+      }
+    }
+    return output;
+  }
+  return trimString(String(value));
+}
+function serializedBytes(value) {
+  try {
+    return new TextEncoder().encode(JSON.stringify(value)).length;
+  } catch (e) {
+    return MAX_SERIALIZED_BYTES + 1;
+  }
+}
+function trimToBudget(value) {
+  const output = {};
+  for (const [key, entry] of Object.entries(value)) {
+    output[key] = entry;
+    if (serializedBytes(output) > MAX_SERIALIZED_BYTES) {
+      delete output[key];
+      output._truncated = true;
+      break;
+    }
+  }
+  return output;
+}
+function normalizeClientContext({
+  account,
+  tags,
+  context
+}) {
+  const output = {};
+  if (account) {
+    const normalizedAccount = normalizeValue("account", account, 0);
+    if (normalizedAccount !== void 0) {
+      output.account = normalizedAccount;
+    }
+  }
+  if (tags && tags.length > 0) {
+    output.tags = tags.slice(0, MAX_ARRAY_ITEMS).map((tag) => trimString(tag));
+  }
+  if (context) {
+    for (const [key, value] of Object.entries(context).slice(0, MAX_TOP_LEVEL_KEYS)) {
+      const normalizedKey = normalizeKey(key);
+      if (!normalizedKey) continue;
+      const normalizedValue = normalizeValue(normalizedKey, value, 0);
+      if (normalizedValue !== void 0) {
+        output[normalizedKey] = normalizedValue;
+      }
+    }
+  }
+  if (Object.keys(output).length === 0) return void 0;
+  return trimToBudget(output);
+}
+
+// src/version.ts
+var BUG_REPORTER_WIDGET_VERSION = "1.0.2";
+
+// src/bug-reporter.tsx
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function isValidApiUrl(raw) {
   if (typeof raw !== "string" || raw.length === 0) return false;
@@ -1413,11 +1553,21 @@ function JarveBugReporter({
   zIndexBase,
   captureResponseBodies = false,
   theme,
+  appVersion,
+  environment,
+  release,
+  account,
+  tags,
+  context,
   onBeforeSubmit,
   children
 }) {
   const mounted = useHasMounted();
   const apiUrlValid = useMemo2(() => isValidApiUrl(apiUrl), [apiUrl]);
+  const clientContext = useMemo2(
+    () => normalizeClientContext({ account, tags, context }),
+    [account, tags, context]
+  );
   useEffect4(() => {
     if (!apiUrlValid) {
       console.error(
@@ -1438,6 +1588,31 @@ function JarveBugReporter({
       stopNetworkCapture();
     };
   }, [apiUrlValid, isPrimary, captureResponseBodies]);
+  useEffect4(() => {
+    if (!apiUrlValid || !isPrimary) return;
+    const controller = new AbortController();
+    const timeout = window.setTimeout(() => controller.abort(), 8e3);
+    void fetch(`${apiUrl.replace(/\/+$/, "")}/heartbeat`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Bug-Reporter-Key": apiKey.trim()
+      },
+      body: JSON.stringify({
+        siteId,
+        widgetVersion: BUG_REPORTER_WIDGET_VERSION,
+        appVersion,
+        environment,
+        release
+      }),
+      signal: controller.signal
+    }).catch(() => {
+    });
+    return () => {
+      window.clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [apiUrl, apiKey, apiUrlValid, appVersion, environment, isPrimary, release, siteId]);
   const toggleCaptureMode = useCallback3(() => {
     setCaptureMode((prev) => !prev);
   }, []);
@@ -1524,6 +1699,11 @@ function JarveBugReporter({
         {
           isActive: captureMode,
           siteId,
+          widgetVersion: BUG_REPORTER_WIDGET_VERSION,
+          appVersion,
+          appEnvironment: environment,
+          release,
+          clientContext,
           reporterName,
           reporterEmail,
           onCapture: handleCapture,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jarve/bug-reporter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Bug reporter widget for Next.js apps. Reports flow to JARVE Agency dashboard.",
   "sideEffects": false,
   "main": "./dist/index.js",