VS Code Extension: Errors Meet Your Editor

Summary

The Cazon VS Code extension brings production error intelligence directly into your editor. Errors captured by the Cazon SDK appear as red squiggles in your code with pattern-matched suggestions and AI-powered fixes available through lightbulb quick actions. The extension includes a built-in MCP server that automatically exposes your error data to Claude Desktop and other AI assistants, plus a public API that lets GitHub Copilot and Cursor query your error context without leaving the editor. Install once, debug everywhere.

Debugging usually means context switching: check monitoring dashboard for errors, copy stack trace, switch to editor, find the file, locate the line, search for similar issues, ask AI for help, implement fix, deploy, check dashboard again. Each context switch breaks your flow and makes debugging feel like detective work instead of engineering work.

The VS Code extension collapses this workflow. Errors appear directly in your code as diagnostics, with all the enrichment from Cazon's pattern matching and AI analysis available via quick fixes. No dashboard checking, no copy-pasting, no context switching.

How Error Capture Works

The extension doesn't capture errors itself; that's the SDK's job. When you install the Cazon SDK in your project and initialize it, errors get sent to Cazon's API where they're enriched with pattern matching and impact scoring. The VS Code extension then fetches these enriched errors and displays them in your editor.

The flow looks like this:

Runtime error occurs in your application (Node.js, React, etc.)
SDK captures error with context: stack trace, environment, user data
Cazon API enriches with pattern matching and impact score
VS Code extension fetches enriched error via API
Diagnostic appears as red squiggle in your code at the exact line
Quick fixes available via lightbulb (Cmd+. or Ctrl+.)

This means you need both pieces: the SDK installed in your project to capture errors, and the extension installed in VS Code to display them. The SDK can be used without the extension (you'll see errors in the dashboard), but the extension requires the SDK to have data to display.

Diagnostic Provider: Red Squiggles in Your Code

VS Code's diagnostic system is what powers red squiggles for TypeScript errors, ESLint warnings, and other code issues. Cazon plugs into this same system with a DiagnosticProvider that adds production errors as diagnostics.

When an error is captured and enriched, the extension:

Parses the stack trace to find the exact file and line number
Creates a VS Code diagnostic at that location
Sets the severity based on impact score (Error for critical, Warning for others)
Attaches the enriched context (pattern match, suggestion, occurrence count)

The diagnostic appears immediately in three places:

Red squiggle in the editor on the error line
Problems panel with full error details
File explorer with warning icon on affected files

This gives you the same visibility into production errors that you have for TypeScript errors or linting issues. Errors become first-class citizens in your editor, not afterthoughts you check in a separate dashboard.

Code Action Provider: Quick Fixes via Lightbulb

The lightbulb quick fix menu in VS Code is one of its most powerful features. When you see a TypeScript error, you press Cmd+. and get "Add missing import" or "Convert to async function." Cazon uses the same mechanism for production errors.

When you have a diagnostic from a production error, the CodeActionProvider offers these quick actions:

1. View AI Suggestion
Opens a panel with the full pattern-matched suggestion or AI-generated fix. This includes the error explanation, suggested code changes, and context about why this error matters (impact score, affected users, trend).

2. Copy Suggested Fix
Copies the suggested code to your clipboard so you can paste it directly.

3. View Similar Errors
Shows other times this error pattern has occurred in your codebase, helping you understand if it's a recurring issue.

4. Open in Dashboard
Takes you to the full error details in the Cazon dashboard where you can see team context, add comments, or mark as resolved.

These quick actions mean you can go from seeing a red squiggle to implementing a fix in seconds, without leaving VS Code or breaking your flow.

Built-in MCP Server

The extension includes a Model Context Protocol server that runs automatically when VS Code is open. This exposes your error intelligence to AI assistants like Claude Desktop without any additional configuration beyond what you've already done for the extension.

The MCP server shares your API key with the extension, so there's no separate setup. Once you configure the extension, Claude Desktop (if you've configured it to use the Cazon MCP server) can immediately query your workspace errors.

What the MCP server exposes:

Resources:

