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

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 and get projectId (in the dashboard you will find ready-made installation instructions).

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

or

npx edna-capture

This will guide you through the setup process, including:

1. Framework selection
2. Project ID generation
3. Automatic configuration

Manual Installation

npm install edna-capture

Or using yarn:

yarn add edna-capture

Update

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):

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:

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.):

import './utils/error-capture';

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

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

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.

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

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:

// 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:

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 directory for framework-specific implementations:

• React
• Vue
• Angular
• Svelte

Contributing

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

Development

# Install dependencies
npm install

# Run tests
npm test

# Build package
npm run build

License

MIT