# StackScope Vanilla JavaScript Example

Complete working example of StackScope SDK with pure JavaScript and ES modules.

## 🚀 Quick Start

1. **Install dependencies**:
   ```bash
   npm install
   ```

2. **Configure environment**:
   ```bash
   cp .env.example .env.local
   # Edit .env.local with your worker URL
   ```

3. **Run development server**:
   ```bash
   npm run dev
   ```

4. **Open in browser**: `http://localhost:5173`

## 📁 Files

- `index.html` - Demo page with interactive examples
- `main.js` - StackScope initialization and demo functions
- `package.json` - Dependencies and scripts
- `.env.example` - Environment variable template
- `vite.config.js` - Vite configuration

## ✨ Features Demonstrated

### Automatic Capture
- ✅ Console logs (`console.log`, `console.error`, etc.)
- ✅ Network requests (`fetch`, `XMLHttpRequest`)
- ✅ User interactions (clicks, form submissions)
- ✅ Performance metrics (Core Web Vitals, long tasks)

### Manual Logging
- ✅ Custom events with metadata
- ✅ User action tracking
- ✅ Performance measurements

### Debug Mode
- ✅ Real-time log display
- ✅ Console output capture
- ✅ Network request monitoring

## 🔧 Configuration

The example uses environment variables for configuration:

```javascript
const stackscope = createStackScope({
  debug: true,      // Enable console logging
  logLevel: 'debug' // Capture all log levels
});
```

## 📊 What Gets Captured

1. **Console Logs**: All console.* calls with timestamps
2. **Network Requests**: URL, method, status, duration
3. **User Interactions**: Element selectors, event types
4. **Performance**: Page load times, API response times
5. **Navigation**: Page changes, route updates

## 🌐 Worker Integration

To send logs to your Cloudflare Worker:

1. Set `VITE_STACKSCOPE_WORKER_URL` in `.env.local`
2. Deploy worker using `stackscope-worker` CLI
3. Logs will be sent automatically in batches

## 🔍 Debug Mode

When `debug: true`, StackScope will:
- Log all captured events to browser console
- Show network requests and responses
- Display batch sending information
- Highlight any errors or warnings

## 🌐 Worker Required

StackScope requires a worker for centralized log collection:

```javascript
const stackscope = createStackScope({
  debug: true,           // Shows logs in console for immediate feedback
  workerUrl: 'https://your-worker.workers.dev' // Required for log collection
});
```

## 🧪 Testing

```bash
# Test basic functionality
npm run test

# Validate environment setup
npm run validate

# Build for production
npm run build
```

## 🎯 Use Cases

This example is perfect for:
- Learning StackScope basics
- Testing integration
- Debugging capture behavior
- Prototyping new features

## 📚 Next Steps

- Try [React Vite example](../react-vite) for component integration
- See [TypeScript example](../typescript) for type safety
- Check [React hooks](../react-hooks) for advanced usage