Skip to content

ajeeshworkspace/uncaught

Uncaught

npm version License: MIT CI

Your AI coding assistant catches and fixes your bugs automatically.

Uncaught captures errors locally and feeds them to Cursor, Claude Code, or Windsurf via MCP. You never open a dashboard — your AI already knows what broke and how to fix it.

Setup (30 seconds)

Step 1 — Add MCP to your AI tool

Cursor — add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "uncaught": {
      "command": "npx",
      "args": ["-y", "@uncaughtdev/core", "uncaught-mcp"]
    }
  }
}

Claude Code — run once:

claude mcp add uncaught -- npx -y @uncaughtdev/core uncaught-mcp

Windsurf — add to ~/.windsurf/mcp.json (same format as Cursor)

Claude Desktop — add to claude_desktop_config.json (same format as Cursor)

Step 2 — Tell your AI to set it up

"Set up error monitoring in my project"

Your AI calls the setup_uncaught tool, which auto-detects your framework (React, Next.js, Vite, Express, etc.), installs packages, and patches your entry files.

That's it. Errors are now captured automatically.

How It Works

  1. Your app throws — Uncaught captures the error with full context (stack trace, breadcrumbs, environment)
  2. Stored locally — Everything goes to .uncaught/ on your machine. Nothing leaves your laptop.
  3. Come back and ask your AI — "Any bugs?" — it reads the errors via MCP, understands the context, and writes the fix

What Your AI Can Do

Tool What it does
setup_uncaught Install Uncaught in your project (auto-detects framework)
list_errors See all errors at a glance, filter by status or environment
get_error Full details: stack trace, breadcrumbs, environment, request context
get_fix_prompt AI-ready diagnosis with everything needed to fix the bug
get_stats Dashboard numbers: total, open, resolved, ignored
resolve_error Mark a bug as fixed after you ship the fix
search_errors Find errors by message text

Everything It Captures

  • Browser errors, unhandled rejections, failed fetch & XHR requests
  • React component errors via Error Boundary (with user feedback widget)
  • Event handler errors (onClick, onChange) via useErrorHandler hook
  • DOM breadcrumbs: clicks, navigation, API calls
  • Web Vitals: LCP, FID, CLS, FCP, TTFB (zero dependencies)
  • Server-side: Node.js process errors, Express middleware, Fastify plugin
  • Source-mapped production stack traces
  • Release versions and deployment environments
  • Supabase failed queries with RLS explanations

Packages

JavaScript / TypeScript (npm)

Package Description
@uncaughtdev/core Core engine + MCP server + CLI + dashboard
@uncaughtdev/react React/Next.js — Provider, Error Boundary, Web Vitals
@uncaughtdev/vue Vue 3 — Plugin, composables, router integration
@uncaughtdev/svelte Svelte/SvelteKit — error hooks, client setup
@uncaughtdev/angular Angular — ErrorHandler, HttpInterceptor, NgModule
@uncaughtdev/supabase Supabase — query tracking, RLS explainer
@uncaughtdev/prisma Prisma — middleware for error capture + breadcrumbs
@uncaughtdev/drizzle Drizzle — query wrapper with error capture

Backend SDKs

Language Package Install
Python uncaughtdev pip install uncaughtdev
Go uncaught-go go get github.com/ajeeshworkspace/uncaught/packages/go
Ruby uncaught gem install uncaught
Rust uncaught cargo add uncaught
Java uncaught-java See packages/java/
PHP uncaughtdev/uncaught See packages/php/
Elixir uncaught See packages/elixir/
C#/.NET Uncaught See packages/dotnet/

Framework Integrations

SDK Frameworks
Python FastAPI, Flask, Django, SQLAlchemy
Go net/http, Gin, Echo, Fiber
Ruby Rails (Railtie), Sinatra
Java Spring Boot (auto-config + filter)
Rust Axum, Actix (feature flags)
PHP Laravel (ServiceProvider + Middleware)
Elixir Phoenix, Plug
C#/.NET ASP.NET Core middleware

