Console Maven Widgets Documentation

Complete integration guide for adding real-time error tracking, performance monitoring, and AI-powered debugging to your web applications in under 60 seconds.

Overview

Console Maven Widgets provide a comprehensive suite of debugging and monitoring tools that seamlessly integrate into your website. From real-time error tracking to AI-powered code suggestions, our widgets help you catch bugs before your users do.

Getting Started

Follow these three simple steps to integrate Console Maven into your website:

Step 1: Get Your API Key

Sign up for free using your GitHub account. Once registered, you'll receive your unique API key from the dashboard. The free tier includes 100 error captures per day—perfect for personal projects.

Step 2: Choose Your Installation Method

Select the integration approach that best fits your workflow. We support script tag inclusion, NPM packages, and even Claude AI-powered integration prompts.

Step 3: Configure and Deploy

Customize widget behavior, choose which widgets to display, and deploy. Our widgets automatically start capturing errors and performance metrics.

Installation Methods

Console Maven supports multiple installation methods to fit different development workflows. Choose the approach that works best for your project:

Method 1: Script Tag Installation

The fastest way to get started. Perfect for static sites, WordPress, or quick prototypes. Add this snippet to your HTML before the closing </body> tag:

<!-- Add before closing </body> tag -->
<script src="https://console-maven-frontend.fly.dev/latest/console-maven.min.js"
        data-api-key="YOUR_API_KEY"
        data-auto-render="true"></script>

Advanced Script Configuration

You can configure widgets directly via data attributes for zero-JavaScript setup:

<script src="https://console-maven-frontend.fly.dev/latest/console-maven.min.js"
        data-api-key="YOUR_API_KEY"
        data-auto-render="true"
        data-widgets="footer,stats,chat"
        data-theme="dark"
        data-position="bottom"
        data-collapsed="false"></script>

Method 2: NPM Package Installation

For modern JavaScript applications using React, Vue, Angular, or vanilla JS with a build system. Provides TypeScript definitions and tree-shaking support.

Installation

# Using npm
npm install @console-maven/widgets

# Using yarn
yarn add @console-maven/widgets

# Using pnpm
pnpm add @console-maven/widgets

Basic Usage

import ConsoleMaven from '@console-maven/widgets';

// Initialize with your API key
ConsoleMaven.init({
  apiKey: 'YOUR_API_KEY',
  widgets: ['footer', 'stats', 'chat'],
  theme: 'dark'
});

// Start capturing errors
ConsoleMaven.startCapture();

TypeScript Support

import ConsoleMaven, { ConsoleMavenConfig, Widget } from '@console-maven/widgets';

const config: ConsoleMavenConfig = {
  apiKey: process.env.CONSOLE_MAVEN_API_KEY!,
  widgets: ['footer', 'stats'] as Widget[],
  theme: 'dark',
  onError: (error) => {
    console.log('Error captured:', error);
  }
};

ConsoleMaven.init(config);

Method 3: Claude AI Integration Prompts New

Use AI-powered prompts to integrate Console Maven into your codebase automatically. Claude will analyze your project structure and add the appropriate configuration.

For React Projects

Install Console Maven widgets in my React app. Use these settings:
- API Key: YOUR_API_KEY
- Widgets: footer, stats, chat
- Theme: dark
- Initialize in App.tsx or main entry point
- Add TypeScript types

For Next.js Projects

Add Console Maven to my Next.js 14 app with app router:
- API Key: YOUR_API_KEY
- Configure in layout.tsx for global usage
- Enable server-side error tracking
- Add client component wrapper for widgets

For Static Sites

Add Console Maven script tag to all HTML pages in my static site:
- API Key: YOUR_API_KEY
- Auto-render the footer widget
- Place before closing body tag
- Find all .html files and update them

Configuration Options

Customize Console Maven's behavior with these configuration options. All settings are optional and fall back to sensible defaults.

ConsoleMaven.init({
  // Required: Your API key
  apiKey: 'YOUR_API_KEY',

  // Optional: Widget selection
  widgets: ['footer', 'stats', 'chat', 'toolbar'],

  // Optional: Theme (dark or light)
  theme: 'dark',

  // Optional: Initial collapsed state
  collapsed: false,

  // Optional: Widget position (bottom or top)
  position: 'bottom',

  // Optional: Auto-start error capture
  autoCapture: true,

  // Optional: Sample rate (0.0 to 1.0)
  sampleRate: 1.0,

  // Optional: Error callback
  onError: (error) => {
    console.log('Error captured:', error);
  },

  // Optional: Custom metadata
  metadata: {
    environment: 'production',
    version: '1.2.3',
    userId: 'user_123'
  }
});

Configuration Reference

Available Widgets

Console Maven offers four specialized widgets, each designed for specific debugging and monitoring needs:

1. Footer Widget

The flagship DebugFooter widget displays real-time errors at the bottom of your page. It's non-intrusive, collapsible, and provides instant error notifications.

• Features: Error count badge, expandable error list, stack traces, one-click error clearing
• Best For: Production sites, staging environments, development debugging
• Availability: All tiers

