@bugspotter/sdk 2.0.5 → 2.1.0

package/CONTRIBUTING.md

@@ -190,9 +190,9 @@ pnpm build   # Production build
 
 ## Getting Help
 
-- **Questions**: Open a [Discussion](https://github.com/apexbridge-tech/bugspotter-sdk/discussions)
-- **Bugs**: Open an [Issue](https://github.com/apexbridge-tech/bugspotter-sdk/issues) with the bug template
-- **Features**: Open an [Issue](https://github.com/apexbridge-tech/bugspotter-sdk/issues) with the feature template
+- **Questions**: Open a [Discussion](https://github.com/apex-bridge/bugspotter-sdk/discussions)
+- **Bugs**: Open an [Issue](https://github.com/apex-bridge/bugspotter-sdk/issues) with the bug template
+- **Features**: Open an [Issue](https://github.com/apex-bridge/bugspotter-sdk/issues) with the feature template
 - **Security**: Email security@apexbridge.tech
 
 ## License

package/README.md

@@ -38,8 +38,8 @@ pnpm add @bugspotter/sdk
 
 ```bash
 # Clone and build from source
-git clone https://github.com/apexbridge-tech/bugspotter.git
-cd bugspotter/packages/sdk
+git clone https://github.com/apex-bridge/bugspotter-sdk.git
+cd bugspotter-sdk
 pnpm install
 pnpm build
 ```
@@ -84,7 +84,7 @@ const bugSpotter = await BugSpotter.init({
   (async () => {
     const bugSpotter = await BugSpotter.init({
       endpoint: 'https://api.bugspotter.com',
-  apiKey: 'bgs_your_api_key',
+      apiKey: 'bgs_your_api_key',
       showWidget: true,
     });
   })();
@@ -230,22 +230,84 @@ button.setBackgroundColor('#00ff00');
 
 ## 🔒 PII Sanitization
 
-Automatic detection and masking of sensitive data before submission.
+Automatic detection and masking of sensitive text data **in the browser before upload**. When enabled (default), text fields (console logs, network URLs, metadata) are sanitized before submission. For visual exclusion: use `replay.blockSelectors` to hide DOM elements from session replay, and `data-bugspotter-exclude` attribute to exclude elements from screenshots.
+
+### Built-in Patterns (9 types)
+
+| Pattern      | Detects                   | Example                                         |
+| ------------ | ------------------------- | ----------------------------------------------- |
+| `email`      | Email addresses           | `user@example.com` → `[REDACTED-EMAIL]`         |
+| `phone`      | Phone numbers             | `+7 701 123-4567` → `[REDACTED-PHONE]`          |
+| `creditcard` | Credit card numbers       | `4111-1111-1111-1111` → `[REDACTED-CREDITCARD]` |
+| `ssn`        | US Social Security        | `123-45-6789` → `[REDACTED-SSN]`                |
+| `iin`        | Kazakhstan IIN/BIN        | `860101350478` → `[REDACTED-IIN]`               |
+| `ip`         | IPv4 and IPv6             | `192.168.1.1` → `[REDACTED-IP]`                 |
+| `apikey`     | Stripe, AWS, Google keys  | `sk_live_...` → `[REDACTED-APIKEY]`             |
+| `token`      | Bearer, JWT, OAuth tokens | `eyJhbG...` → `[REDACTED-TOKEN]`                |
+| `password`   | Password field values     | `••••••••` → `[REDACTED-PASSWORD]`              |
+
+### Presets
+
+Use a preset name instead of listing patterns individually:
+
+| Preset             | Patterns included       |
+| ------------------ | ----------------------- |
+| `'all'`            | All 9 patterns          |
+| `'minimal'`        | email, creditcard, ssn  |
+| `'financial'`      | creditcard, ssn         |
+| `'contact'`        | email, phone            |
+| `'identification'` | ssn, iin                |
+| `'kazakhstan'`     | email, phone, iin       |
+| `'gdpr'`           | email, phone, ip        |
+| `'pci'`            | creditcard              |
+| `'credentials'`    | apikey, token, password |
 
-**Built-in patterns:** Email, phone, credit card, SSN, Kazakhstan IIN, IP address
+```javascript
+// Use a preset
+await BugSpotter.init({
+  sanitize: { patterns: 'kazakhstan' }, // email + phone + IIN
+});
+
+// Or pick individual patterns
+await BugSpotter.init({
+  sanitize: { patterns: ['email', 'phone', 'creditcard'] },
+});
+```
+
+### Custom Patterns
+
+Add your own regex patterns for industry-specific data:
 
 ```javascript
 await BugSpotter.init({
   sanitize: {
-    enabled: true, // Default
-    patterns: ['email', 'phone', 'creditcard'],
-    customPatterns: [{ name: 'api-key', regex: /API[-_]KEY:\s*[\w-]{20,}/gi }],
-    excludeSelectors: ['.public-email'],
+    enabled: true,
+    patterns: 'all',
+    customPatterns: [
+      {
+        name: 'broker-account',
+        regex: /FRH\d{9}/gi,
+        description: 'Freedom Finance broker account number',
+      },
+      {
+        name: 'iban-kz',
+        regex: /KZ\d{2}[A-Z]{4}\d{13}/gi,
+        description: 'Kazakhstan IBAN',
+      },
+      {
+        name: 'internal-id',
+        regex: /ORD-\d{6,}/gi,
+        description: 'Internal order ID',
+      },
+    ],
+    excludeSelectors: ['.public-info'], // Don't redact inside these elements
   },
 });
 ```
 
-**Performance:** <10ms overhead, supports Cyrillic text
+Custom patterns produce `[REDACTED-BROKER-ACCOUNT]`, `[REDACTED-IBAN-KZ]`, etc.
+
+**Performance:** < 50ms overhead, recursive sanitization of nested objects, supports Cyrillic text
 
 ## 📋 API Reference
 
@@ -260,37 +322,58 @@ Initialize the SDK. **This method is async** to support fetching backend-control
 ```typescript
 interface BugSpotterConfig {
   apiKey: string; // Required: API key (bgs_...)
-  endpoint?: string; // Base URL of BugSpotter API (e.g., https://api.example.com)
+  endpoint?: string; // Base URL of BugSpotter API
+  sampleRate?: number; // Session sampling (0-1, default: 1 = all sessions)
   showWidget?: boolean; // Auto-show widget (default: true)
   widgetOptions?: FloatingButtonOptions;
   replay?: {
-    // Session replay configuration
     enabled?: boolean; // Enable replay (default: true)
     duration?: number; // Buffer duration in seconds (default: 15)
     sampling?: {
       mousemove?: number; // Mousemove throttle in ms (default: 50)
       scroll?: number; // Scroll throttle in ms (default: 100)
     };
+    blockSelectors?: string[]; // CSS selectors to exclude from replay
+    blockClass?: string; // CSS class to exclude from replay
     // Quality settings (optional, backend controlled by default)
-    inlineStylesheet?: boolean; // Inline CSS stylesheets (default: backend controlled)
-    inlineImages?: boolean; // Inline images (default: backend controlled)
-    collectFonts?: boolean; // Collect fonts (default: backend controlled)
-    recordCanvas?: boolean; // Record canvas elements (default: backend controlled)
-    recordCrossOriginIframes?: boolean; // Record cross-origin iframes (default: backend controlled)
+    inlineStylesheet?: boolean;
+    inlineImages?: boolean;
+    collectFonts?: boolean;
+    recordCanvas?: boolean;
+    recordCrossOriginIframes?: boolean;
   };
   sanitize?: {
-    // PII sanitization configuration
     enabled?: boolean; // Enable PII sanitization (default: true)
-    patterns?: Array<
-      // PII patterns to detect
-      'email' | 'phone' | 'creditcard' | 'ssn' | 'iin' | 'ip' | 'custom'
-    >;
+    patterns?:
+      | 'all'
+      | 'minimal'
+      | 'financial'
+      | 'contact'
+      | 'identification'
+      | 'credentials'
+      | 'kazakhstan'
+      | 'gdpr'
+      | 'pci'
+      | Array<
+          | 'email'
+          | 'phone'
+          | 'creditcard'
+          | 'ssn'
+          | 'iin'
+          | 'ip'
+          | 'apikey'
+          | 'token'
+          | 'password'
+          | 'custom'
+        >;
     customPatterns?: Array<{
-      // Custom regex patterns
-      name: string; // Pattern name for [REDACTED-NAME]
+      name: string; // Pattern name → [REDACTED-NAME]
       regex: RegExp; // Detection regex
+      description?: string; // Human-readable description
+      examples?: string[]; // Example values for testing
+      priority?: number; // Pattern ordering hint (optional)
     }>;
-    excludeSelectors?: string[]; // CSS selectors to exclude from sanitization
+    excludeSelectors?: string[]; // CSS selectors to exclude from DOM text sanitization (replay)
   };
 }
 ```
@@ -477,7 +560,9 @@ Upload screenshot directly to storage.
 const screenshotBlob = await fetch(dataUrl).then((r) => r.blob());
 
 const result = await uploader.uploadScreenshot(screenshotBlob, (progress) => {
-  console.log(`Screenshot: ${progress.loaded}/${progress.total} (${progress.percentage}%)`);
+  console.log(
+    `Screenshot: ${progress.loaded}/${progress.total} (${progress.percentage}%)`
+  );
 });
 
 // result: { success: true, storageKey: "screenshots/..." }
@@ -667,7 +752,7 @@ Output: `dist/bugspotter.min.js` (~99 KB)
 - **Load**: < 100ms
 - **Memory**: < 15 MB (30s replay buffer)
 - **Screenshot**: ~500ms
-- **PII sanitization**: <10ms
+- **PII sanitization**: <50ms
 
 ## 🔒 Security