@idliapam/glitch-widget

AI-powered bug reporting for web apps. Your users speak for 5 seconds. AI triages, suggests fixes, and notifies your team — before the customer churns.

The Problem

Every bug report your users submit is incomplete. They say "it's broken" but don't tell you what browser they're on, what they clicked, or what error the console shows. Your team spends more time reproducing bugs than fixing them.

Meanwhile, 68% of users who hit a bug leave your product forever without reporting anything.

The Solution

Glitch is a lightweight JavaScript widget that embeds a bug report button in your app. When a user clicks it:

1. Screenshot is captured automatically — no manual screenshot needed
2. Console errors are collected — JavaScript errors, unhandled promise rejections
3. Network failures are logged — failed API calls with status codes
4. Browser context is captured — URL, viewport size, user agent, timestamp
5. User submits in 5 seconds — just a title and optional description

On the cloud version, AI then:

• Auto-generates bug severity (critical/high/medium/low)
• Suggests steps to reproduce from the technical data
• Recommends a fix based on similar resolved bugs
• Notifies your team on Slack/WhatsApp in real-time

Quick Start

Option 1: Script Tag (30 seconds)

<script src="https://unpkg.com/@idliapam/glitch-widget"></script>
<script>
  Glitch.init({ apiKey: 'YOUR_API_KEY' });
</script>

Option 2: NPM (React, Vue, Angular, Svelte)

npm install @idliapam/glitch-widget

import { Glitch } from '@idliapam/glitch-widget';

Glitch.init({
  apiKey: 'YOUR_API_KEY',
  user: { id: '123', email: '[email protected]', name: 'John' },
});

A floating bug button appears in the corner of your app. That's it.

What Gets Captured Automatically

| Data | How | |------|-----| | Screenshot | Canvas-based capture of the current viewport | | Console errors | Intercepts console.error, window.onerror, unhandled promise rejections | | Network errors | Intercepts fetch() and logs failed requests (status, URL, timestamp) | | Page URL | Current window.location.href | | Browser info | User agent, viewport width/height | | Timestamp | ISO 8601 timestamp of when the bug was reported | | Custom metadata | Any key-value pairs you attach (user ID, app version, feature flags) |

Configuration

Glitch.init({
  // Required
  apiKey: 'YOUR_API_KEY',

  // Widget appearance
  position: 'bottom-right',       // bottom-right | bottom-left | top-right | top-left
  color: '#7C3AED',               // Button color (any hex)

  // Data collection
  collectConsole: true,            // Capture console.error logs
  collectNetwork: true,            // Capture failed fetch requests

  // User identification (optional but recommended)
  user: {
    id: '123',
    email: '[email protected]',
    name: 'John Doe',
  },

  // Custom metadata (optional)
  metadata: {
    page: 'checkout',
    appVersion: '2.1.0',
    plan: 'pro',
    featureFlags: { newCheckout: true },
  },

  // Callbacks
  onSubmit: (bug) => console.log('Bug submitted:', bug),
  onError: (error) => console.error('Glitch error:', error),

  // Self-host endpoint (optional)
  endpoint: 'https://your-server.com/api/v1/glitch/bugs',
});

Self-Hosting (Free Forever)

Glitch is open-source. You can self-host the backend:

docker run -p 3000:3000 idliappam/glitch-server

Then point the widget to your server:

Glitch.init({
  apiKey: 'any-key',
  endpoint: 'https://your-server.com/api/v1/glitch/bugs',
});

Self-hosted version includes: bug collection, dashboard, basic triage. Free forever for 1 user, 1 project.

Cloud Version (AI Features)

Get your API key at glitch.idliapam.in

Cloud adds:

• AI Bug Triage — auto-severity, auto-title, steps to reproduce
• AI Fix Suggestions — suggests the exact code fix
• Voice Recording — users speak instead of typing
• Session Replay — watch what the user did before the bug
• Integrations — Jira, Linear, GitHub, Slack, WhatsApp, Discord, Asana, Trello
• Team Dashboard — assign, prioritize, track resolution time
• Gamification — leaderboard for bug reporters and fixers
• Customer Portal — users track their reported bugs

Why Glitch vs Alternatives

| Feature | Glitch | Marker.io | BugHerd | Jam.dev | |---------|--------|-----------|---------|---------| | AI Bug Triage | Yes | No | No | No | | AI Fix Suggestion | Yes | No | No | No | | Voice Recording | Yes | No | No | No | | WhatsApp Alerts | Yes | No | No | No | | Framework State Capture | Yes | No | No | No | | Screenshot + Annotation | Yes | Yes | Yes | Yes | | Console/Network Logs | Yes | Yes | No | Yes | | Chrome Extension | Yes | Yes | No | Yes | | Self-Host Option | Yes | No | No | No | | Open Source Widget | Yes | No | No | No | | Starting Price | ₹2,499/mo | $39/mo | $50/mo | $59/mo |

Use Cases

• SaaS Products — Let users report bugs without leaving your app
• E-commerce — Catch checkout bugs before customers abandon cart
• Mobile Web Apps — Capture device-specific rendering issues
• Internal Tools — QA team reports bugs with full technical context
• Client Projects — Clients report issues on staging with screenshots
• Beta Testing — Collect structured feedback from early adopters

API Reference

Glitch.init(config)

Initialize the widget with configuration options.

Glitch.destroy()

Remove the widget from the page.

GlitchWidget class

For advanced usage, instantiate directly:

import { GlitchWidget } from '@idliapam/glitch-widget';
const widget = new GlitchWidget({ apiKey: 'xxx' });
widget.destroy();

Framework Examples

React

import { useEffect } from 'react';
import { Glitch } from '@idliapam/glitch-widget';

function App() {
  useEffect(() => {
    Glitch.init({ apiKey: 'YOUR_KEY', user: { id: userId } });
    return () => Glitch.destroy();
  }, []);
  return <div>Your app</div>;
}

Next.js

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://unpkg.com/@idliapam/glitch-widget" />
        <Script id="glitch-init">
          {`Glitch.init({ apiKey: 'YOUR_KEY' })`}
        </Script>
      </body>
    </html>
  );
}

Vue

// main.js
import { Glitch } from '@idliapam/glitch-widget';
Glitch.init({ apiKey: 'YOUR_KEY' });

Contributing

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

Support

• Documentation: docs.idliapam.in
• Issues: GitHub Issues
• Email: [email protected]

License

MIT - see LICENSE for details.

Built with care by Idliapam — the unified AI platform for modern businesses.