@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.

UX Monitoring

Real-time UX signals that detect user frustration automatically.

Security Scanning

Performance Monitoring

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: '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();

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:

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 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)
• 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