Quick Start Guide

Prerequisites

• Docker and Docker Compose
• Git
• 4GB+ RAM
• Ports 3000, 3301, 4317, 9000 free

One-Click Setup

1. Clone and Start: ```bash git clone cd svelte-signoz-demo

docker-compose up -d

#If you'd like a neat startup script to set everything up for you, run this chmod +X dockerize.sh ./dockerize.sh

2. **Access Applications:**
- SvelteKit App: http://localhost:3000
- SigNoz Dashboard: http://localhost:3301

## Tech Stack 

```mermaid
graph TB
    A[👤 User visits website] --> B[🌐 SvelteKit App<br/>Your website frontend]
    B --> C[📡 OpenTelemetry<br/>Data collector]
    C --> D[🔄 OTEL Collector<br/>Data processor]
    D --> E[📊 SigNoz<br/>Monitoring dashboard]
    E --> F[💾 ClickHouse<br/>Data storage]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#fce4ec
    style F fill:#f1f8e9

SvelteKit App: This is your website (like WordPress, but more modern) OpenTelemetry: Quietly watches what happens on your site OTEL Collector: Organizes the monitoring data SigNoz: Shows you beautiful charts and graphs ClickHouse: Stores all the data

SigNoz metrics

1. Application Performance

• Request latency and throughput
• Error rates and success rates
• API endpoint performance
• Database query performance

2. Business Metrics

• Button click tracking
• User interaction patterns
• Custom event counters
• Feature usage analytics

3. Infrastructure Metrics

• Memory and CPU usage
• Network I/O
• Container health status

4. Error Tracking

• Exception traces with full context
• Error patterns and frequency
• Failed API calls
• Database connection issues

5. Custom Dashboards

• Real-time application metrics
• Business KPIs
• Performance trending
• Alert configurations

Notes

✅ Healthcheck Filtering: The /health endpoint spans are automatically filtered out by the OpenTelemetry collector

To stop the demo -

docker-compose down