npm package: @prodfix/sdk
Description: ProdFix — all-in-one production monitoring SDK: errors, UX, security, performance, with IDE integration via MCP.
Author: ProdFix
Latest version: 0.6.0

# @prodfix/sdk

**ProdFix turns production signals into IDE-ready fix suggestions — automatically.**

Your app runs in production. Errors happen, UX breaks, performance degrades, security gaps appear. Today you find out about these from scattered dashboards and monitoring tools, or angry users. By then it's too late — context is lost and you're debugging blind.

ProdFix bridges the gap between production monitoring and developer action. This SDK sits in your app, captures everything that matters (bugs, UX friction, security issues, performance regressions), feeds it through AI analysis, and delivers fix suggestions directly into your IDE — Cursor, Claude Code, Windsurf, VS Code, or any MCP-compatible tool.

**No more context switching. No more dashboard fatigue. Issues come to you, with solutions attached.**

**Lightweight, zero-dependency SDK** — 18KB, no external packages required.

---

## How It Works

```
Your App (SDK)  →  ProdFix Cloud  →  AI Analysis  →  Your IDE (MCP)
    ↑                                                      ↓
 Captures:                                           Delivers:
 • Errors & stack traces                    • Root cause analysis
 • Rage clicks & UX friction               • Fix suggestions with code
 • CSP violations & exposed secrets         • Priority-ranked issue list
 • LCP, CLS, INP, TTFB regressions        • One-click "Apply Fix"
```

1. **SDK captures** — errors, UX events, security vulnerabilities, performance metrics
2. **Cloud analyzes** — AI processes raw signals into actionable findings
3. **MCP delivers** — issues and fix suggestions appear in your IDE's AI chat
4. **You fix** — review the suggestion, apply it, ship. Minutes instead of hours.

---

## Install

```bash
npm install @prodfix/sdk
```

Or via CDN (no bundler needed):

```html
<script async src="https://unpkg.com/@prodfix/sdk/dist/sdk.js"
  data-key="pf_your_key"></script>
```

---

## Quick Start

```typescript
import { prodfix } from '@prodfix/sdk';

prodfix.init({
  key: 'pf_your_key',       // Get your key at prodfixai.com
  security: true,
  performance: { webVitals: true, longTasks: true },
});
```

That's it. The SDK starts capturing immediately. Within minutes, issues will appear in your ProdFix dashboard and IDE.

---

## What It Tracks

### Bug Tracking
Automatic error capture with full stack traces, breadcrumbs, and context. Zero external dependencies.

| Signal | Description |
|--------|------------|
| Uncaught Errors | JavaScript errors with parsed stack traces across all browsers |
| Promise Rejections | Unhandled async errors |
| HTTP Errors | Failed API calls (4xx/5xx) with URL, method, and status |
| Network Errors | Connection failures and request timeouts |
| Breadcrumbs | Last 50 user actions before the error: clicks, navigation, console logs, API calls |

### UX Monitoring
Real-time UX signals that detect user frustration automatically.

| Signal | Description |
|--------|------------|
| Rage Clicks | Rapid repeated clicks on the same area — user frustration signal |
| Dead Clicks | Clicks that cause no response — broken buttons, wrong z-index, disabled elements |
| Form Abandonment | User starts filling a form but leaves without submitting |
| Slow Interactions | Button/link clicks that don't respond within 300ms |
| Page Views | SPA-aware page view tracking with referrer chain |
| Scroll Depth | Maximum scroll percentage per page |
| Time on Page | Actual engaged time (pauses when tab is not visible) |

### Security Scanning
| Check | Description |
|-------|-------------|
| CSP Violations | Content Security Policy breach detection |
| Exposed Secrets | Scans DOM for API keys, tokens, private keys |
| Storage Audit | Flags sensitive data in localStorage/sessionStorage |
| Insecure Cookies | Detects session cookies without HttpOnly flag |
| Security Headers | Checks for missing HSTS, X-Frame-Options, CSP headers (server-side) |
| Source Map Exposure | Detects publicly accessible .map files in production (server-side) |
| Library Vulnerabilities | Cross-references dependencies against OSV.dev (server-side) |

### Performance Monitoring
| Metric | What It Measures | Threshold |
|--------|-----------------|-----------|
| LCP | Largest Contentful Paint — loading speed | good < 2.5s, poor > 4s |
| CLS | Cumulative Layout Shift — visual stability | good < 0.1, poor > 0.25 |
| INP | Interaction to Next Paint — responsiveness | good < 200ms, poor > 500ms |
| TTFB | Time to First Byte — server speed | good < 800ms, poor > 1.8s |
| Long Tasks | JavaScript blocking the main thread > 50ms | Max 20 reports/session |
| Memory Pressure | JS heap usage > 90% (Chrome only) | 30s polling interval |
| Slow Resources | Assets taking > 3 seconds to load | Max 10 reports/session |

---

## Full Configuration

