Examples & Use Cases

Setup

// app.js
import { ReactAgent } from '@stacksleuth/react-agent';

ReactAgent.init({
  apiKey: process.env.REACT_APP_STACKSLEUTH_KEY,
  trackRenders: true,
  trackStateChanges: true,
  componentWhitelist: ['ProductList', 'CartDrawer', 'CheckoutForm']
});

Product List Component

import { useProfiler } from '@stacksleuth/react-agent';

function ProductList({ category }) {
  const profiler = useProfiler('ProductList');
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProducts = async () => {
      profiler.startMeasure('fetch-products');
      try {
        const response = await api.getProducts(category);
        setProducts(response.data);
      } finally {
        profiler.endMeasure('fetch-products');
        setLoading(false);
      }
    };
    
    fetchProducts();
  }, [category]);

  return (
    <div className="product-grid">
      {loading ? (
        <LoadingSpinner />
      ) : (
        products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))
      )}
    </div>
  );
}

Main Setup

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

const app = createApp(App);

app.use(VueAgent, {
  apiKey: process.env.VUE_APP_STACKSLEUTH_KEY,
  trackComponents: true,
  trackVuexMutations: true,
  slowComponentThreshold: 50
});

Dashboard Component

<template>
  <div class="dashboard">
    <MetricsGrid :metrics="metrics" />
    <RealtimeChart :data="chartData" />
    <DataTable :items="tableData" />
  </div>
</template>

<script>
import { useStackSleuth } from '@stacksleuth/vue-agent';

export default {
  setup() {
    const { trackMethod } = useStackSleuth();
    
    const loadDashboardData = trackMethod('loadDashboardData', async () => {
      const [metrics, chart, table] = await Promise.all([
        api.getMetrics(),
        api.getChartData(),
        api.getTableData()
      ]);
      
      return { metrics, chart, table };
    });
    
    onMounted(() => {
      loadDashboardData();
    });
  }
}
</script>

Express Setup

const express = require('express');
const { BackendAgent } = require('@stacksleuth/backend-agent');

const app = express();
const agent = new BackendAgent({
  apiKey: process.env.STACKSLEUTH_KEY,
  serviceName: 'user-service'
});

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

// Track specific routes
app.get('/api/users/:id', agent.trackRoute(), async (req, res) => {
  const user = await db.users.findById(req.params.id);
  res.json(user);
});

// Custom metrics
app.post('/api/users', async (req, res) => {
  const timer = agent.startTimer('user.creation');
  try {
    const user = await createUser(req.body);
    agent.recordMetric('user.created', 1);
    res.json(user);
  } finally {
    timer.end();
  }
});

Cache Implementation

import { RedisAgent } from '@stacksleuth/redis-agent';
import { createClient } from 'redis';

class CacheService {
  constructor() {
    this.client = createClient();
    this.agent = new RedisAgent({ apiKey: process.env.STACKSLEUTH_KEY });
    this.agent.instrument(this.client);
  }

  async get(key) {
    const value = await this.client.get(key);
    
    // Track cache hit/miss
    this.agent.recordMetric(value ? 'cache.hit' : 'cache.miss', 1);
    
    return value;
  }

  async set(key, value, ttl = 3600) {
    const timer = this.agent.startTimer('cache.write');
    try {
      await this.client.setex(key, ttl, JSON.stringify(value));
    } finally {
      timer.end();
    }
  }
  
  async invalidate(pattern) {
    const timer = this.agent.startTimer('cache.invalidation');
    const keys = await this.client.keys(pattern);
    if (keys.length > 0) {
      await this.client.del(...keys);
    }
    timer.end({ keysDeleted: keys.length });
  }
}

User Journey Testing

import { BrowserAgent } from '@stacksleuth/browser-agent';

const agent = new BrowserAgent({
  apiKey: process.env.STACKSLEUTH_KEY,
  headless: true,
  recordVideo: true
});

describe('User Registration Flow', () => {
  it('should complete registration within 5 seconds', async () => {
    const session = await agent.startSession({
      name: 'user-registration',
      viewport: { width: 1280, height: 720 }
    });
    
    // Navigate to registration page
    await session.goto('https://app.example.com/register');
    
    // Fill registration form
    await session.fill('#email', 'test@example.com');
    await session.fill('#password', 'SecurePass123!');
    await session.fill('#confirmPassword', 'SecurePass123!');
    
    // Submit and wait for redirect
    const metrics = await session.measureAction('registration', async () => {
      await session.click('button[type="submit"]');
      await session.waitForURL('**/dashboard');
    });
    
    expect(metrics.duration).toBeLessThan(5000);
    await session.end();
  });
});