🩺 HealCode Client

Automatic error detection and AI-powered fix generation for your frontend projects

HealCode automatically captures runtime errors, analyzes your codebase, and generates fixes using AI. It supports Angular, React, Vue, and vanilla JavaScript projects.

✨ Features

• 🔍 Automatic Error Detection — Captures runtime errors, unhandled promises, and HTTP failures
• 🤖 AI-Powered Fixes — Multi-agent system analyzes your code and generates patches
• 🌐 Multi-Framework Support — Works with Angular, React, Vue, and vanilla JS
• 📊 Error Trace Visualization — See the full call chain and affected files
• 🔄 Auto Pull Requests — Fixes are submitted as PRs to your repository
• 🍞 Breadcrumb Tracking — User actions trail for better debugging context

🚀 Quick Start

Installation

npm install healcode-client

Basic Usage (Vanilla JS)

import HealCode from 'healcode-client';

HealCode.init({
  token: 'your-integration-token',
  endpoint: 'https://api.healcode.io/api/logs/',
  environment: 'production'
});

That's it! HealCode will now automatically capture and report errors.

📚 Framework-Specific Guides

Choose your framework for detailed integration instructions:

• Angular — ErrorHandler, HttpInterceptor, Router integration
• React — ErrorBoundary, hooks, React Router integration
• Vue — Plugin, errorHandler, Vue Router integration
• WordPress — PHP plugin for WordPress sites
• CDN / Script Tag — No build tools required

⚙️ Configuration Options

interface HealCodeConfig {
  token: string;                    // Required: Your integration token
  endpoint?: string;                // API endpoint (default: production)
  environment?: string;             // 'development' | 'production' | 'staging'
  enabled?: boolean;                // Enable/disable tracking (default: true)
  captureConsoleErrors?: boolean;   // Capture console.error calls (default: true)
  captureUnhandledRejections?: boolean; // Capture promise rejections (default: true)
  captureHttpErrors?: boolean;      // Capture HTTP 4xx/5xx (default: true)
  captureBreadcrumbs?: boolean;     // Track user actions (default: true)
  maxBreadcrumbs?: number;          // Max breadcrumbs to keep (default: 50)
  beforeSend?: (error: ErrorPayload) => ErrorPayload | null; // Filter/modify errors
  onError?: (error: ErrorPayload) => void; // Error callback
}

🎯 Advanced Usage

Filtering Errors

HealCode.init({
  token: 'your-token',
  beforeSend: (error) => {
    // Don't send errors from third-party scripts
    if (error.stacktrace?.includes('google-analytics')) {
      return null;
    }
    
    // Add custom data
    error.customData = {
      userId: getCurrentUserId(),
      feature: 'checkout'
    };
    
    return error;
  }
});

Manual Error Reporting

try {
  riskyOperation();
} catch (error) {
  HealCode.captureException(error, {
    level: 'error',
    tags: { feature: 'payment' }
  });
}

Adding Context

// Add user context
HealCode.setUser({
  id: '12345',
  email: '[email protected]',
  username: 'john_doe'
});

// Add custom tags
HealCode.setTags({
  version: '2.1.0',
  feature: 'checkout'
});

// Add breadcrumb manually
HealCode.addBreadcrumb({
  message: 'User clicked checkout button',
  category: 'user-action',
  level: 'info'
});

🔧 CLI Tool

HealCode includes a CLI for project setup:

# Interactive setup
npx healcode init

# Generate integration token
npx healcode token:generate

# Test connection
npx healcode test

📦 Package Exports

The package provides multiple entry points for tree-shaking:

// Core (framework-agnostic)
import HealCode from 'healcode-client';

// Framework-specific adapters
import { AngularAdapter } from 'healcode-client/angular';
import { ReactAdapter, ErrorBoundary } from 'healcode-client/react';
import { VueAdapter } from 'healcode-client/vue';

// UMD build for CDN
<script src="https://unpkg.com/healcode-client/dist/healcode.umd.global.js"></script>

🌍 Browser Support

• Chrome/Edge: Last 2 versions
• Firefox: Last 2 versions
• Safari: Last 2 versions
• iOS Safari: Last 2 versions
• Android Chrome: Last 2 versions

🔒 Privacy & Security

• Error data is encrypted in transit (HTTPS)
• Sensitive data can be filtered using beforeSend
• Source maps are optional and stored securely
• GDPR compliant

📖 Documentation

• Getting Started Guide
• API Reference
• Dashboard Guide
• Troubleshooting

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © HealCode Team

🆘 Support

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues
• 📚 Docs: docs.healcode.io

Made with ❤️ by the HealCode Team