```typescript
prodfix.init({
  key: 'pf_your_key',         // Required — from your ProdFix dashboard
  environment: 'production',   // Tag issues by environment
  release: '1.2.0',           // Tag issues by release version
  sampleRate: 1.0,            // 0.0 - 1.0 sampling rate
  debug: false,               // Log events to console

  // Security module — true enables all defaults
  security: {
    cspViolations: true,       // Listen for CSP violation events
    exposedSecrets: true,      // Scan DOM for leaked API keys/tokens
    storageAudit: true,        // Check localStorage for sensitive keys
    insecureCookies: true,     // Flag non-HttpOnly session cookies
    securityHeaders: true,     // Server-side header check (HSTS, CSP, etc.)
    sourceMapExposure: true,   // Server-side .map file detection
    libraryVersions: true,     // Server-side OSV.dev vulnerability check
    dependencies: {            // Explicit versions for bundled libraries
      'react': '18.2.0',
      'lodash': '4.17.21',
    },
  },

  // Performance module — true enables webVitals + longTasks
  performance: {
    webVitals: true,           // LCP, CLS, INP, TTFB
    longTasks: true,           // JS tasks > 50ms
    memoryUsage: false,        // Chrome-only heap monitoring
    resourceTiming: false,     // Slow resource detection
  },
});
```

---

## API

```typescript
// Identify user — call after login
prodfix.identifyUser('user_123', {
  email: 'user@example.com',
  plan: 'pro',
});

// Manual error capture
prodfix.captureError(new Error('Payment processing failed'));

// Manual message
prodfix.captureMessage('User attempted unsupported action');

// Custom UX event tracking
prodfix.trackEvent('checkout_started', { plan: 'pro', source: 'pricing_page' });

// Reset session — call on logout (clears session ID and user identity, keeps SDK running)
prodfix.reset();

// Full teardown — call on SPA unmount (disconnects all listeners, flushes queue, stops SDK entirely)
prodfix.destroy();
```

---

## IDE Integration (MCP)

ProdFix uses [Model Context Protocol](https://modelcontextprotocol.io) to deliver issues and fix suggestions directly to your IDE's AI assistant. You'll need your project API key — get it from your [ProdFix dashboard](https://prodfixai.com) under **Project Settings → API Keys**.

Once connected, you can ask your AI:

- *"What are the current production issues?"*
- *"Show me the most critical bug and suggest a fix"*
- *"Are there any security vulnerabilities?"*
- *"How's the performance looking? Any regressions?"*

### Claude Code

```bash
claude mcp add prodfix --transport http \
  --url https://prodfixai.com/mcp \
  --header "Authorization: Bearer pf_your_key"
```

### Cursor

Create `.cursor/mcp.json` in your project root:

```json
{
  "mcpServers": {
    "prodfix": {
      "url": "https://prodfixai.com/mcp/sse",
      "headers": { "Authorization": "Bearer pf_your_key" }
    }
  }
}
```

### Windsurf

Add to `~/.codeium/windsurf/mcp_config.json`:

```json
{
  "mcpServers": {
    "prodfix": {
      "serverUrl": "https://prodfixai.com/mcp/sse",
      "headers": { "Authorization": "Bearer pf_your_key" }
    }
  }
}
```

### VS Code (GitHub Copilot)

Create `.vscode/mcp.json` in your project root:

```json
{
  "servers": {
    "prodfix": {
      "type": "http",
      "url": "https://prodfixai.com/mcp/sse",
      "headers": { "Authorization": "Bearer pf_your_key" }
    }
  }
}
```

### Zed

Add to `~/.config/zed/settings.json`:

```json
{
  "context_servers": {
    "prodfix": {
      "transport": "sse",
      "url": "https://prodfixai.com/mcp/sse",
      "headers": { "Authorization": "Bearer pf_your_key" }
    }
  }
}
```

---

## MCP Tools Available

Once connected, your IDE's AI gets access to these tools:

| Tool | Description |
|------|-------------|
| `get_issues` | List open issues (filterable by severity, category) |
| `get_issue_detail` | Full issue details with AI analysis and fix suggestion |
| `refresh_issues` | Trigger a fresh sync from all data sources |
| `mark_fixed` | Mark an issue as resolved |
| `ignore_issue` | Dismiss an issue |
| `snooze_issue` | Snooze an issue for a set duration |
| `get_summary` | Overview stats for a project |
| `get_config` | Current project configuration |

---

## Framework Support

The SDK is framework-agnostic and works with any JavaScript/TypeScript web app:

- React / Next.js / Remix
- Vue / Nuxt
- Svelte / SvelteKit
- Angular
- Vanilla JavaScript/TypeScript
- Any app that runs in a browser

---

## Privacy & Security

**Data handling:**
- Events are sent securely over HTTPS
- Sensitive data patterns (API keys, tokens) are detected **client-side** and **never transmitted**
- Security header and source map checks run server-side — no sensitive request data leaves the browser
- All captured data is scoped to your project and account — no cross-project data sharing

**Compliance:**
- The SDK does not collect personally identifiable information (PII) by default
- User identity is only linked if you explicitly call `prodfix.identifyUser()`
- Data retention: events and issues are stored for 90 days by default
- To request data deletion, contact [hello@prodfixai.com](mailto:hello@prodfixai.com)
- ProdFix is GDPR-aware: your end users' data stays within your account; we act as a data processor

**Rate limiting:**
- Max 30 events/minute per project (enforced server-side)
- API keys are project-scoped, not user-scoped

---

## License

MIT