@bugspotter/sdk 0.1.0-alpha.2 → 0.1.2-alpha.5

package/dist/utils/url-helpers.js

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * URL Helper Utilities
+ * Extract base API URL from endpoint configuration
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvalidEndpointError = void 0;
+exports.stripEndpointSuffix = stripEndpointSuffix;
+exports.getApiBaseUrl = getApiBaseUrl;
+const logger_1 = require("./logger");
+const logger = (0, logger_1.getLogger)();
+/**
+ * Custom error for invalid endpoint URLs
+ */
+class InvalidEndpointError extends Error {
+    constructor(endpoint, reason) {
+        super(`Invalid endpoint URL: ${endpoint}. ${reason}`);
+        this.endpoint = endpoint;
+        this.reason = reason;
+        this.name = 'InvalidEndpointError';
+    }
+}
+exports.InvalidEndpointError = InvalidEndpointError;
+/**
+ * Strip known endpoint suffixes from path
+ * Removes /api/v1/reports path
+ */
+function stripEndpointSuffix(path) {
+    // Use lastIndexOf to handle paths like '/prefix/api/v1/reports'
+    const reportsIndex = path.lastIndexOf('/api/v1/reports');
+    if (reportsIndex !== -1) {
+        return path.substring(0, reportsIndex);
+    }
+    // Remove trailing slash
+    return path.replace(/\/$/, '') || '';
+}
+/**
+ * Extract base API URL from endpoint
+ * Returns scheme + host + base path (without /api/v1/reports suffix)
+ *
+ * @example
+ * getApiBaseUrl('https://api.example.com/api/v1/reports')
+ * // Returns: 'https://api.example.com'
+ *
+ * @throws InvalidEndpointError if endpoint is not a valid absolute URL
+ */
+function getApiBaseUrl(endpoint) {
+    if (!endpoint) {
+        throw new InvalidEndpointError('', 'No endpoint configured');
+    }
+    try {
+        const url = new URL(endpoint);
+        const basePath = stripEndpointSuffix(url.pathname);
+        return url.origin + basePath;
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        logger.error('Invalid endpoint URL - must be a valid absolute URL', {
+            endpoint,
+            error: errorMessage,
+        });
+        throw new InvalidEndpointError(endpoint, 'Must be a valid absolute URL (e.g., https://api.example.com/api/v1/reports)');
+    }
+}

package/dist/version.d.ts

@@ -0,0 +1,8 @@
+/**
+ * SDK version - auto-generated from package.json
+ * DO NOT EDIT THIS FILE MANUALLY
+ *
+ * This file is automatically generated during the build process.
+ * To update the version, modify package.json
+ */
+export declare const VERSION = "0.1.2-alpha.5";

package/dist/version.js

@@ -0,0 +1,11 @@
+"use strict";
+/**
+ * SDK version - auto-generated from package.json
+ * DO NOT EDIT THIS FILE MANUALLY
+ *
+ * This file is automatically generated during the build process.
+ * To update the version, modify package.json
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+exports.VERSION = '0.1.2-alpha.5';

package/dist/widget/button.d.ts

@@ -1,7 +1,10 @@
 type ButtonPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 export interface FloatingButtonOptions {
     position?: ButtonPosition;
+    /** Icon to display - can be text/emoji or 'svg' for default bug icon */
     icon?: string;
