@stacksleuth/frontend-agent

StackSleuth Frontend Agent

🚀 What is StackSleuth Frontend Agent?

Advanced frontend performance monitoring for web applications - DOM event tracking, component lifecycle profiling, bundle analysis, memory leak detection, and real-time user interaction monitoring.

✨ Key Features

• 🌐 DOM Event Tracking: Comprehensive user interaction monitoring
• ⚛️ Component Lifecycle: Framework-agnostic component profiling
• 📦 Bundle Analysis: JavaScript bundle performance optimization
• 💾 Memory Leak Detection: Client-side memory usage monitoring
• 📊 Core Web Vitals: LCP, FID, CLS, and other performance metrics
• 🔄 Real-time Monitoring: Live performance insights
• 📱 Mobile Optimization: Mobile-specific performance tracking
• 🎯 User Journey Analysis: Complete user interaction flow tracking

📦 Installation

# npm
npm install @stacksleuth/frontend-agent

# yarn
yarn add @stacksleuth/frontend-agent

# pnpm
pnpm add @stacksleuth/frontend-agent

yarn add @stacksleuth/frontend-agent

pnpm add @stacksleuth/frontend-agent

🏁 Quick Start

import { FrontendAgent } from '@stacksleuth/frontend-agent';

// Initialize the agent
const agent = new FrontendAgent({
  enabled: true,
  trackUserInteractions: true,
  monitorWebVitals: true
});

// Start monitoring
agent.startMonitoring();

// Track custom events
agent.trackEvent('user-action', {
  action: 'button-click',
  component: 'LoginForm'
});

// Track page navigation
agent.trackPageView('/dashboard', {
  userId: '12345',
  referrer: document.referrer
});

🛠️ Troubleshooting

Common Issues

Agent Not Starting

// Enable debug mode
const agent = new FrontendAgent({
  enabled: true,
  debug: true
});

High Memory Usage

// Optimize memory usage
const agent = new FrontendAgent({
  bufferSize: 500,
  flushInterval: 5000,
  sampleRate: 0.01
});

Missing Metrics

• Check that the agent is enabled
• Verify your API key and project ID
• Ensure sampling rate allows data through
• Check network connectivity to StackSleuth API

Debug Mode

DEBUG=stacksleuth:* node your-app.js

📚 Resources

• Official Documentation
• API Reference
• Examples Repository

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see the LICENSE file for details.

Website • Documentation • NPM Registry • GitHub

Made with ⚡ by StackSleuth