cazon://vscode/history - Recent errors from your current workspace
cazon://vscode/current - Unresolved errors still present in code
cazon://vscode/patterns - Common patterns detected across errors

Tools:

cazon_analyze_error - Get debugging suggestions for a specific error
cazon_get_workspace_errors - List all errors in current workspace
cazon_find_similar_errors - Search for related errors in history

This means Claude can answer questions like "what errors are affecting my checkout flow?" or "find similar database timeout errors" by querying your local VS Code workspace directly. The MCP server acts as a bridge between your editor state and AI assistants.

Public API for Extension Integration

Beyond the built-in UI and MCP server, the extension exposes a public API that other extensions can use to query error data. This is specifically designed for AI coding assistants like GitHub Copilot, Cursor, and Continue.dev.

The API provides:

interface CazonAPI {
  getErrors(filters?: ErrorFilters): Promise<EnrichedError[]>;
  getErrorsByFile(filePath: string): Promise<EnrichedError[]>;
  getErrorsByPattern(pattern: string): Promise<EnrichedError[]>;
  analyzeError(errorId: string): Promise<ErrorAnalysis>;
}

This lets other extensions ask questions like:

"What errors exist in the file I'm currently editing?"
"What are the highest impact errors in this workspace?"
"Find all TypeError patterns across the codebase"

GitHub Copilot can use this API to understand production context when generating code. Cursor can use it to prioritize which bugs to fix. Continue.dev can use it to suggest relevant documentation based on error patterns. The extension becomes infrastructure that other tools build on.

Configuration and Settings

The extension has minimal configuration by design. The main setup is your API key:

Cazon: Configure API Key (Cmd+Shift+P)

Additional settings:

Auto-sync interval - How often to fetch new errors (default: 5 minutes)
Impact threshold - Minimum impact score to show diagnostics (default: 30)
Notification preferences - Show toast notifications for new critical errors
MCP server enabled - Toggle built-in MCP server (default: true)

Most users never touch these settings. The extension works with defaults for 95% of use cases.

Why In-Editor Matters

There's something fundamentally different about seeing errors in your editor versus a separate dashboard. When errors are in your code:

1. Errors become part of your workflow, not a separate task. You're already in VS Code writing code; fixing an error is just another quick fix like adding an import or formatting code.

2. Context is preserved. You can see the error in the context of surrounding code, making it obvious what's happening. Stack traces in dashboards require mental reconstruction of where this code lives.

3. Quick fixes are immediate. Press Cmd+., implement the suggested fix, done. No copying suggestions from a browser, no remembering what the fix was while you navigate to the file.

4. AI assistants have context automatically. When Copilot or Claude can query errors from the extension API, they understand production reality without you explaining it. The editor becomes the single source of truth.

This is why we built the extension even though we have a dashboard and MCP server. Different contexts need different tools, and for developers who live in VS Code, the editor is where errors belong.

Getting Started

Install the Cazon SDK in your project: npm install @cazon/sdk
Initialize the SDK in your app entry point (see SDK docs)
Install the VS Code extension from the marketplace
Configure your API key via Command Palette: Cazon: Configure API Key
Run your app and trigger some errors to see them appear in VS Code

The extension works immediately once configured. Errors captured by the SDK will appear as diagnostics in your editor within a few seconds.

What's Next

The VS Code extension brings error intelligence into your editor as diagnostics and quick fixes. The MCP server makes that same intelligence available to AI assistants. And the public API lets other extensions consume error context. Together, these create an infrastructure where production errors are available everywhere developers work.

But there's another layer of intelligence we haven't covered yet: team patterns. When your team fixes errors, marks them as resolved, or documents solutions, that knowledge becomes part of the error intelligence available to everyone else. Junior developers can learn from senior developers' fixes without asking for help.

Next, we'll explore how team intelligence helps scale debugging knowledge across your organization.

This is Post 8 of our launch series on error intelligence. Follow along as we unpack the problem, introduce solutions, and show you how Cazon is building the missing intelligence layer between production errors and AI coding assistants.

Next: Post 9 - Team Intelligence: Learning From Each Other →