+    /** Custom SVG icon (overrides icon if provided) */
+    customSvg?: string;
     backgroundColor?: string;
     size?: number;
     offset?: {
@@ -9,6 +12,8 @@ export interface FloatingButtonOptions {
         y: number;
     };
     zIndex?: number;
+    /** Custom tooltip text */
+    tooltip?: string;
 }
 export declare class FloatingButton {
     private button;

package/dist/widget/button.js

@@ -1,13 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingButton = void 0;
+// Professional bug report icon SVG
+const DEFAULT_SVG_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<path d="M8 2v4"/>
+<path d="M16 2v4"/>
+<path d="M12 12v5"/>
+<circle cx="12" cy="10" r="4"/>
+<path d="M9 16c-1.5 1-3 2-3 4h12c0-2-1.5-3-3-4"/>
+<path d="M3 8h4"/>
+<path d="M17 8h4"/>
+<path d="M5 12h2"/>
+<path d="M17 12h2"/>
+<path d="M6 16h2"/>
+<path d="M16 16h2"/>
+</svg>`;
 const DEFAULT_BUTTON_OPTIONS = {
     position: 'bottom-right',
-    icon: '🐛',
-    backgroundColor: '#ef4444',
-    size: 60,
+    icon: 'svg', // Use SVG icon by default
+    customSvg: undefined,
+    backgroundColor: '#2563eb', // Professional blue color
+    size: 56,
     offset: { x: 20, y: 20 },
     zIndex: 999999,
+    tooltip: 'Report an Issue',
 };
 const BUTTON_STYLES = {
     transition: 'transform 0.2s ease, box-shadow 0.2s ease',
@@ -23,7 +39,7 @@ const BUTTON_STYLES = {
 };
 class FloatingButton {
     constructor(options = {}) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.eventHandlers = new Map();
         this.handleMouseEnter = () => {
             this.button.style.transform = BUTTON_STYLES.transform.hover;
@@ -42,10 +58,12 @@ class FloatingButton {
         this.options = {
             position: (_a = options.position) !== null && _a !== void 0 ? _a : DEFAULT_BUTTON_OPTIONS.position,
             icon: (_b = options.icon) !== null && _b !== void 0 ? _b : DEFAULT_BUTTON_OPTIONS.icon,
-            backgroundColor: (_c = options.backgroundColor) !== null && _c !== void 0 ? _c : DEFAULT_BUTTON_OPTIONS.backgroundColor,
-            size: (_d = options.size) !== null && _d !== void 0 ? _d : DEFAULT_BUTTON_OPTIONS.size,
-            offset: (_e = options.offset) !== null && _e !== void 0 ? _e : DEFAULT_BUTTON_OPTIONS.offset,
-            zIndex: (_f = options.zIndex) !== null && _f !== void 0 ? _f : DEFAULT_BUTTON_OPTIONS.zIndex,
+            customSvg: (_c = options.customSvg) !== null && _c !== void 0 ? _c : DEFAULT_BUTTON_OPTIONS.customSvg,
+            backgroundColor: (_d = options.backgroundColor) !== null && _d !== void 0 ? _d : DEFAULT_BUTTON_OPTIONS.backgroundColor,
+            size: (_e = options.size) !== null && _e !== void 0 ? _e : DEFAULT_BUTTON_OPTIONS.size,
+            offset: (_f = options.offset) !== null && _f !== void 0 ? _f : DEFAULT_BUTTON_OPTIONS.offset,
+            zIndex: (_g = options.zIndex) !== null && _g !== void 0 ? _g : DEFAULT_BUTTON_OPTIONS.zIndex,
+            tooltip: (_h = options.tooltip) !== null && _h !== void 0 ? _h : DEFAULT_BUTTON_OPTIONS.tooltip,
         };
         this.button = this.createButton();
         // Ensure DOM is ready before appending
@@ -60,8 +78,18 @@ class FloatingButton {
     }
     createButton() {
         const btn = document.createElement('button');
-        btn.textContent = this.options.icon;
-        btn.setAttribute('aria-label', 'Report Bug');
+        // Set button content (SVG or text)
+        if (this.options.customSvg) {
+            btn.innerHTML = this.options.customSvg;
+        }
+        else if (this.options.icon === 'svg') {
+            btn.innerHTML = DEFAULT_SVG_ICON;
+        }
+        else {
+            btn.textContent = this.options.icon;
+        }
+        btn.setAttribute('aria-label', this.options.tooltip);
+        btn.setAttribute('title', this.options.tooltip);
         btn.setAttribute('data-bugspotter-exclude', 'true');
         btn.style.cssText = this.getButtonStyles();
         this.addHoverEffects(btn);
@@ -70,6 +98,9 @@ class FloatingButton {
     getButtonStyles() {
         const { position, size, offset, backgroundColor, zIndex } = this.options;
         const positionStyles = this.getPositionStyles(position, offset);
+        // SVG icons need slightly different sizing
+        const isSvgIcon = this.options.customSvg || this.options.icon === 'svg';
+        const iconSize = size * 0.5;
         return `
       position: fixed;
       ${positionStyles}
@@ -80,10 +111,11 @@ class FloatingButton {
       color: white;
       border: none;
       cursor: pointer;
-      font-size: ${size * 0.5}px;
+      font-size: ${iconSize}px;
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: ${isSvgIcon ? size * 0.25 : 0}px;
       box-shadow: ${BUTTON_STYLES.boxShadow.default};
       transition: ${BUTTON_STYLES.transition};
       z-index: ${zIndex};
@@ -125,7 +157,13 @@ class FloatingButton {
         this.button.style.display = 'none';
     }
     setIcon(icon) {
-        this.button.textContent = icon;
+        this.options.icon = icon;
+        if (icon === 'svg') {
+            this.button.innerHTML = DEFAULT_SVG_ICON;
+        }
+        else {
+            this.button.textContent = icon;
+        }
     }
     setBackgroundColor(color) {
         this.button.style.backgroundColor = color;

package/dist/widget/components/form-validator.d.ts

@@ -15,7 +15,7 @@ export interface ValidationErrors {
 }
 export interface FormData {
     title: string;
-    description: string;
+    description?: string;
     piiDetected: boolean;
     piiConfirmed: boolean;
 }
@@ -41,7 +41,7 @@ export declare class FormValidator {
     /**
      * Validate description field
      */
-    validateDescription(description: string): string | null;
+    validateDescription(description?: string): string | null;
     /**
      * Validate single field by name
      */

package/dist/widget/components/form-validator.js

@@ -58,9 +58,14 @@ class FormValidator {
      * Validate description field
      */
     validateDescription(description) {
+        // Description is optional
+        if (!description) {
+            return null;
+        }
         const trimmed = description.trim();
-        if (!trimmed) {
-            return 'Description is required';
+        // Whitespace-only is invalid (user attempted to provide content but it's meaningless)
+        if (trimmed.length === 0) {
+            return 'Description cannot be only whitespace';
         }
         if (trimmed.length < this.minDescriptionLength) {
             return `Description must be at least ${this.minDescriptionLength} characters`;

package/dist/widget/modal.d.ts

@@ -1,6 +1,6 @@
 export interface BugReportData {
     title: string;
-    description: string;
+    description?: string;
 }
 export interface PIIDetection {
     type: string;

package/dist/widget/modal.js

@@ -219,6 +219,7 @@ class BugReportModal {
         }
     }
     async handleSubmit(e) {
+        var _a;
         e.preventDefault();
         const elements = this.domCache.get();
         const formData = {
@@ -270,7 +271,7 @@ class BugReportModal {
         // Submit
         const bugReportData = {
             title: formData.title.trim(),
-            description: formData.description.trim(),
+            description: (_a = formData.description) === null || _a === void 0 ? void 0 : _a.trim(),
         };
         try {
             await this.options.onSubmit(bugReportData);

package/docs/SESSION_REPLAY.md

@@ -85,22 +85,84 @@ console.log(report.replay); // Array of rrweb events
 
 ### 4. Event Transmission
 
-The replay events are included in the bug report payload:
+The replay events are compressed and uploaded via presigned URLs using an optimized 3-request flow:
+
+**Step 1: Create Bug Report with Presigned URLs**
 
 ```typescript
+// Initial bug report with flags indicating which files will be uploaded
+POST /api/v1/reports
 {
   title: "Bug title",
   description: "Bug description",
   report: {
-    screenshot: "...",
     console: [...],
     network: [...],
-    metadata: {...},
-    replay: [...] // rrweb events
+    metadata: {...}
+  },
+  hasScreenshot: true,  // SDK sets this if screenshot was captured
+  hasReplay: true       // SDK sets this if replay events were recorded
+}
+
+// Response includes bug report ID AND presigned URLs
+{
+  "success": true,
+  "data": {
+    "id": "bug-uuid-here",
+    "title": "Bug title",
+    "presignedUrls": {
+      "screenshot": {
+        "uploadUrl": "https://s3.amazonaws.com/...",
+        "storageKey": "screenshots/project/bug/screenshot.png"
+      },
+      "replay": {
+        "uploadUrl": "https://s3.amazonaws.com/...",
+        "storageKey": "replays/project/bug/replay.gz"
+      }
+    }
   }
 }
 ```
 
+**Step 2: Upload Files Directly to S3**
+
+```typescript
+// Upload screenshot to presigned URL (parallel with replay)
+PUT https://s3.amazonaws.com/presigned-screenshot-url
+Content-Type: image/png
+<binary screenshot data>
+
+// Upload compressed replay to presigned URL (parallel with screenshot)
+PUT https://s3.amazonaws.com/presigned-replay-url
+Content-Type: application/gzip
+<compressed replay events>
+```
+
+**Step 3: Confirm Uploads**
+
+```typescript
+// Confirm screenshot upload
+POST /api/v1/reports/{bugId}/confirm-upload
+{
+  "fileType": "screenshot"
+}
+
+// Confirm replay upload
+POST /api/v1/reports/{bugId}/confirm-upload
+{
+  "fileType": "replay"
+}
+```
+
+**Optimized Flow Benefits:**
+
+- **40% fewer HTTP requests** - 3 requests vs 5 in old flow
+- **Reduces server load** - Files go directly to storage (S3)
+- **Improves performance** - No API server bottleneck for large files
+- **Better scalability** - Storage handles the bandwidth
+- **Parallel uploads** - Screenshot and replay upload concurrently
+- **Automatic compression** - Replay events are gzipped before upload
+
 ## Event Types
 
 The DOM collector captures the following event types:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bugspotter/sdk",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.2-alpha.5",
   "description": "Professional bug reporting SDK with screenshots, session replay, and automatic error capture for web applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -16,13 +16,16 @@
   },
   "scripts": {
     "dev": "webpack --watch --mode development",
+    "generate-version": "node scripts/generate-version.js",
+    "prebuild": "npm run generate-version",
     "build": "npm run build:webpack && npm run build:esm && npm run build:cjs",
     "build:webpack": "webpack --mode production",
     "build:esm": "tsc --project tsconfig.build.json --module ES2020 --outDir dist/esm && shx mv dist/esm/index.js dist/index.esm.js && shx rm -rf dist/esm",
-    "build:cjs": "tsc --project tsconfig.build.json --module CommonJS --outDir dist",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
     "prepublishOnly": "npm run build && npm test",
     "lint": "eslint \"src/**/*.{ts,js}\"",
     "lint:fix": "eslint \"src/**/*.{ts,js}\" --fix",
+    "pretest": "npm run generate-version",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",

package/scripts/generate-version.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+/**
+ * Generate version.ts file from package.json
+ * This ensures VERSION is available in all build outputs (UMD, ESM, CJS)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+try {
+  // Read package.json
+  const packageJsonPath = path.join(__dirname, '../package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+  if (!packageJson.version) {
+    console.error('Error: No version found in package.json');
+    process.exit(1);
+  }
+
+  // Generate version.ts content with proper documentation
+  const versionFilePath = path.join(__dirname, '../src/version.ts');
+  const versionFileContent = `/**
+ * SDK version - auto-generated from package.json
+ * DO NOT EDIT THIS FILE MANUALLY
+ * 
+ * This file is automatically generated during the build process.
+ * To update the version, modify package.json
+ */
+
+export const VERSION = '${packageJson.version}';
+`;
+
+  // Write the file
+  fs.writeFileSync(versionFilePath, versionFileContent, 'utf8');
+  console.log(`✓ Generated version.ts with version ${packageJson.version}`);
+} catch (error) {
+  console.error('Error generating version.ts:', error.message);
+  process.exit(1);
+}

package/tsconfig.cjs.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "CommonJS",
+    "lib": ["ES2017", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./dist",
+    "isolatedModules": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "tests", "**/*.test.ts", "**/*.spec.ts"]
+}