quick-bug-reporter-react 1.0.5 → 1.1.1

package/dist/index.cjs

@@ -555,6 +555,31 @@ var ScreenshotCapturer = class {
 
 // src/core/types.ts
 var DEFAULT_MAX_RECORDING_MS = 2 * 60 * 1e3;
+function formatConsoleLogs(logs) {
+  if (logs.length === 0) {
+    return "No console output captured.";
+  }
+  return logs.map((entry) => {
+    const tag = entry.level.toUpperCase().padEnd(5);
+    const args = entry.args.join(" ");
+    return `[${entry.timestamp}] ${tag} ${args}`;
+  }).join("\n");
+}
+function formatJsErrors(errors) {
+  if (errors.length === 0) {
+    return "No JavaScript errors captured.";
+  }
+  return errors.map((entry) => {
+    const lines = [`[${entry.timestamp}] ${entry.type}: ${entry.message}`];
+    if (entry.source) {
+      lines.push(`  at ${entry.source}${entry.lineno ? `:${entry.lineno}` : ""}${entry.colno ? `:${entry.colno}` : ""}`);
+    }
+    if (entry.stack) {
+      lines.push(entry.stack.split("\n").map((l) => `  ${l}`).join("\n"));
+    }
+    return lines.join("\n");
+  }).join("\n\n");
+}
 function formatNetworkLogs(logs) {
   if (logs.length === 0) {
     return "No network requests captured.";
@@ -859,6 +884,8 @@ var BugReporter = class {
       videoBlob: artifacts.videoBlob,
       screenshotBlob: options.screenshotBlob ?? artifacts.screenshotBlob,
       networkLogs: artifacts.networkLogs,
+      consoleLogs: options.consoleLogs ?? [],
+      jsErrors: options.jsErrors ?? [],
       captureMode: artifacts.captureMode,
       pageUrl: typeof window !== "undefined" ? window.location.href : "",
       userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
@@ -898,6 +925,124 @@ var BugReporter = class {
   }
 };
 
+// src/core/ConsoleCapture.ts
+var MAX_CONSOLE_ENTRIES = 200;
+var MAX_ERROR_ENTRIES = 50;
+var MAX_ARG_LENGTH = 1e3;
+function serializeArg(arg) {
+  if (typeof arg === "string") {
+    return arg.length > MAX_ARG_LENGTH ? arg.slice(0, MAX_ARG_LENGTH) + "\u2026" : arg;
+  }
+  try {
+    const json = JSON.stringify(arg);
+    return json.length > MAX_ARG_LENGTH ? json.slice(0, MAX_ARG_LENGTH) + "\u2026" : json;
+  } catch {
+    return String(arg);
+  }
+}
+var ConsoleCapture = class {
+  constructor() {
+    this.consoleLogs = [];
+    this.errors = [];
+    this.originals = {};
+    this.errorHandler = null;
+    this.rejectionHandler = null;
+    this.active = false;
+  }
+  start() {
+    if (this.active || typeof window === "undefined") {
+      return;
+    }
+    this.active = true;
+    this.consoleLogs = [];
+    this.errors = [];
+    const levels = ["log", "info", "warn", "error"];
+    for (const level of levels) {
+      const original = console[level];
+      this.originals[level] = original;
+      const capture = this;
+      console[level] = (...args) => {
+        try {
+          capture.consoleLogs.push({
+            level,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            args: args.map(serializeArg)
+          });
+          if (capture.consoleLogs.length > MAX_CONSOLE_ENTRIES) {
+            capture.consoleLogs.shift();
+          }
+        } catch {
+        }
+        original.apply(console, args);
+      };
+    }
+    this.errorHandler = (event) => {
+      try {
+        this.errors.push({
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          message: event.message || "Unknown error",
+          source: event.filename || void 0,
+          lineno: event.lineno || void 0,
+          colno: event.colno || void 0,
+          stack: event.error?.stack || void 0,
+          type: "error"
+        });
+        if (this.errors.length > MAX_ERROR_ENTRIES) {
+          this.errors.shift();
+        }
+      } catch {
+      }
+    };
+    window.addEventListener("error", this.errorHandler);
+    this.rejectionHandler = (event) => {
+      try {
+        const reason = event.reason;
+        this.errors.push({
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          message: reason instanceof Error ? reason.message : String(reason),
+          stack: reason instanceof Error ? reason.stack || void 0 : void 0,
+          type: "unhandledrejection"
+        });
+        if (this.errors.length > MAX_ERROR_ENTRIES) {
+          this.errors.shift();
+        }
+      } catch {
+      }
+    };
+    window.addEventListener("unhandledrejection", this.rejectionHandler);
+  }
+  snapshot() {
+    return {
+      consoleLogs: [...this.consoleLogs],
+      jsErrors: [...this.errors]
+    };
+  }
+  stop() {
+    if (!this.active) {
+      return;
+    }
+    for (const [level, original] of Object.entries(this.originals)) {
+      if (original) {
+        console[level] = original;
+      }
+    }
+    this.originals = {};
+    if (this.errorHandler) {
+      window.removeEventListener("error", this.errorHandler);
+      this.errorHandler = null;
+    }
+    if (this.rejectionHandler) {
+      window.removeEventListener("unhandledrejection", this.rejectionHandler);
+      this.rejectionHandler = null;
+    }
+    this.active = false;
+  }
+  clear() {
+    this.consoleLogs = [];
+    this.errors = [];
+  }
+};
+
 // src/integrations/linear.ts
 var DEFAULT_GRAPHQL_ENDPOINT = "https://api.linear.app/graphql";
 var noop = () => {
@@ -979,12 +1124,22 @@ var LinearIntegration = class {
     const description = buildCleanDescription(payload, { screenshotUrl, recordingUrl });
     const issue = await this.createIssue(payload.title, description);
     progress("Attaching logs\u2026");
+    const comments = [];
     const logsComment = "### Network Logs\n```text\n" + formatNetworkLogs(payload.networkLogs) + "\n```";
+    comments.push(this.addComment(issue.id, logsComment));
+    if (payload.jsErrors.length > 0 || payload.consoleLogs.length > 0) {
+      const parts = [];
+      if (payload.jsErrors.length > 0) {
+        parts.push("### JavaScript Errors\n```text\n" + formatJsErrors(payload.jsErrors) + "\n```");
+      }
+      if (payload.consoleLogs.length > 0) {
+        parts.push("### Console Output\n```text\n" + formatConsoleLogs(payload.consoleLogs) + "\n```");
+      }
+      comments.push(this.addComment(issue.id, parts.join("\n\n")));
+    }
     const metadataComment = "### Client Metadata\n```json\n" + JSON.stringify(payload.metadata, null, 2) + "\n```";
-    await Promise.all([
-      this.addComment(issue.id, logsComment),
-      this.addComment(issue.id, metadataComment)
-    ]);
+    comments.push(this.addComment(issue.id, metadataComment));
+    await Promise.all(comments);
     progress("Done!");
     return {
       provider: this.provider,
@@ -1317,6 +1472,17 @@ var JiraIntegration = class {
     }
     const logsBlob = new Blob([formatNetworkLogs(payload.networkLogs)], { type: "text/plain" });
     uploads.push(this.uploadAttachment(issue.key, logsBlob, "network-logs.txt", "text/plain"));
+    if (payload.consoleLogs.length > 0 || payload.jsErrors.length > 0) {
+      const consoleParts = [];
+      if (payload.jsErrors.length > 0) {
+        consoleParts.push("=== JavaScript Errors ===\n" + formatJsErrors(payload.jsErrors));
+      }
+      if (payload.consoleLogs.length > 0) {
+        consoleParts.push("=== Console Output ===\n" + formatConsoleLogs(payload.consoleLogs));
+      }
+      const consoleBlob = new Blob([consoleParts.join("\n\n")], { type: "text/plain" });
+      uploads.push(this.uploadAttachment(issue.key, consoleBlob, "console-logs.txt", "text/plain"));
+    }
     const metadataBlob = new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" });
     uploads.push(this.uploadAttachment(issue.key, metadataBlob, "client-metadata.json", "application/json"));
     await Promise.all(uploads);
@@ -1617,6 +1783,16 @@ function BugReporterProvider({
     imageHeight: 0
   });
   const reporterRef = react.useRef(null);
+  const consoleCaptureRef = react.useRef(null);
+  react.useEffect(() => {
+    const capture = new ConsoleCapture();
+    capture.start();
+    consoleCaptureRef.current = capture;
+    return () => {
+      capture.stop();
+      consoleCaptureRef.current = null;
+    };
+  }, []);
   const availableProviders = react.useMemo(() => {
     return ["linear", "jira"].filter((provider) => Boolean(integrations[provider]));
   }, [integrations]);
@@ -1740,6 +1916,18 @@ function BugReporterProvider({
       window.clearInterval(interval);
     };
   }, [isRecording]);
+  react.useEffect(() => {
+    if (!isRecording) {
+      return;
+    }
+    const onBeforeUnload = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+    };
+  }, [isRecording]);
   react.useEffect(() => {
     return () => {
       setScreenshotPreviewUrl((current) => {
@@ -1963,10 +2151,16 @@ function BugReporterProvider({
           highlights: screenshotAnnotation.highlights
         } : void 0
       };
+      const { consoleLogs, jsErrors } = consoleCaptureRef.current?.snapshot() ?? {
+        consoleLogs: [],
+        jsErrors: []
+      };
       try {
         const result = await reporter.submit(title, description, {
           screenshotBlob: screenshotBlobForSubmit,
           metadata,
+          consoleLogs,
+          jsErrors,
           onProgress: setSubmissionProgress
         });
         setSuccess(`Submitted to ${getProviderLabel(result.provider)} (${result.issueKey}).`);
@@ -2189,7 +2383,8 @@ function FloatingBugButton() {
     "div",
     {
       ref: containerRef,
-      className: "fixed bottom-4 right-4 z-[1100] flex flex-col items-end",
+      style: { position: "fixed", bottom: "1rem", right: "1rem", zIndex: 1100 },
+      className: "flex flex-col items-end",
       "data-bug-reporter-ui": "true",
       children: isRecording ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "h-11 gap-2 rounded-full px-4 shadow-lg shadow-black/20", type: "button", variant: "destructive", onClick: () => void handleStopRecording(), children: [
@@ -2312,6 +2507,7 @@ function DialogOverlay({
     radixUi.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
+      "data-bug-reporter-ui": "true",
       className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/60 duration-100 supports-backdrop-filter:backdrop-blur-sm fixed inset-0 isolate z-50", className),
       ...props
     }
@@ -2329,8 +2525,16 @@ function DialogContent({
       radixUi.Dialog.Content,
       {
         "data-slot": "dialog-content",
+        "data-bug-reporter-ui": "true",
+        style: {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          translate: "none"
+        },
         className: cn(
-          "bg-white text-gray-900 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-gray-900/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 shadow-xl duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          "bg-white text-gray-900 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-gray-900/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 shadow-xl duration-100 sm:max-w-md z-50 w-full outline-none",
           className
         ),
         ...props,
@@ -3030,6 +3234,7 @@ exports.BugReporter = BugReporter;
 exports.BugReporterModal = BugReporterModal;
 exports.BugReporterProvider = BugReporterProvider;
 exports.BugSession = BugSession;
+exports.ConsoleCapture = ConsoleCapture;
 exports.DEFAULT_MAX_RECORDING_MS = DEFAULT_MAX_RECORDING_MS;
 exports.FloatingBugButton = FloatingBugButton;
 exports.JiraIntegration = JiraIntegration;
@@ -3038,6 +3243,8 @@ exports.NetworkLogger = NetworkLogger;
 exports.ScreenRecorder = ScreenRecorder;
 exports.ScreenshotCapturer = ScreenshotCapturer;
 exports.collectClientEnvironmentMetadata = collectClientEnvironmentMetadata;
+exports.formatConsoleLogs = formatConsoleLogs;
+exports.formatJsErrors = formatJsErrors;
 exports.formatNetworkLogs = formatNetworkLogs;
 exports.toErrorMessage = toErrorMessage;
 exports.useBugReporter = useBugReporter;