quick-bug-reporter-react 1.3.2 → 1.4.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
+import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, NetworkLogEntry, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
 export { BugClientMetadata, BugReportPayload, BugReporterIntegration, BugReporterIntegrations, BugSessionArtifacts, BugSubmitResult, BugTrackerProvider, CapturedJsError, CloudIntegration, CloudIntegrationOptions, ConsoleCapture, ConsoleLogEntry, DEFAULT_MAX_RECORDING_MS, JiraIntegration, JiraIntegrationOptions, LinearIntegration, LinearIntegrationOptions, NetworkLogEntry, NetworkLogger, RecordingStopReason, ReportCaptureMode, ScreenshotHighlightRegion, SubmitProgressCallback, formatConsoleLogs, formatJsErrors, formatNetworkLogs, toErrorMessage } from '@quick-bug-reporter/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
@@ -62,6 +62,7 @@ declare class BugSession {
     private autoStopTimeout;
     private stopInFlight;
     private lastArtifacts;
+    private screenshotLogsPendingSubmit;
     constructor(options?: BugSessionOptions);
     start(): Promise<void>;
     captureScreenshot(region?: CaptureRegion): Promise<BugSessionArtifacts>;
@@ -71,6 +72,7 @@ declare class BugSession {
     getMaxDurationMs(): number;
     getLastArtifacts(): BugSessionArtifacts | null;
     getLastCaptureMode(): ReportCaptureMode | null;
+    finalizeNetworkLogsForSubmit(captureMode: ReportCaptureMode): NetworkLogEntry[];
     resetArtifacts(): void;
     dispose(): Promise<void>;
     private stopInternal;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
+import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, NetworkLogEntry, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
 export { BugClientMetadata, BugReportPayload, BugReporterIntegration, BugReporterIntegrations, BugSessionArtifacts, BugSubmitResult, BugTrackerProvider, CapturedJsError, CloudIntegration, CloudIntegrationOptions, ConsoleCapture, ConsoleLogEntry, DEFAULT_MAX_RECORDING_MS, JiraIntegration, JiraIntegrationOptions, LinearIntegration, LinearIntegrationOptions, NetworkLogEntry, NetworkLogger, RecordingStopReason, ReportCaptureMode, ScreenshotHighlightRegion, SubmitProgressCallback, formatConsoleLogs, formatJsErrors, formatNetworkLogs, toErrorMessage } from '@quick-bug-reporter/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
@@ -62,6 +62,7 @@ declare class BugSession {
     private autoStopTimeout;
     private stopInFlight;
     private lastArtifacts;
+    private screenshotLogsPendingSubmit;
     constructor(options?: BugSessionOptions);
     start(): Promise<void>;
     captureScreenshot(region?: CaptureRegion): Promise<BugSessionArtifacts>;
@@ -71,6 +72,7 @@ declare class BugSession {
     getMaxDurationMs(): number;
     getLastArtifacts(): BugSessionArtifacts | null;
     getLastCaptureMode(): ReportCaptureMode | null;
+    finalizeNetworkLogsForSubmit(captureMode: ReportCaptureMode): NetworkLogEntry[];
     resetArtifacts(): void;
     dispose(): Promise<void>;
     private stopInternal;

package/dist/index.js

@@ -876,42 +876,100 @@ var CloudIntegration = class {
       throw new Error("CloudIntegration: projectKey is required.");
     }
     this.projectKey = options.projectKey;
-    this.endpoint = options.endpoint ?? "/api/ingest";
+    this.endpoint = options.ingestUrl ?? options.endpoint ?? "/api/ingest";
+    this.appVersion = options.appVersion;
+    this.environment = options.environment;
     this.fetchFn = options.fetchImpl ?? fetch.bind(globalThis);
   }
   async submit(payload, onProgress = noop3) {
     onProgress("Preparing report\u2026");
-    const ua = payload.userAgent || navigator.userAgent;
+    const ua = payload.userAgent || getRuntimeUserAgent();
     const browserName = parseBrowserName(ua);
+    const browserVersion = parseBrowserVersion(ua);
     const osName = parseOsName(ua);
-    const body = {
-      project_key: this.projectKey,
-      title: payload.title,
-      provider: "cloud",
-      capture_mode: payload.captureMode,
-      has_screenshot: Boolean(payload.screenshotBlob),
-      has_video: Boolean(payload.videoBlob),
-      has_network_logs: payload.networkLogs.length > 0,
-      has_console_logs: payload.consoleLogs.length > 0,
-      js_error_count: payload.jsErrors.length,
-      user_agent: ua,
-      browser_name: browserName,
-      os_name: osName,
-      device_type: getDeviceType(),
-      screen_resolution: getScreenResolution(),
-      viewport: getViewport(),
-      color_scheme: payload.metadata.colorScheme !== "unknown" ? payload.metadata.colorScheme : null,
-      locale: payload.metadata.locale,
-      timezone: payload.metadata.timezone,
-      connection_type: payload.metadata.connection?.effectiveType ?? null,
-      page_url: payload.pageUrl,
-      environment: getEnvironment()
-    };
+    const osVersion = parseOsVersion(ua, osName);
+    const fd = new FormData();
+    fd.set("project_key", this.projectKey);
+    fd.set("title", payload.title);
+    fd.set("description", payload.description || "");
+    fd.set("provider", "cloud");
+    fd.set("capture_mode", payload.captureMode);
+    fd.set("has_screenshot", String(Boolean(payload.screenshotBlob)));
+    fd.set("has_video", String(Boolean(payload.videoBlob)));
+    fd.set("has_network_logs", String(payload.networkLogs.length > 0));
+    fd.set("has_console_logs", String(payload.consoleLogs.length > 0));
+    fd.set("js_error_count", String(payload.jsErrors.length));
+    fd.set("user_agent", ua);
+    fd.set("browser_name", browserName);
+    fd.set("browser_version", browserVersion ?? "");
+    fd.set("os_name", osName);
+    fd.set("os_version", osVersion ?? "");
+    fd.set("device_type", getDeviceType());
+    fd.set("screen_resolution", getScreenResolution());
+    fd.set("viewport", getViewport());
+    fd.set("color_scheme", payload.metadata.colorScheme !== "unknown" ? payload.metadata.colorScheme : "");
+    fd.set("locale", payload.metadata.locale ?? "");
+    fd.set("timezone", payload.metadata.timezone ?? "");
+    fd.set("connection_type", payload.metadata.connection?.effectiveType ?? "");
+    fd.set("page_url", payload.pageUrl || "");
+    fd.set("environment", this.environment ?? getEnvironment());
+    fd.set("app_version", this.appVersion ?? "");
+    fd.set("platform", payload.metadata.platform ?? "");
+    fd.set("duration_ms", String(payload.elapsedMs));
+    fd.set("stopped_at", payload.stoppedAt || "");
+    if (payload.metadata.mobile) {
+      fd.set("platform", payload.metadata.mobile.platform);
+      fd.set("device_model", payload.metadata.mobile.deviceModel ?? "");
+      fd.set("device_brand", payload.metadata.mobile.deviceBrand ?? "");
+      fd.set("os_version", payload.metadata.mobile.osVersion ?? "");
+      fd.set("app_build_number", payload.metadata.mobile.appBuildNumber ?? "");
+      fd.set("is_emulator", String(payload.metadata.mobile.isEmulator));
+      fd.set(
+        "battery_level",
+        payload.metadata.mobile.batteryLevel == null ? "" : String(payload.metadata.mobile.batteryLevel)
+      );
+      fd.set(
+        "free_storage_mb",
+        payload.metadata.mobile.freeStorageMb == null ? "" : String(payload.metadata.mobile.freeStorageMb)
+      );
+      fd.set("invocation_method", payload.metadata.mobile.invocationMethod);
+    }
+    if (payload.screenshotBlob) {
+      fd.append("screenshot", payload.screenshotBlob, "bug-screenshot.png");
+    }
+    if (payload.videoBlob) {
+      fd.append("video", payload.videoBlob, "bug-recording.webm");
+    }
+    fd.append(
+      "network_logs",
+      new Blob([formatNetworkLogs(payload.networkLogs)], { type: "text/plain" }),
+      "network-logs.txt"
+    );
+    const parts = [];
+    if (payload.jsErrors.length > 0) {
+      parts.push("=== JavaScript Errors ===\n" + formatJsErrors(payload.jsErrors));
+    } else {
+      parts.push("=== JavaScript Errors ===\nNo JavaScript errors captured.");
+    }
+    if (payload.consoleLogs.length > 0) {
+      parts.push("=== Console Output ===\n" + formatConsoleLogs(payload.consoleLogs));
+    } else {
+      parts.push("=== Console Output ===\nNo console output captured.");
+    }
+    fd.append(
+      "console_logs",
+      new Blob([parts.join("\n\n")], { type: "text/plain" }),
+      "console-logs.txt"
+    );
+    fd.append(
+      "metadata",
+      new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" }),
+      "client-metadata.json"
+    );
     onProgress("Sending report\u2026");
     const response = await this.fetchFn(this.endpoint, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body)
+      body: fd
     });
     if (!response.ok) {
       const errorBody = await response.json().catch(() => ({}));
@@ -920,12 +978,22 @@ var CloudIntegration = class {
     }
     const result = await response.json();
     onProgress("Report submitted.");
+    const fwd = result.forwarding;
+    const externalKey = fwd?.key;
+    const externalUrl = fwd?.url;
+    const warnings = [];
+    if (result.forwarding_status === "queued") {
+      warnings.push("Tracker forwarding is running in the background.");
+    }
+    if (fwd?.error) {
+      warnings.push(`Forwarding: ${fwd.error}`);
+    }
     return {
       provider: "cloud",
       issueId: result.id,
-      issueKey: `QB-${result.id.slice(0, 8)}`,
-      issueUrl: null,
-      warnings: []
+      issueKey: externalKey || `QB-${result.id.slice(0, 8)}`,
+      issueUrl: externalUrl || null,
+      warnings
     };
   }
 };
@@ -937,14 +1005,50 @@ function parseBrowserName(ua) {
   if (ua.includes("Safari/") && !ua.includes("Chrome/")) return "Safari";
   return "Unknown";
 }
+function parseBrowserVersion(ua) {
+  return matchVersion(ua, /Edg\/([\d.]+)/) || matchVersion(ua, /OPR\/([\d.]+)/) || matchVersion(ua, /Opera\/([\d.]+)/) || matchVersion(ua, /Chrome\/([\d.]+)/) || matchVersion(ua, /Firefox\/([\d.]+)/) || matchVersion(ua, /Version\/([\d.]+).*Safari/);
+}
+function getRuntimeUserAgent() {
+  if (typeof navigator !== "undefined" && typeof navigator.userAgent === "string") {
+    return navigator.userAgent;
+  }
+  return "";
+}
 function parseOsName(ua) {
   if (ua.includes("Windows")) return "Windows";
-  if (ua.includes("Mac OS")) return "macOS";
-  if (ua.includes("Linux")) return "Linux";
   if (ua.includes("Android")) return "Android";
   if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
+  if (ua.includes("Mac OS")) return "macOS";
+  if (ua.includes("Linux")) return "Linux";
   return "Unknown";
 }
+function parseOsVersion(ua, osName) {
+  if (osName === "Windows") {
+    const nt = matchVersion(ua, /Windows NT ([\d.]+)/);
+    if (!nt) return null;
+    if (nt.startsWith("10.0")) return "10/11";
+    if (nt.startsWith("6.3")) return "8.1";
+    if (nt.startsWith("6.2")) return "8";
+    if (nt.startsWith("6.1")) return "7";
+    return nt;
+  }
+  if (osName === "macOS") {
+    const mac = matchVersion(ua, /Mac OS X ([0-9_]+)/);
+    return mac ? mac.replace(/_/g, ".") : null;
+  }
+  if (osName === "Android") {
+    return matchVersion(ua, /Android ([\d.]+)/);
+  }
+  if (osName === "iOS") {
+    const ios = matchVersion(ua, /OS ([0-9_]+) like Mac OS X/);
+    return ios ? ios.replace(/_/g, ".") : null;
+  }
+  return null;
+}
+function matchVersion(ua, pattern) {
+  const match = ua.match(pattern);
+  return match?.[1] ?? null;
+}
 function getDeviceType() {
   if (typeof window === "undefined") return "unknown";
   const w = window.innerWidth;
@@ -1423,6 +1527,7 @@ var BugSession = class {
     this.autoStopTimeout = null;
     this.stopInFlight = null;
     this.lastArtifacts = null;
+    this.screenshotLogsPendingSubmit = false;
     this.maxDurationMs = options.maxDurationMs ?? DEFAULT_MAX_RECORDING_MS;
     this.screenRecorder = options.screenRecorder ?? new ScreenRecorder();
     this.screenshotCapturer = options.screenshotCapturer ?? new ScreenshotCapturer();
@@ -1433,9 +1538,13 @@ var BugSession = class {
     if (this.recording) {
       return;
     }
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.clearAutoStopTimer();
     this.networkLogger.clear();
     this.lastArtifacts = null;
+    this.screenshotLogsPendingSubmit = false;
     this.networkLogger.start();
     try {
       await this.screenRecorder.start({
@@ -1458,14 +1567,18 @@ var BugSession = class {
     if (this.recording) {
       await this.stop("manual");
     }
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.clearAutoStopTimer();
     this.networkLogger.clear();
     this.lastArtifacts = null;
+    this.screenshotLogsPendingSubmit = false;
     const startedAtMs = Date.now();
     this.networkLogger.start();
     try {
       const screenshotBlob = region ? await this.screenshotCapturer.captureRegion(region) : await this.screenshotCapturer.capture();
-      const networkLogs = this.networkLogger.stop();
+      const networkLogs = this.networkLogger.getLogs();
       const stoppedAtMs = Date.now();
       const artifacts = {
         videoBlob: null,
@@ -1478,10 +1591,12 @@ var BugSession = class {
         stopReason: "manual"
       };
       this.lastArtifacts = artifacts;
+      this.screenshotLogsPendingSubmit = true;
       return artifacts;
     } catch (error) {
       this.networkLogger.stop();
       this.networkLogger.clear();
+      this.screenshotLogsPendingSubmit = false;
       throw error;
     }
   }
@@ -1515,17 +1630,32 @@ var BugSession = class {
   getLastCaptureMode() {
     return this.lastArtifacts?.captureMode ?? null;
   }
+  finalizeNetworkLogsForSubmit(captureMode) {
+    if (captureMode === "screenshot" && this.screenshotLogsPendingSubmit && this.networkLogger.isRecording()) {
+      const logs = this.networkLogger.stop();
+      this.screenshotLogsPendingSubmit = false;
+      return logs;
+    }
+    return this.networkLogger.getLogs();
+  }
   resetArtifacts() {
     this.lastArtifacts = null;
     this.screenRecorder.clearLastBlob();
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.networkLogger.clear();
+    this.screenshotLogsPendingSubmit = false;
   }
   async dispose() {
     await this.stop("manual");
     this.clearAutoStopTimer();
     this.screenRecorder.dispose();
-    this.networkLogger.stop();
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.networkLogger.clear();
+    this.screenshotLogsPendingSubmit = false;
   }
   async stopInternal(reason) {
     this.clearAutoStopTimer();
@@ -1546,6 +1676,7 @@ var BugSession = class {
       stopReason: reason
     };
     this.lastArtifacts = artifacts;
+    this.screenshotLogsPendingSubmit = false;
     return artifacts;
   }
   async handleForcedStop(reason) {
@@ -1698,7 +1829,7 @@ var BugReporter = class {
       description: normalizedDescription,
       videoBlob: artifacts.videoBlob,
       screenshotBlob: options.screenshotBlob ?? artifacts.screenshotBlob,
-      networkLogs: artifacts.networkLogs,
+      networkLogs: this.session.finalizeNetworkLogsForSubmit(artifacts.captureMode),
       consoleLogs: options.consoleLogs ?? [],
       jsErrors: options.jsErrors ?? [],
       captureMode: artifacts.captureMode,
@@ -2268,7 +2399,11 @@ function BugReporterProvider({
           jsErrors,
           onProgress: setSubmissionProgress
         });
-        setSuccess(`Submitted to ${getProviderLabel(result.provider)} (${result.issueKey}).`);
+        if (result.provider === "cloud" && !result.issueUrl) {
+          setSuccess("Report received by QuickBugs Cloud. Tracker forwarding is running in the background.");
+        } else {
+          setSuccess(`Submitted to ${getProviderLabel(result.provider)} (${result.issueKey}).`);
+        }
         clearDraft();
         setIsOpen(false);
         return result;