@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 — ~55KB, 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

npm install @prodfix/sdk

Or via CDN (no bundler needed):

<script async src="https://cdn.prodfixai.com/sdk.js"
  data-key="pf_your_key"></script>

Quick Start

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 rich 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, status, and response body | | Network Errors | Connection failures and request timeouts | | Resource Errors | Failed image, script, and stylesheet loads (404s) | | WebSocket Errors | WS connection failures and unexpected closes | | Console Errors | console.error and console.assert failures captured automatically | | Timer Errors | Errors thrown inside setTimeout, setInterval, requestAnimationFrame | | Service Worker Errors | SW error messages forwarded to the main thread | | Breadcrumbs | Last 50 user actions before the error: clicks, navigation, console logs, API calls | | Network Timeline | Last 10 HTTP requests at time of error (URL, method, status, duration) | | Console Buffer | Last 30 console messages (log, warn, error) at time of error | | Browser State | Viewport, online status, connection type, JS heap usage, battery level |

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/Secure/SameSite flags | | 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) | | Runtime XSS Detection | Monitors innerHTML, eval, document.write for XSS patterns in real time | | Sensitive Storage Writes | Flags writes of secret-like values to localStorage/sessionStorage |

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, with attribution | 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

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 base sampling rate
  debug: false,               // Log events to console

  // Runtime hooks — monitors innerHTML, eval, document.write, storage writes
  // for XSS patterns and sensitive data exposure. Default: true
  runtimeHooks: true,

  // Plan tier — 'enterprise' disables adaptive sampling (always 100% capture)
  plan: 'free', // 'free' | 'starter' | 'pro' | 'enterprise'

  // 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 (with attribution)
    memoryUsage: false,        // Chrome-only heap monitoring
    resourceTiming: false,     // Slow resource detection
  },
});

API

// Identify user — call after login
prodfix.identifyUser('user_123', {
  email: '[email protected]',
  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();

Framework Adapters

React — Error Boundary

Wrap your app (or any subtree) to catch React render errors and report them to ProdFix:

import { ProdFixErrorBoundary } from '@prodfix/sdk';

function App() {
  return (
    <ProdFixErrorBoundary fallback={<div>Something went wrong.</div>}>
      <YourApp />
    </ProdFixErrorBoundary>
  );
}

Vue 3

import { createApp } from 'vue';
import { prodfix, vueErrorHandler } from '@prodfix/sdk';
import App from './App.vue';

prodfix.init({ key: 'pf_your_key' });

const app = createApp(App);
app.config.errorHandler = vueErrorHandler;
app.mount('#app');

SvelteKit

In src/hooks.client.js:

import { prodfix, svelteErrorHandler } from '@prodfix/sdk';

prodfix.init({ key: 'pf_your_key' });

export const handleError = svelteErrorHandler;

Angular

import { ErrorHandler, NgModule } from '@angular/core';
import { prodfix, angularErrorHandler } from '@prodfix/sdk';

prodfix.init({ key: 'pf_your_key' });

@NgModule({
  providers: [{ provide: ErrorHandler, useValue: angularErrorHandler }],
})
export class AppModule {}

Reliability Features

Offline Queue (IndexedDB)

Events that can't be sent immediately (network down, page closing) are persisted to IndexedDB and retried automatically on the next page load. No events are lost on flaky connections.

Tab-close Delivery (sendBeacon)

On pagehide, any unsent events are flushed using navigator.sendBeacon — which survives tab closes and browser navigation that would abort a normal fetch.

Adaptive Sampling

Under high traffic, the server may return 429 Too Many Requests. The SDK automatically reduces its sampling rate to protect your quota, then gradually recovers as traffic normalizes. Enterprise plan users can disable this with plan: 'enterprise' to always capture 100% of events.

SDK Health Reports

Every hour, the SDK sends an internal sdk_health event with diagnostics: events captured, events dropped (queue full / rate limited / network error), flush success rate, and current sampling factor. These are visible in the SDK Health tab of your ProdFix dashboard.

IDE Integration (MCP)

ProdFix uses Model Context Protocol 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 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?"
• "Show me the last 10 errors for project X"
• "What users were affected by this issue?"
• "Show me the full session timeline for session abc123"

Claude Code

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:

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

Windsurf

Add to ~/.codeium/windsurf/mcp_config.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:

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

Zed

Add to ~/.config/zed/settings.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 | | list_recent_events | Raw events from the last N minutes (filterable by category) | | get_event_detail | Full occurrence detail: stack, browser state, network timeline, console buffer | | get_error_trend | Hourly event volume chart for a project | | search_events | Full-text search across event payloads | | get_affected_users | Users and sessions affected by a specific issue | | get_session_timeline | Chronological event replay for a session | | get_sdk_health | SDK diagnostics: drop rates, sampling factor, flush success rate |

Framework Support

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

• React / Next.js / Remix (with ProdFixErrorBoundary)
• Vue 3 / Nuxt (with vueErrorHandler)
• Svelte / SvelteKit (with svelteErrorHandler)
• Angular (with angularErrorHandler)
• 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 [email protected]
• 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)
• Adaptive sampling automatically reduces capture rate on 429 responses
• API keys are project-scoped, not user-scoped

Changelog

0.8.0

• Full browser context on every error — network timeline (last 10 requests), console buffer (last 30 logs), browser state (viewport, memory, battery, connection) attached to each error report
• Runtime XSS hooks — monitors innerHTML, outerHTML, eval, document.write, Function constructor for XSS patterns; flags sensitive writes to localStorage/cookies
• Framework adapters — ProdFixErrorBoundary (React), vueErrorHandler, svelteErrorHandler, angularErrorHandler
• IndexedDB offline queue — events persisted locally on network failure, replayed on next session
• sendBeacon on tab close — guaranteed delivery on page hide/unload
• Adaptive sampling — automatic rate reduction on 429, gradual recovery; plan: 'enterprise' disables it
• SDK health reports — hourly internal diagnostics visible in dashboard SDK Health tab
• Extended error surface — resource 404s, WebSocket errors, timer errors, SW errors, console.assert failures
• MutationObserver — replaces 30s polling for dynamic iframe/script/form detection

0.7.0

• Initial public release

License

MIT