Manual Installation

If you prefer to set things up manually instead of using the MCP setup_uncaught tool:

npx uncaughtdev init

This auto-detects your framework, installs packages, and patches entry files. Or install manually:

npm install @uncaughtdev/core @uncaughtdev/react
Configuration
import { initUncaught } from '@uncaughtdev/core';

const client = initUncaught({
  projectKey: 'my-app',
  environment: 'production',
  release: '1.2.0',
  webhookUrl: 'https://hooks.slack.com/services/...',
  transport: 'local',
  maxBreadcrumbs: 30,
  maxEventsPerMinute: 30,
  ignoreErrors: ['ResizeObserver'],
  sanitizeKeys: ['secret'],
  beforeSend: (event) => {
    if (event.error.message.includes('benign')) return null;
    return event;
  },
});
React / Next.js
import { UncaughtProvider, UncaughtErrorBoundary } from '@uncaughtdev/react';

function App() {
  return (
    <UncaughtProvider projectKey="my-app" environment="production" release="1.2.0">
      <UncaughtErrorBoundary showDialog>
        <MyApp />
      </UncaughtErrorBoundary>
    </UncaughtProvider>
  );
}

Error Boundary with Feedback — When showDialog is enabled, users see a feedback form asking "What were you doing when this happened?" — their response is attached to the error.

Event Handler Capture — React Error Boundary doesn't catch onClick/onChange errors. Use useErrorHandler:

import { useErrorHandler } from '@uncaughtdev/react';

function MyComponent() {
  const handleClick = useErrorHandler(() => {
    riskyOperation(); // Errors captured automatically
  });
  return <button onClick={handleClick}>Click</button>;
}

HooksuseUncaught(), useReportError(), useBreadcrumb(), withErrorCapture()

Server-Side (Node.js / Express / Fastify)
import { initUncaught, setupNodeHandlers, expressErrorHandler } from '@uncaughtdev/core';

const client = initUncaught({ projectKey: 'my-api' });

// Capture uncaughtException and unhandledRejection
setupNodeHandlers(client);

// Express (register AFTER all routes)
app.use(expressErrorHandler(client));

Fastify:

import { fastifyErrorPlugin } from '@uncaughtdev/core';
fastify.register(fastifyErrorPlugin(client));
CLI
npx uncaughtdev                # List all captured issues
npx uncaughtdev show 1         # View fix prompt for issue #1
npx uncaughtdev show 1 --open  # Open in your editor
npx uncaughtdev resolve 1      # Mark as resolved
npx uncaughtdev clear          # Clear all issues
npx uncaughtdev dashboard      # Open web dashboard
Web Dashboard
npx uncaughtdev dashboard

Opens a local web UI at http://localhost:3300 with:

  • Error list with status/environment filtering
  • Release badges and environment tags
  • Full stack traces with source map resolution
  • User feedback display
  • AI-ready fix prompts to copy-paste
Webhooks

Get notified on new errors:

initUncaught({
  webhookUrl: 'https://hooks.slack.com/services/T00/B00/xxx',
});

Fires once per unique error. Works with Slack, Discord, or any HTTP endpoint.

Source Maps

Production stack traces are automatically resolved when .map files exist in .next/, dist/, or build/. No configuration needed.

Contributing

See CONTRIBUTING.md for development setup and guidelines.

Roadmap

  • Vue / Svelte / Angular adapters
  • Prisma / Drizzle DB wrappers
  • Python, Go, Ruby, Java, Rust, PHP, Elixir, C#/.NET SDKs
  • Remote transport (hosted endpoint)
  • Hosted dashboard (SaaS)
  • AI auto-fix suggestions

License

MIT

About

Error monitoring for vibe coders. One command setup. AI-ready fix prompts.

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors