# StackScope SDK Examples

Complete working examples for different frameworks and use cases. Each example is self-contained and demonstrates best practices.

## 📁 Structure

```
examples/
├── vanilla-js/          # Pure JavaScript (ES modules)
├── vanilla-js-script/   # Script tag implementation
├── react-vite/          # React with Vite
├── react-nextjs/        # Next.js application
├── react-cra/           # Create React App
├── react-hooks/         # Advanced React hooks usage
└── typescript/          # TypeScript implementation
```

## 🚀 Quick Start

Each example includes:
- ✅ Complete source code
- ✅ Environment configuration
- ✅ Package.json with dependencies
- ✅ README with setup instructions
- ✅ Working .env templates

## 🔧 Usage

1. **Copy desired example**:
   ```bash
   cp -r examples/react-vite my-app
   cd my-app
   ```

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

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

4. **Run**:
   ```bash
   npm run dev
   ```

## 📖 Example Categories

### Framework Examples
- **vanilla-js** - ES modules, automatic capture
- **react-vite** - React components, hooks, error boundary
- **react-nextjs** - SSR considerations, pages router
- **react-cra** - Standard Create React App setup

### Advanced Examples  
- **react-hooks** - All StackScope hooks with real-world usage
- **typescript** - Full TypeScript integration with proper types

### Integration Examples
- **vanilla-js-script** - Script tag for legacy environments
- **with-authentication** - API key and custom headers

## 🎯 Use Cases

Each example demonstrates:
- ✅ Automatic log capture (console, network, interactions)
- ✅ Manual logging with metadata
- ✅ Error handling and retry logic
- ✅ Performance monitoring
- ✅ Environment-specific configuration
- ✅ Debug mode for development

## 🔍 Testing Examples

All examples include test scripts:
```bash
# Test if StackScope initializes correctly
npm run test

# Check bundle size
npm run size

# Validate environment variables
npm run validate
```

## 📚 Learning Path

1. **Start with**: `vanilla-js` for core concepts
2. **React users**: `react-vite` for component integration  
3. **Production setup**: `typescript` for type safety
4. **Advanced usage**: `react-hooks` for custom implementations

## 🆘 Troubleshooting

If examples don't work:
1. Check [../docs/troubleshooting.md](../docs/troubleshooting.md)
2. Verify Node.js version (16+ required)
3. Clear npm cache: `npm cache clean --force`
4. Reinstall dependencies: `rm -rf node_modules && npm install`