2. Stats Widget

Performance monitoring overlay showing page load time, memory usage, and network metrics. Helps identify performance bottlenecks in real-time.

• Features: FPS counter, memory usage, DOM node count, network request timing
• Best For: Performance optimization, load testing, debugging slow pages
• Availability: Pro tier and above

3. Chat Widget Pro

AI-powered chat interface that provides intelligent debugging suggestions, code fixes, and error explanations. Powered by advanced language models.

• Features: Context-aware suggestions, code fix generation, error explanation, documentation links
• Best For: Complex debugging sessions, learning from errors, rapid problem-solving
• Availability: Pro tier and above

4. Toolbar Widget

Compact toolbar with quick access to all Console Maven features. Includes shortcuts for clearing errors, toggling widgets, and accessing the dashboard.

• Features: One-click widget toggles, dashboard link, error export, theme switcher
• Best For: Power users, development teams, integrated workflows
• Availability: All tiers

API Reference

Client-Side JavaScript API

The ConsoleMaven global object provides methods for programmatic control:

// Initialize (must be called first)
ConsoleMaven.init(config);

// Start/stop error capture
ConsoleMaven.startCapture();
ConsoleMaven.stopCapture();

// Manually capture an error
ConsoleMaven.captureError(error, metadata);

// Show/hide widgets
ConsoleMaven.showWidget('footer');
ConsoleMaven.hideWidget('footer');
ConsoleMaven.toggleWidget('footer');

// Clear captured errors
ConsoleMaven.clearErrors();

// Get current configuration
const config = ConsoleMaven.getConfig();

// Update configuration
ConsoleMaven.updateConfig({ theme: 'light' });

// Destroy and cleanup
ConsoleMaven.destroy();

HTTP API Endpoints

Send errors and metrics directly to Console Maven's backend API:

Capture Error

POST /widgets/api/capture
Content-Type: application/json

{
  "apiKey": "cm_xxx",
  "error": {
    "message": "TypeError: Cannot read property 'x' of undefined",
    "stack": "Error: Cannot read property 'x' of undefined\n    at app.js:42:15",
    "line": 42,
    "column": 15,
    "filename": "app.js"
  },
  "metadata": {
    "url": "https://example.com/page",
    "userAgent": "Mozilla/5.0...",
    "timestamp": "2026-02-12T12:00:00Z",
    "environment": "production"
  }
}

Validate API Key

GET /widgets/api/validate-key?key=cm_xxx

Response:
{
  "valid": true,
  "tier": "pro",
  "limits": {
    "daily": 10000,
    "remaining": 9847
  }
}

Framework-Specific Examples

React Integration

import { useEffect } from 'react';
import ConsoleMaven from '@console-maven/widgets';

function App() {
  useEffect(() => {
    ConsoleMaven.init({
      apiKey: process.env.REACT_APP_CONSOLE_MAVEN_KEY!,
      widgets: ['footer', 'stats'],
      theme: 'dark',
      metadata: {
        environment: process.env.NODE_ENV
      }
    });

    return () => {
      ConsoleMaven.destroy();
    };
  }, []);

  return 
{/* Your app */}
;
}

export default App;

Vue 3 Integration

import { createApp } from 'vue';
import ConsoleMaven from '@console-maven/widgets';
import App from './App.vue';

const app = createApp(App);

// Initialize Console Maven
ConsoleMaven.init({
  apiKey: import.meta.env.VITE_CONSOLE_MAVEN_KEY,
  widgets: ['footer', 'toolbar'],
  theme: 'dark'
});

// Add error handler
app.config.errorHandler = (err, instance, info) => {
  ConsoleMaven.captureError(err, { info, component: instance?.$options.name });
};

app.mount('#app');

Next.js 14 (App Router) Integration

// app/console-maven-provider.tsx
'use client';

import { useEffect } from 'react';
import ConsoleMaven from '@console-maven/widgets';

export function ConsoleMavenProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    ConsoleMaven.init({
      apiKey: process.env.NEXT_PUBLIC_CONSOLE_MAVEN_KEY!,
      widgets: ['footer', 'stats', 'chat'],
      theme: 'dark'
    });
  }, []);

  return <>{children};
}

// app/layout.tsx
import { ConsoleMavenProvider } from './console-maven-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
          {children}
        
      
    
  );
}

Angular Integration

import { ErrorHandler, Injectable } from '@angular/core';
import ConsoleMaven from '@console-maven/widgets';

// Initialize in main.ts
ConsoleMaven.init({
  apiKey: environment.consoleMavenApiKey,
  widgets: ['footer', 'stats'],
  theme: 'dark'
});

// Custom error handler
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: Error) {
    ConsoleMaven.captureError(error, {
      angular: true,
      timestamp: new Date().toISOString()
    });
    console.error('Error captured:', error);
  }
}

// Add to app.module.ts providers
providers: [
  { provide: ErrorHandler, useClass: GlobalErrorHandler }
]

Svelte Integration

