@devai/logger# BrowserLog

Universal browser logging library for capturing console logs, errors, network requests, and sending them to a backend API with stack trace analysis.Universal browser logging library for capturing console and browser errors, and sending them to a backend API.

Features## Features

• Captures console logs (log, info, warn, error, debug)

• 📝 Console Logging - Captures all console methods (log, info, warn, error, debug)- Captures browser errors and unhandled promise rejections

• 🚨 Error Tracking - Automatically captures JavaScript errors and unhandled promise rejections- Buffers logs and sends them to a backend endpoint

• 🌐 Network Monitoring - Captures fetch and XMLHttpRequest calls (optional)- Configurable log level, endpoint, and metadata

• 🌳 Stack Trace Analysis - Parses and formats stack traces into a tree structure- Easy integration in any web application

• 📦 Buffering - Batches logs for efficient transmission

• ⚙️ Configurable - Customizable log levels, endpoints, and metadata## Usage

• 🔒 Lightweight - No dependencies, pure JavaScript

## Installation// Import or include browserlog.js

const logger = new BrowserLogger({

```bash  endpoint: '/api/logs/browser',

npm install @devai/logger  level: 'info',

```  metadata: { userId: '123' }

});

Or use via CDN:```



```html## Integration

<script src="https://unpkg.com/@devai/[email protected]/browserlog.js"></script>- Add the backend API endpoint `/api/logs/browser` to receive logs.

```- See amzurlog backend for example implementation.


## Quick Start

```javascript
// Initialize the logger
const logger = new BrowserLogger({
  endpoint: 'http://localhost:8000/api/logs/browser',
  level: 'info',
  metadata: { 
    userId: '123',
    appVersion: '1.0.0'
  }
});

// Logs are automatically captured!
console.log('Application started');
console.error('Something went wrong');

Configuration Options

const logger = new BrowserLogger({
  // Backend endpoint to receive logs (required)
  endpoint: '/api/logs/browser',
  
  // Minimum log level: 'debug' | 'info' | 'warn' | 'error'
  // Default: 'info'
  level: 'info',
  
  // Custom metadata added to all logs
  // Default: {}
  metadata: { 
    userId: '123',
    environment: 'production'
  },
  
  // Maximum logs to buffer before sending
  // Default: 20
  maxBufferSize: 20,
  
  // Interval (ms) to send buffered logs
  // Default: 5000
  sendInterval: 5000,
  
  // Enable network request/response capture
  // Default: true
  captureNetwork: true
});

API Reference

Constructor

new BrowserLogger(options)

Creates a new logger instance and automatically starts capturing logs.

Log Format

Logs are sent to your backend endpoint in the following format:

{
  "logs": [
    {
      "timestamp": "2025-10-31T12:34:56.789Z",
      "level": "error",
      "message": "Error: Something went wrong",
      "stackTree": [
        {
          "function": "handleClick",
          "file": "app.js",
          "line": "42",
          "column": "15"
        }
      ],
      "userId": "123",
      "appVersion": "1.0.0"
    }
  ]
}

Advanced Usage

Stack Trace Tree

Error logs include a parsed stack trace tree:

console.error(new Error('Database connection failed'));

// Sends:
{
  "message": "Error: Database connection failed",
  "stackTree": [
    {
      "function": "connectDB",
      "file": "database.js",
      "line": "25",
      "column": "10"
    },
    {
      "function": "init",
      "file": "app.js",
      "line": "10",
      "column": "5"
    }
  ]
}

Network Monitoring

When captureNetwork is enabled, fetch and XHR requests are logged:

const logger = new BrowserLogger({
  endpoint: '/api/logs/browser',
  captureNetwork: true
});

// This fetch will be logged
fetch('/api/users')
  .then(res => res.json());

Custom Metadata

Add context to all logs:

const logger = new BrowserLogger({
  endpoint: '/api/logs/browser',
  metadata: {
    userId: getCurrentUserId(),
    sessionId: getSessionId(),
    browser: navigator.userAgent,
    url: window.location.href
  }
});

Backend Integration

Your backend needs an endpoint to receive logs. Example using Express:

app.post('/api/logs/browser', express.json(), (req, res) => {
  const { logs } = req.body;
  
  logs.forEach(log => {
    console.log(`[${log.level}] ${log.message}`);
    // Store in database, send to monitoring service, etc.
  });
  
  res.json({ status: 'ok' });
});

For Python/FastAPI backend, see our companion package: amzurlog

Troubleshooting

Logs not appearing

1. Check that the backend endpoint is accessible
2. Open browser DevTools → Network tab to see if logs are being sent
3. Verify the endpoint URL is correct

Too many logs

Increase maxBufferSize or sendInterval, or set a higher log level:

const logger = new BrowserLogger({
  endpoint: '/api/logs/browser',
  level: 'warn', // Only warn and error
  maxBufferSize: 50,
  sendInterval: 10000 // 10 seconds
});

CORS errors

Ensure your backend allows cross-origin requests from your frontend domain.

Examples

See the examples directory for complete usage examples.

License

MIT © AmzurATG

Contributing

Issues and pull requests are welcome at GitHub.