Getting Started with StackSleuth

Choose Your Architecture

StackSleuth supports multiple deployment architectures:

Option A: Cloud-Hosted (Recommended)

Use our cloud-hosted API service for zero-maintenance monitoring:

const agent = new BackendAgent({
    apiEndpoint: 'https://api.stacksleuth.com',
    projectId: 'your-project-id',
    apiKey: 'your-api-key'
});

Option B: Self-Hosted

Run the StackSleuth API service on your own infrastructure:

npm install @stacksleuth/api
npx stacksleuth-api start --port 3000

Install Core Packages

Install the core package and the agents you need:

For Node.js Applications

npm install @stacksleuth/core @stacksleuth/backend-agent

For Frontend Applications

# For general frontend apps
npm install @stacksleuth/frontend-agent

# For Vue.js
npm install @stacksleuth/vue-agent

# For Svelte
npm install @stacksleuth/svelte-agent

For Databases

# Universal database agent
npm install @stacksleuth/db-agent

# Specific database agents
npm install @stacksleuth/mongodb-agent
npm install @stacksleuth/redis-agent
npm install @stacksleuth/mysql-agent

Basic Configuration

Configure your agent with minimal settings:

import { BackendAgent } from '@stacksleuth/backend-agent';

const agent = new BackendAgent({
    // Required settings
    enabled: true,
    projectId: 'my-awesome-app',
    
    // Optional settings
    sampleRate: 0.1,  // Sample 10% of requests
    enableTracing: true,
    enableMetrics: true,
    
    // Performance thresholds
    thresholds: {
        responseTime: 1000,  // Alert if response > 1s
        errorRate: 0.05      // Alert if error rate > 5%
    }
});

Integrate with Your Framework

Express.js

import express from 'express';
import { BackendAgent } from '@stacksleuth/backend-agent';

const app = express();
const agent = new BackendAgent({ /* config */ });

// Start monitoring
agent.startMonitoring();

// Add middleware
app.use(agent.middleware());

// Your routes
app.get('/api/users', (req, res) => {
    res.json({ users: [] });
});

app.listen(3000);

Vue.js

import { createApp } from 'vue';
import { VueAgent } from '@stacksleuth/vue-agent';
import App from './App.vue';

const app = createApp(App);

const agent = new VueAgent({
    trackComponents: true,
    trackRouter: true,
    trackErrors: true
});

app.use(agent);
agent.startMonitoring();

app.mount('#app');

Django

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    # ... other apps
    'stacksleuth.django',
]

MIDDLEWARE = [
    'stacksleuth.django.middleware.StackSleuthMiddleware',
    # ... other middleware
]

STACKSLEUTH = {
    'ENABLED': True,
    'PROJECT_ID': 'my-django-app',
    'SAMPLE_RATE': 0.1,
}

View Your Metrics

Once integrated, you can view your metrics in several ways:

Option 1: StackSleuth Dashboard

Access the web dashboard at https://dashboard.stacksleuth.com

Option 2: CLI

# Install CLI
npm install -g @stacksleuth/cli

# View real-time metrics
stacksleuth metrics --project my-awesome-app

# View traces
stacksleuth traces --project my-awesome-app --limit 50

Option 3: API

// Get metrics programmatically
const response = await fetch('https://api.stacksleuth.com/metrics', {
    headers: {
        'Authorization': `Bearer ${apiKey}`,
        'X-Project-ID': 'my-awesome-app'
    }
});

const metrics = await response.json();

Set Up Alerts

Configure alerts to get notified of performance issues:

agent.setAlert({
    name: 'High Response Time',
    condition: 'responseTime > 1000',
    actions: ['email', 'slack'],
    recipients: ['team@example.com'],
    cooldown: 300  // 5 minutes
});

agent.setAlert({
    name: 'Error Rate Spike',
    condition: 'errorRate > 0.05',
    actions: ['pagerduty'],
    severity: 'critical'
});

graph TB
    subgraph "Your Application"
        FE[Frontend
Vue/React/Svelte]
        BE[Backend
Express/Django/Laravel]
        DB[(Database
MongoDB/MySQL/Redis)]
    end
    
    subgraph "StackSleuth Agents"
        FA[Frontend Agent]
        BA[Backend Agent]
        DA[Database Agent]
    end
    
    subgraph "StackSleuth Core"
        API[API Service]
        M[Metrics Store]
        T[Trace Store]
        A[Alert Engine]
    end
    
    subgraph "Visualization"
        D[Dashboard]
        CLI[CLI Tool]
        EXT[Browser Extension]
    end
    
    FE --> FA
    BE --> BA
    DB --> DA
    
    FA --> API
    BA --> API
    DA --> API
    
    API --> M
    API --> T
    API --> A
    
    M --> D
    T --> D
    M --> CLI
    T --> CLI
    
    FA -.-> EXT