// src/App.svelte
<script>
  import { onMount, onDestroy } from 'svelte';
  import ConsoleMaven from '@console-maven/widgets';

  onMount(() => {
    ConsoleMaven.init({
      apiKey: import.meta.env.VITE_CONSOLE_MAVEN_KEY,
      widgets: ['footer'],
      theme: 'dark'
    });
  });

  onDestroy(() => {
    ConsoleMaven.destroy();
  });
</script>

<main>
  <!-- Your app -->
</main>

Security Best Practices New

Protect your API keys and user data with these security recommendations:

1. Protect Your API Keys

# .env file (add to .gitignore)
CONSOLE_MAVEN_API_KEY=cm_your_key_here
REACT_APP_CONSOLE_MAVEN_KEY=cm_your_key_here
NEXT_PUBLIC_CONSOLE_MAVEN_KEY=cm_your_key_here

2. Use Domain Restrictions

Configure domain allowlists in your Console Maven dashboard to prevent API key misuse. Only requests from approved domains will be accepted.

3. Sanitize Error Data

Avoid capturing sensitive user data in error messages. Use our sanitization hooks:

ConsoleMaven.init({
  apiKey: 'YOUR_API_KEY',
  onError: (error) => {
    // Sanitize before sending
    const sanitized = {
      ...error,
      message: error.message.replace(/password=\w+/gi, 'password=[REDACTED]'),
      stack: error.stack.replace(/api_key=\w+/gi, 'api_key=[REDACTED]')
    };
    return sanitized;
  }
});

4. Enable HTTPS Only

Console Maven enforces HTTPS for all API requests. Ensure your site uses HTTPS to protect data in transit.

5. Set Up Rate Limiting

Use the sampleRate option to reduce error volume from high-traffic sites:

ConsoleMaven.init({
  apiKey: 'YOUR_API_KEY',
  sampleRate: 0.1  // Capture only 10% of errors
});

Troubleshooting New

Common issues and their solutions:

Widget Not Appearing

Problem: The widget doesn't show up on your page.

Solutions:

• Verify your API key is correct and valid
• Check browser console for initialization errors
• Ensure data-auto-render="true" is set (script tag method)
• Call ConsoleMaven.init() explicitly (NPM method)
• Check for z-index conflicts with other page elements

// Enable debug mode to see detailed logs
ConsoleMaven.init({
  apiKey: 'YOUR_API_KEY',
  debug: true  // Shows initialization and error capture logs
});

Errors Not Being Captured

Problem: JavaScript errors aren't showing up in the widget.

Solutions:

• Ensure autoCapture: true is set (default)
• Check if you've hit your daily rate limit
• Verify errors occur after widget initialization
• Check network tab for failed API requests
• Try manually capturing an error: ConsoleMaven.captureError(new Error('test'))

TypeScript Type Errors

Problem: TypeScript can't find Console Maven types.

Solution:

// Add to tsconfig.json
{
  "compilerOptions": {
    "types": ["@console-maven/widgets"]
  }
}

// Or add type declaration
declare module '@console-maven/widgets' {
  export interface ConsoleMavenConfig {
    apiKey: string;
    widgets?: string[];
    theme?: 'dark' | 'light';
    // ... other options
  }

  const ConsoleMaven: {
    init(config: ConsoleMavenConfig): void;
    // ... other methods
  };

  export default ConsoleMaven;
}

Performance Issues

Problem: Page feels sluggish after adding Console Maven.

Solutions:

• Reduce sample rate: sampleRate: 0.5
• Disable stats widget in production
• Use async script loading: <script async src="...">
• Lazy load the widget after page load

CORS Errors

Problem: Browser shows CORS policy errors.

Solution: Console Maven's API supports all origins. If you see CORS errors, check that you're not blocking third-party requests or using an incorrect API endpoint.

Chat Widget Not Responding Pro

Problem: AI chat doesn't respond to messages.

Solutions:

• Verify you're on Pro or Team tier
• Check your AI credits balance in the dashboard
• Ensure you have an active internet connection
• Try refreshing the page

Rate Limits

Console Maven enforces rate limits based on your subscription tier to ensure system stability and fair usage:

Handling Rate Limits

When you exceed your rate limit, the API returns a 429 status code. Implement exponential backoff or reduce your sample rate:

ConsoleMaven.init({
  apiKey: 'YOUR_API_KEY',
  onError: (error) => {
    // Check if we're approaching rate limit
    if (ConsoleMaven.getRemainingQuota() < 10) {
      // Reduce sampling
      ConsoleMaven.updateConfig({ sampleRate: 0.1 });
    }
  }
});

Support

Need help? We're here for you:

• Email Support: support@consolegentic.com
• Documentation: You're reading it! Bookmark this page for reference
• Dashboard: View your metrics and manage API keys
• Status Page: Check system status
• GitHub Issues: Report bugs at github.com/console-maven/widgets

Community Resources

• Example Projects: Browse integration examples on our GitHub
• Blog: Tips, tutorials, and best practices
• Changelog: Stay updated with new features and fixes