quick-bug-reporter-react 1.1.1 → 1.2.0

package/README.md

@@ -86,7 +86,7 @@ Both integrations support two modes:
 | Mode | When to use | How it works |
 |------|------------|--------------|
 | **Backend proxy** (recommended) | Production apps | Your server-side endpoint receives the report and calls Linear/Jira. API keys stay on the server. |
-| **Direct API** | Server-side only (Next.js API routes, etc.) | The library calls Linear/Jira APIs directly. **⚠️ Does NOT work from browser-only SPAs due to CORS.** |
+| **Direct API** | Server-side only (Next.js API routes, etc.) | The library calls Linear/Jira APIs directly. **Does NOT work from browser-only SPAs due to CORS.** |
 
 ### Linear
 
@@ -98,15 +98,30 @@ const linear = new LinearIntegration({
   submitProxyEndpoint: "/api/bug-report",
 });
 
+// Or split proxy endpoints for finer control:
+const linear = new LinearIntegration({
+  createIssueProxyEndpoint: "/api/linear/create-issue",
+  uploadProxyEndpoint: "/api/linear/upload",
+});
+
 // ⚠️ Direct API — server-side / Next.js API routes only
-// Does NOT work from browser SPAs (CORS + exposes API key)
 const linear = new LinearIntegration({
   apiKey: "lin_api_...",
   teamId: "TEAM_ID",
-  projectId: "PROJECT_ID", // optional
+  projectId: "PROJECT_ID", // optional — assigns issues to a Linear project
 });
 ```
 
+| Option | Description |
+|--------|-------------|
+| `apiKey` | Linear API key (direct mode only) |
+| `teamId` | Linear team ID |
+| `projectId` | Linear project ID — optional, assigns every issue to this project |
+| `submitProxyEndpoint` | Single endpoint that handles the entire submission |
+| `createIssueProxyEndpoint` | Proxy for issue creation only |
+| `uploadProxyEndpoint` | Proxy for file uploads only |
+| `fetchImpl` | Custom fetch implementation |
+
 ### Jira
 
 ```ts
@@ -117,6 +132,13 @@ const jira = new JiraIntegration({
   submitProxyEndpoint: "/api/bug-report",
 });
 
