# edna-capture

Universal error tracking package for frontend applications. Works with any JavaScript framework (React, Vue, Next.js, Nuxt.js, Astro, Svelte, etc.).

**Monitor, track, and analyze errors in real-time across all your frontend applications with zero configuration.**

## Why Edna Capture?

- **Universal Compatibility**: Works with any JavaScript framework
- **Zero Configuration**: Automatic setup with CLI tool
- **Real-time Monitoring**: Instant error tracking and notifications
- **Privacy Focused**: No sensitive data collection by default
- **Developer Friendly**: Seamless integration with existing workflows

## Features

- 🎯 Universal error tracking for any frontend framework
- 🔍 Automatic error and warning capture
- 🌐 HTTP request error tracking (fetch, XHR, Axios)
- 📊 Custom event tracking
- 🛡️ Development mode protection
- 🔄 GET-based error reporting
- 📱 Cross-browser support
- 🚀 Easy setup with CLI


## 📊 Capture Dashboard

Monitor your application errors in real-time with our intuitive dashboard:

**[🌐 Open Edna Capture Dashboard](https://capture.enterprisedna.co/dashboard)**

Create a free account to start tracking errors across all your applications. 
The dashboard provides:

- Real-time error monitoring
- Error analytics and trends
- Custom event tracking
- Framework-specific insights
- Performance metrics

## Installation

### Quick Start

Create pgoject in **[dashboard](https://capture.enterprisedna.co/dashboard)** and get projectId (in the dashboard you will find ready-made installation instructions).


```bash
npx edna-capture --projectId=<projectId> --framework=<react|nextjs|vue|nuxtjs>
```

or

```bash
npx edna-capture
```

This will guide you through the setup process, including:
1. Framework selection
2. Project ID generation
3. Automatic configuration

### Manual Installation

```bash
npm install edna-capture
```

Or using yarn:

```bash
yarn add edna-capture
```

### Update

```bash
npm update edna-capture

or

npm install edna-capture@latest
```

## Recommended Integration (All Frameworks)

1. **Create or check the file `src/utils/error-capture.ts`**. If it does not exist, create it with the following content (replace `'your-project-id'` with your actual Project ID):

```typescript
import EdnaCapture from 'edna-capture/<framework>'; // e.g. 'react', 'vue', 'nextjs', 'nuxtjs', 'astro', 'svelte', or omit for vanilla

// Initialize error tracking
EdnaCapture.init({
  projectId: 'your-project-id',
  enable: import.meta.env.MODE  === 'production',
  // enable: process.env.NODE_ENV  === 'production',
  trackWarning: false,
  trackHttpRequests: true // Track HTTP errors (enabled by default)
});

// Example: Track custom event
export function trackCustomEvent(eventName: string, data?: any) {
  EdnaCapture.trackCustomEvent(eventName, data);
}
```

- For Nuxt.js, use this template in `plugins/edna-capture.ts`:

```typescript
import EdnaCapture from 'edna-capture/nuxtjs';
export default defineNuxtPlugin(() => {
  // Initialize error tracking
  EdnaCapture.init({
    projectId: 'your-project-id',
    enable: process.env.NODE_ENV === 'production',
    trackWarning: false,
    trackHttpRequests: true // Track HTTP errors (enabled by default)
  });
  // Example: Track custom event
  function trackCustomEvent(eventName: string, data?: any) {
    EdnaCapture.trackCustomEvent(eventName, data);
  }
  return {
    provide: {
      EdnaCapture: EdnaCapture,
      trackCustomEvent: trackCustomEvent
    }
  }
});
```

2. **Import this file in your main project file** (for example, `src/index.tsx`, `src/pages/_app.tsx`, `src/main.ts`, etc.):

```typescript
import './utils/error-capture';
```

3. **Make sure the file content matches the template above.**

4. **You can now use `trackCustomEvent` in your app code:**

```typescript
import { trackCustomEvent } from './utils/error-capture';

trackCustomEvent('user_action', {
  action: 'button_click',
  buttonId: 'submit-form'
});
```

---

## Direct Usage (Advanced / Custom Integrations)

You can also use EdnaCapture directly in any file, but the recommended way is via the `src/utils/error-capture.ts` wrapper for consistency and maintainability.

```typescript
import EdnaCapture from 'edna-capture/<framework>';
EdnaCapture.init({
  projectId: 'your-project-id',
  enable: process.env.NODE_ENV === 'production',
  trackWarning: false,
  trackHttpRequests: true // Track HTTP errors (enabled by default)
});
EdnaCapture.trackCustomEvent('user_action', { ... });
```

---

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| projectId | string | required | Your project ID from Edna |
| enable | boolean | true | Enable/disable error tracking |
| trackWarning | boolean | false | Track console warnings |
| trackHttpRequests | boolean | true | Track HTTP request errors (fetch, XHR) |
| apiEndpoint | string | 'https://capture.enterprisedna.co' | Custom API endpoint |

## CLI Options

```bash
npx edna-capture --template=react --projectId=your-project-id
```

Available templates:
- react
- vue
- nextjs
- nuxtjs
- astro
- svelte

## Error Types Tracked

1. Uncaught JavaScript errors
2. Unhandled promise rejections
3. HTTP request errors (4xx/5xx responses, network failures)
4. Console warnings (optional)
5. Custom events

## HTTP Request Tracking

EdnaCapture automatically tracks HTTP request errors by default, including:

- **4xx/5xx HTTP responses** (client/server errors)
- **Network failures** (timeout, connection errors)
- **Detailed request context** (URL, method, status, response time)

Works with all HTTP libraries:
```typescript
// All these requests are automatically tracked on error
fetch('/api/users');           // Native fetch
axios.get('/api/data');        // Axios
xhr.open('GET', '/api/info');  // XMLHttpRequest
```

To disable HTTP tracking:
```typescript
EdnaCapture.init({
  projectId: 'your-project-id',
  trackHttpRequests: false // Disable if needed
});
```

## Development

The package automatically disables error tracking in development mode when `process.env.NODE_ENV === 'development'`.

## Security

- All data is sent via POST requests to ensure maximum compatibility
- No sensitive data is collected by default
- Project ID is required for operation

## Examples

Check out the [examples](./examples) directory for framework-specific implementations:

- [React](./examples/react)
- [Vue](./examples/vue)
- [Angular](./examples/angular)
- [Svelte](./examples/svelte)

## Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

## Development

```bash
# Install dependencies
npm install

# Run tests
npm test

# Build package
npm run build
```

## License

MIT