npm package: @idliapam/glitch-widget
Description: AI-powered bug reporting widget. Users report bugs in 5 seconds. AI triages automatically.
Author: Idliapam
Latest version: 1.1.0

# @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.**

[![npm version](https://img.shields.io/npm/v/@idliapam/glitch-widget.svg)](https://www.npmjs.com/package/@idliapam/glitch-widget)
[![License: MIT](https://img.shields.io/badge/License-MIT-violet.svg)](https://opensource.org/licenses/MIT)

---

## 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)
```html
<script src="https://unpkg.com/@idliapam/glitch-widget"></script>
<script>
  Glitch.init({ apiKey: 'YOUR_API_KEY' });
</script>
```

### Option 2: NPM (React, Vue, Angular, Svelte)
```bash
npm install @idliapam/glitch-widget
```
```javascript
import { Glitch } from '@idliapam/glitch-widget';

Glitch.init({
  apiKey: 'YOUR_API_KEY',
  user: { id: '123', email: 'user@example.com', 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

```javascript
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: 'user@example.com',
    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:

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

Then point the widget to your server:
```javascript
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](https://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:
```javascript
import { GlitchWidget } from '@idliapam/glitch-widget';
const widget = new GlitchWidget({ apiKey: 'xxx' });
widget.destroy();
```

---

## Framework Examples

### React
```jsx
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
```jsx
// 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
```javascript
// main.js
import { Glitch } from '@idliapam/glitch-widget';
Glitch.init({ apiKey: 'YOUR_KEY' });
```

---

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## Support

- Documentation: [docs.idliapam.in](https://docs.idliapam.in)
- Issues: [GitHub Issues](https://github.com/Ankitajainkuniya/glitch-widget/issues)
- Email: hello@idliapam.in

## License

MIT - see [LICENSE](LICENSE) for details.

---

Built with care by [Idliapam](https://idliapam.in) — the unified AI platform for modern businesses.