+// Or split proxy endpoints:
+const jira = new JiraIntegration({
+  createIssueProxyEndpoint: "/api/jira/create-issue",
+  uploadAttachmentProxyEndpoint: "/api/jira/upload-attachment",
+  projectKey: "BUG",
+});
+
 // ⚠️ Direct API — server-side only (CORS + exposes credentials)
 const jira = new JiraIntegration({
   baseUrl: "https://your-domain.atlassian.net",
@@ -127,33 +149,117 @@ const jira = new JiraIntegration({
 });
 ```
 
-### Proxy endpoint
-
-Your backend proxy receives a `FormData` POST with these fields:
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `provider` | string | `"linear"` or `"jira"` |
-| `title` | string | Bug title |
-| `description` | string | Bug description |
-| `pageUrl` | string | URL where the bug was reported |
-| `userAgent` | string | Browser user agent |
-| `captureMode` | string | `"screenshot"` or `"video"` |
-| `clientMetadata` | JSON string | Device/browser metadata |
-| `networkLogs` | string | Formatted network logs |
-| `screenshotFile` | File | Screenshot PNG (if applicable) |
-| `screenRecordingFile` | File | Screen recording WebM (if applicable) |
-| `requestsLogFile` | File | Network logs as .txt |
-
-The proxy should return JSON:
+| Option | Description |
+|--------|-------------|
+| `baseUrl` | Jira instance URL (direct mode only) |
+| `email` | Jira email (direct mode only) |
+| `apiToken` | Jira API token (direct mode only) |
+| `projectKey` | Jira project key (e.g. `"BUG"`) |
+| `issueType` | Issue type name, defaults to `"Bug"` |
+| `submitProxyEndpoint` | Single endpoint that handles the entire submission |
+| `createIssueProxyEndpoint` | Proxy for issue creation only |
+| `uploadAttachmentProxyEndpoint` | Proxy for attachment uploads only |
+| `fetchImpl` | Custom fetch implementation |
+
+---
+
+### Proxy endpoint contract
+
+When using `submitProxyEndpoint`, the library sends a single `FormData` POST with a **pre-formatted description** and all attachment files. Your proxy just needs to create the issue and upload the files — no custom formatting required.
+
+#### FormData fields
+
+| Field | Type | Always sent | Description |
+|-------|------|:-----------:|-------------|
+| `provider` | string | Yes | `"linear"` or `"jira"` |
+| `title` | string | Yes | Issue title |
+| `description` | string | Yes | **Pre-formatted** issue description (ready to use as-is) |
+| `issueType` | string | Jira only | Issue type (e.g. `"Bug"`) |
+| `projectKey` | string | Jira only | Jira project key (if configured) |
+| `teamId` | string | Linear only | Linear team ID (if configured) |
+| `projectId` | string | Linear only | Linear project ID (if configured) |
+| `screenshotFile` | File | If screenshot | `bug-screenshot.png` |
+| `screenRecordingFile` | File | If video | `bug-recording.webm` |
+| `networkLogsFile` | File | Yes | `network-logs.txt` |
+| `clientMetadataFile` | File | Yes | `client-metadata.json` |
+| `consoleLogsFile` | File | If present | `console-logs.txt` (JS errors + console output) |
+
+#### Expected response
+
+**Jira proxy:**
+```json
+{
+  "jira": { "id": "10001", "key": "BUG-42", "url": "https://you.atlassian.net/browse/BUG-42" },
+  "warnings": []
+}
+```
 
+**Linear proxy:**
 ```json
 {
-  "linear": { "id": "...", "identifier": "ENG-123", "url": "https://..." },
+  "linear": { "id": "...", "identifier": "ENG-123", "url": "https://linear.app/..." },
   "warnings": []
 }
 ```
 
+#### Example Jira proxy (Node.js / Express)
+
+```ts
+app.post("/api/bug-report", upload.any(), async (req, res) => {
+  const { title, description, issueType, projectKey } = req.body;
+
+  // 1. Convert plain-text description to Jira ADF
+  const adf = {
+    type: "doc", version: 1,
+    content: description.split(/\n{2,}/).filter(Boolean).map(chunk => ({
+      type: "paragraph",
+      content: [{ type: "text", text: chunk.trim() }],
+    })),
+  };
+
+  // 2. Create the issue
+  const issue = await fetch(`${JIRA_BASE}/rest/api/3/issue`, {
+    method: "POST",
+    headers: {
+      Authorization: `Basic ${btoa(`${JIRA_EMAIL}:${JIRA_TOKEN}`)}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      fields: {
+        project: { key: projectKey },
+        summary: title,
+        description: adf,
+        issuetype: { name: issueType || "Bug" },
+      },
+    }),
+  }).then(r => r.json());
+
+  // 3. Upload all attachment files
+  for (const file of req.files) {
+    const form = new FormData();
+    form.append("file", file.buffer, file.originalname);
+    await fetch(`${JIRA_BASE}/rest/api/3/issue/${issue.key}/attachments`, {
+      method: "POST",
+      headers: {
+        Authorization: `Basic ${btoa(`${JIRA_EMAIL}:${JIRA_TOKEN}`)}`,
+        "X-Atlassian-Token": "no-check",
+      },
+      body: form,
+    });
+  }
+
+  res.json({ jira: { id: issue.id, key: issue.key, url: `${JIRA_BASE}/browse/${issue.key}` } });
+});
+```
+
+### Advanced: Split proxy endpoints
+
+Instead of a single `submitProxyEndpoint`, you can use separate endpoints for issue creation and file uploads. This gives the **library** full control over formatting while your proxy only handles auth:
+
+- **`createIssueProxyEndpoint`** — receives `{ title, description, issueType, projectKey }` as JSON, returns `{ id, key, url }`
+- **`uploadAttachmentProxyEndpoint`** (Jira) — receives `FormData` with `issueKey` + `file`, returns `{ ok: true }`
+- **`uploadProxyEndpoint`** (Linear) — receives `FormData` with `file` + `filename` + `contentType`, returns `{ assetUrl }`
+
 ### Advanced: Custom fetch
 
 Both integrations accept a `fetchImpl` option to customize how HTTP requests are made (useful for adding auth headers, logging, or proxying):

package/dist/index.cjs

@@ -1156,22 +1156,30 @@ var LinearIntegration = class {
     const formData = new FormData();
     formData.set("provider", "linear");
     formData.set("title", payload.title);
-    formData.set("description", payload.description);
-    formData.set("pageUrl", payload.pageUrl);
-    formData.set("userAgent", payload.userAgent);
-    formData.set("reportedAt", payload.stoppedAt);
-    formData.set("captureMode", payload.captureMode);
-    formData.set("clientMetadata", JSON.stringify(payload.metadata));
-    const formattedLogs = formatNetworkLogs(payload.networkLogs);
-    formData.set("networkLogs", formattedLogs);
-    formData.append("requestsLogFile", new Blob([formattedLogs], { type: "text/plain" }), "network-logs.txt");
-    if (payload.videoBlob) {
-      const file = toBlobFile(payload.videoBlob, "bug-recording.webm", "video/webm");
-      formData.append("screenRecordingFile", file, file.name);
+    formData.set("description", buildCleanDescription(payload, { screenshotUrl: null, recordingUrl: null }));
+    if (this.teamId) {
+      formData.set("teamId", this.teamId);
+    }
+    if (this.projectId) {
+      formData.set("projectId", this.projectId);
     }
     if (payload.screenshotBlob) {
-      const file = toBlobFile(payload.screenshotBlob, "bug-screenshot.png", "image/png");
-      formData.append("screenshotFile", file, file.name);
+      formData.append("screenshotFile", toBlobFile(payload.screenshotBlob, "bug-screenshot.png", "image/png"), "bug-screenshot.png");
+    }
+    if (payload.videoBlob) {
+      formData.append("screenRecordingFile", toBlobFile(payload.videoBlob, "bug-recording.webm", "video/webm"), "bug-recording.webm");
+    }
+    formData.append("networkLogsFile", new Blob([formatNetworkLogs(payload.networkLogs)], { type: "text/plain" }), "network-logs.txt");
+    formData.append("clientMetadataFile", new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" }), "client-metadata.json");
+    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));
+      }
+      formData.append("consoleLogsFile", new Blob([consoleParts.join("\n\n")], { type: "text/plain" }), "console-logs.txt");
     }
     (onProgress ?? noop)("Submitting to Linear\u2026");
     const response = await this.fetchImpl(this.submitProxyEndpoint, {
@@ -1502,22 +1510,28 @@ var JiraIntegration = class {
     const formData = new FormData();
     formData.set("provider", "jira");
     formData.set("title", payload.title);
-    formData.set("description", payload.description);
-    formData.set("pageUrl", payload.pageUrl);
-    formData.set("userAgent", payload.userAgent);
-    formData.set("reportedAt", payload.stoppedAt);
-    formData.set("captureMode", payload.captureMode);
-    formData.set("clientMetadata", JSON.stringify(payload.metadata));
-    const formattedLogs = formatNetworkLogs(payload.networkLogs);
-    formData.append("requestsLogFile", new Blob([formattedLogs], { type: "text/plain" }), "network-logs.txt");
-    formData.append("clientMetadataFile", new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" }), "client-metadata.json");
-    if (payload.videoBlob) {
-      const file = toBlobFile(payload.videoBlob, "bug-recording.webm", "video/webm");
-      formData.append("screenRecordingFile", file, file.name);
+    formData.set("description", buildCleanDescription2(payload));
+    formData.set("issueType", this.issueType);
+    if (this.projectKey) {
+      formData.set("projectKey", this.projectKey);
     }
     if (payload.screenshotBlob) {
-      const file = toBlobFile(payload.screenshotBlob, "bug-screenshot.png", "image/png");
-      formData.append("screenshotFile", file, file.name);
+      formData.append("screenshotFile", toBlobFile(payload.screenshotBlob, "bug-screenshot.png", "image/png"), "bug-screenshot.png");
+    }
+    if (payload.videoBlob) {
+      formData.append("screenRecordingFile", toBlobFile(payload.videoBlob, "bug-recording.webm", "video/webm"), "bug-recording.webm");
+    }
+    formData.append("networkLogsFile", new Blob([formatNetworkLogs(payload.networkLogs)], { type: "text/plain" }), "network-logs.txt");
+    formData.append("clientMetadataFile", new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" }), "client-metadata.json");
+    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));
+      }
+      formData.append("consoleLogsFile", new Blob([consoleParts.join("\n\n")], { type: "text/plain" }), "console-logs.txt");
     }
     (onProgress ?? noop2)("Submitting to Jira\u2026");
     const response = await this.fetchImpl(this.submitProxyEndpoint, {