npm - @jarve/bug-reporter - Versions diffs - 0.1.0 → 0.1.1 - Mend

@jarve/bug-reporter 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -54,7 +54,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html>
       <body>
         <JarveBugReporter
-          apiUrl="https://jarve.com.au/api/bug-reporter/external"
+          apiUrl="https://www.jarve.com.au/api/bug-reporter/external"
           apiKey="brk_your_api_key_here"
           user={{ name: 'James', email: 'james@example.com' }}
         >

package/dist/index.d.mts CHANGED Viewed

@@ -10,7 +10,7 @@ interface BugReporterApiConfig {
 }
 interface JarveBugReporterProps {
-    /** Base URL for the external bug reporter API (e.g. "https://jarve.com.au/api/bug-reporter/external") */
+    /** Base URL for the external bug reporter API (e.g. "https://www.jarve.com.au/api/bug-reporter/external") */
     apiUrl: string;
     /** API key for your site (starts with "brk_") */
     apiKey: string;

package/dist/index.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ interface BugReporterApiConfig {
 }
 interface JarveBugReporterProps {
-    /** Base URL for the external bug reporter API (e.g. "https://jarve.com.au/api/bug-reporter/external") */
+    /** Base URL for the external bug reporter API (e.g. "https://www.jarve.com.au/api/bug-reporter/external") */
     apiUrl: string;
     /** API key for your site (starts with "brk_") */
     apiKey: string;

package/dist/index.js CHANGED Viewed

@@ -265,14 +265,51 @@ function clearCapturedErrors() {
 // src/network-capture.ts
 var MAX_REQUESTS = 30;
+var MAX_BODY_READ_BYTES = 64 * 1024;
+var TRUNCATE_LEN = 500;
 var capturedRequests = [];
 var isCapturing2 = false;
 var originalFetch = null;
-function truncateBody(body, maxLen = 500) {
+function truncateBody(body, maxLen = TRUNCATE_LEN) {
   if (!body) return null;
   if (body.length <= maxLen) return body;
   return body.slice(0, maxLen) + "...(truncated)";
 }
+async function readBoundedBody(response) {
+  try {
+    const contentLength = response.headers.get("Content-Length");
+    if (contentLength) {
+      const size = parseInt(contentLength, 10);
+      if (!isNaN(size) && size > MAX_BODY_READ_BYTES) {
+        return `[body too large: ${size} bytes]`;
+      }
+    }
+    const cloned = response.clone();
+    if (cloned.body && typeof cloned.body.getReader === "function") {
+      const reader = cloned.body.getReader();
+      const chunks = [];
+      let totalBytes = 0;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        totalBytes += value.byteLength;
+        if (totalBytes > MAX_BODY_READ_BYTES) {
+          reader.cancel().catch(() => {
+          });
+          return `[body too large: >${MAX_BODY_READ_BYTES} bytes]`;
+        }
+        chunks.push(value);
+      }
+      const decoder = new TextDecoder();
+      const text2 = chunks.map((c) => decoder.decode(c, { stream: true })).join("");
+      return truncateBody(text2);
+    }
+    const text = await cloned.text();
+    return truncateBody(text);
+  } catch (e) {
+    return null;
+  }
+}
 function startNetworkCapture() {
   if (isCapturing2 || typeof window === "undefined") return;
   if (window.fetch.__bugReporterPatched) return;
@@ -288,13 +325,7 @@ function startNetworkCapture() {
     try {
       const response = await originalFetch.call(window, input, init);
       if (response.status >= 400) {
-        let responseBody = null;
-        try {
-          const cloned = response.clone();
-          const text = await cloned.text();
-          responseBody = truncateBody(text);
-        } catch (e) {
-        }
+        const responseBody = await readBoundedBody(response);
         capturedRequests.push({
           url,
           method: method.toUpperCase(),
@@ -385,7 +416,7 @@ function CaptureOverlay({
   );
   const handleClick = (0, import_react.useCallback)(
     async (e) => {
-      var _a;
+      var _a, _b;
       if (!isActive || isCapturing3) return;
       const target = e.target;
       if (!(target instanceof HTMLElement)) return;
@@ -426,22 +457,48 @@ function CaptureOverlay({
         const networkErrors = getCapturedNetworkErrors();
         onCapture({ screenshot: blob, metadata, consoleErrors, networkErrors });
       } catch (err) {
-        console.error("Bug reporter: failed to capture screenshot", err);
-        const metadata = collectMetadata(
-          section,
-          siteId,
-          reporterName,
-          reporterEmail,
-          elementInfo
-        );
-        const consoleErrors = getCapturedErrors();
-        const networkErrors = getCapturedNetworkErrors();
-        onCapture({
-          screenshot: new Blob(),
-          metadata: __spreadProps(__spreadValues({}, metadata), { screenshotCaptureFailed: true }),
-          consoleErrors,
-          networkErrors
-        });
+        console.warn("Bug reporter: first capture attempt failed, retrying with simpler settings", err);
+        try {
+          const dataUrl = await (0, import_html_to_image.toPng)(section, {
+            quality: 0.6,
+            pixelRatio: 1,
+            skipFonts: true,
+            cacheBust: true
+          });
+          const [header, base64] = dataUrl.split(",");
+          const mime = ((_b = header.match(/:(.*?);/)) == null ? void 0 : _b[1]) || "image/png";
+          const bytes = atob(base64);
+          const arr = new Uint8Array(bytes.length);
+          for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
+          const retryBlob = new Blob([arr], { type: mime });
+          const metadata = collectMetadata(
+            section,
+            siteId,
+            reporterName,
+            reporterEmail,
+            elementInfo
+          );
+          const consoleErrors = getCapturedErrors();
+          const networkErrors = getCapturedNetworkErrors();
+          onCapture({ screenshot: retryBlob, metadata, consoleErrors, networkErrors });
+        } catch (e2) {
+          console.error("Bug reporter: screenshot capture failed after retry");
+          const metadata = collectMetadata(
+            section,
+            siteId,
+            reporterName,
+            reporterEmail,
+            elementInfo
+          );
+          const consoleErrors = getCapturedErrors();
+          const networkErrors = getCapturedNetworkErrors();
+          onCapture({
+            screenshot: new Blob(),
+            metadata: __spreadProps(__spreadValues({}, metadata), { screenshotCaptureFailed: true }),
+            consoleErrors,
+            networkErrors
+          });
+        }
       } finally {
         setIsCapturing(false);
       }
@@ -538,34 +595,31 @@ function ReportModal({
   const chatEndRef = (0, import_react2.useRef)(null);
   const inputRef = (0, import_react2.useRef)(null);
   const hasInitRef = (0, import_react2.useRef)(false);
-  const apiHeaders = {
-    "Content-Type": "application/json",
-    "X-Bug-Reporter-Key": apiConfig.apiKey
-  };
+  const apiHeaders = (0, import_react2.useMemo)(
+    () => ({
+      "Content-Type": "application/json",
+      "X-Bug-Reporter-Key": apiConfig.apiKey
+    }),
+    [apiConfig.apiKey]
+  );
   (0, import_react2.useEffect)(() => {
     if ((captureResult == null ? void 0 : captureResult.screenshot) && captureResult.screenshot.size > 0) {
       const url = URL.createObjectURL(captureResult.screenshot);
-      setScreenshotUrl(url);
-      return () => URL.revokeObjectURL(url);
+      setScreenshotUrl((prev) => {
+        if (prev) URL.revokeObjectURL(prev);
+        return url;
+      });
+      return () => {
+        URL.revokeObjectURL(url);
+        setScreenshotUrl(null);
+      };
     }
+    setScreenshotUrl((prev) => {
+      if (prev) URL.revokeObjectURL(prev);
+      return null;
+    });
   }, [captureResult]);
-  (0, import_react2.useEffect)(() => {
-    if (isOpen && captureResult && !hasInitRef.current) {
-      hasInitRef.current = true;
-      sendInitialMessage();
-    }
-  }, [isOpen, captureResult]);
-  (0, import_react2.useEffect)(() => {
-    var _a;
-    (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-  (0, import_react2.useEffect)(() => {
-    var _a;
-    if (isOpen && !isLoading) {
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [isOpen, isLoading, messages]);
-  async function sendInitialMessage() {
+  const sendInitialMessage = (0, import_react2.useCallback)(async () => {
     if (!captureResult) return;
     setIsLoading(true);
     try {
@@ -580,6 +634,16 @@ function ReportModal({
           clickedElement: captureResult.metadata.clickedElement || null
         })
       });
+      if (response.status === 401) {
+        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        setMessages([
+          {
+            role: "assistant",
+            content: "The bug reporter service isn't configured correctly. Please let the site administrator know."
+          }
+        ]);
+        return;
+      }
       if (!response.ok) throw new Error("Failed to get AI response");
       const data = await response.json();
       setMessages([{ role: "assistant", content: data.message }]);
@@ -593,53 +657,23 @@ function ReportModal({
     } finally {
       setIsLoading(false);
     }
-  }
-  async function sendMessage() {
-    if (!input.trim() || isLoading || !captureResult) return;
-    const userMessage = input.trim();
-    setInput("");
-    const newMessages = [
-      ...messages,
-      { role: "user", content: userMessage }
-    ];
-    setMessages(newMessages);
-    setIsLoading(true);
-    try {
-      const response = await fetch(`${apiConfig.apiUrl}/chat`, {
-        method: "POST",
-        headers: apiHeaders,
-        body: JSON.stringify({
-          messages: newMessages,
-          metadata: captureResult.metadata,
-          consoleErrors: captureResult.consoleErrors,
-          networkErrors: captureResult.networkErrors,
-          clickedElement: captureResult.metadata.clickedElement || null
-        })
-      });
-      if (!response.ok) throw new Error("Failed to get AI response");
-      const data = await response.json();
-      setMessages([
-        ...newMessages,
-        { role: "assistant", content: data.message }
-      ]);
-      if (data.readyToSubmit && data.structuredReport) {
-        await submitReport(
-          [...newMessages, { role: "assistant", content: data.message }],
-          data.structuredReport
-        );
-      }
-    } catch (e) {
-      setMessages([
-        ...newMessages,
-        {
-          role: "assistant",
-          content: "I had trouble processing that. Could you try describing the issue again?"
-        }
-      ]);
-    } finally {
-      setIsLoading(false);
+  }, [captureResult, apiConfig.apiUrl, apiHeaders]);
+  (0, import_react2.useEffect)(() => {
+    if (isOpen && captureResult && !hasInitRef.current) {
+      hasInitRef.current = true;
+      sendInitialMessage();
     }
-  }
+  }, [isOpen, captureResult, sendInitialMessage]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    if (isOpen && !isLoading) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isOpen, isLoading, messages]);
   const submitReport = (0, import_react2.useCallback)(
     async (conversation, structuredReport) => {
       if (!captureResult || modalState !== "chatting") return;
@@ -704,10 +738,67 @@ function ReportModal({
         setModalState("error");
       }
     },
-    [captureResult, apiConfig, apiHeaders, modalState]
+    [captureResult, apiConfig.apiUrl, apiHeaders, modalState]
   );
-  function handleManualSubmit() {
+  const handleManualSubmit = (0, import_react2.useCallback)(() => {
     submitReport(messages);
+  }, [submitReport, messages]);
+  async function sendMessage() {
+    if (!input.trim() || isLoading || !captureResult) return;
+    const userMessage = input.trim();
+    setInput("");
+    const newMessages = [
+      ...messages,
+      { role: "user", content: userMessage }
+    ];
+    setMessages(newMessages);
+    setIsLoading(true);
+    try {
+      const response = await fetch(`${apiConfig.apiUrl}/chat`, {
+        method: "POST",
+        headers: apiHeaders,
+        body: JSON.stringify({
+          messages: newMessages,
+          metadata: captureResult.metadata,
+          consoleErrors: captureResult.consoleErrors,
+          networkErrors: captureResult.networkErrors,
+          clickedElement: captureResult.metadata.clickedElement || null
+        })
+      });
+      if (response.status === 401) {
+        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        setMessages([
+          ...newMessages,
+          {
+            role: "assistant",
+            content: "The bug reporter service isn't configured correctly. Please let the site administrator know."
+          }
+        ]);
+        return;
+      }
+      if (!response.ok) throw new Error("Failed to get AI response");
+      const data = await response.json();
+      setMessages([
+        ...newMessages,
+        { role: "assistant", content: data.message }
+      ]);
+      if (data.readyToSubmit && data.structuredReport) {
+        await submitReport(
+          [...newMessages, { role: "assistant", content: data.message }],
+          data.structuredReport
+        );
+      }
+    } catch (e) {
+      setMessages([
+        ...newMessages,
+        {
+          role: "assistant",
+          content: "I had trouble processing that. Could you try describing the issue again?"
+        }
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
   }
   function handleClose() {
     setMessages([]);
@@ -715,6 +806,10 @@ function ReportModal({
     setModalState("chatting");
     setReportId(null);
     setErrorMessage(null);
+    if (screenshotUrl) {
+      URL.revokeObjectURL(screenshotUrl);
+    }
+    setScreenshotUrl(null);
     hasInitRef.current = false;
     onClose();
   }