@stacksleuth/vue-agent

StackSleuth Vue.js Agent

🚀 What is StackSleuth Vue.js Agent?

Specialized Vue.js performance monitoring agent - Component lifecycle tracking, Vuex state management profiling, route performance analysis, and reactive data monitoring with Vue DevTools integration.

✨ Key Features

• ⚛️ Vue Component Tracking: Lifecycle and render performance monitoring
• 🗄️ Vuex Integration: State management performance analysis
• 🛣️ Vue Router Profiling: Route transition and navigation tracking
• 🔄 Reactive Data Monitoring: Vue reactivity system performance
• 🔧 Vue DevTools Integration: Enhanced debugging capabilities
• 📊 Component Tree Analysis: Component hierarchy performance insights
• ⚡ Composition API Support: Vue 3 Composition API monitoring
• 🎯 Custom Directives: Track custom directive performance

📦 Installation

# npm
npm install @stacksleuth/vue-agent

# yarn
yarn add @stacksleuth/vue-agent

# pnpm
pnpm add @stacksleuth/vue-agent

yarn add @stacksleuth/vue-agent

pnpm add @stacksleuth/vue-agent

🏁 Quick Start

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

const app = createApp(App);

// Initialize Vue agent
const agent = new VueAgent({
  enabled: true,
  trackComponents: true,
  trackVuex: true,
  trackRouter: true
});

// Install as Vue plugin
app.use(agent);

// Start monitoring
agent.startMonitoring();

app.mount('#app');

📖 Comprehensive Examples

Vue 3 Setup

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

const app = createApp(App);

// Initialize Vue agent
const agent = new VueAgent({
  enabled: true,
  trackComponents: true,
  trackVuex: true,
  trackRouter: true
});

// Install as Vue plugin
app.use(agent);

// Start monitoring
agent.startMonitoring();

app.mount('#app');

Component Performance Tracking

// In your Vue component
export default {
  name: 'UserDashboard',
  async mounted() {
    const span = this.$stacksleuth.startSpan('user-dashboard-load');
    
    try {
      await this.loadUserData();
      await this.loadDashboardMetrics();
      span.setStatus('success');
    } catch (error) {
      span.setStatus('error', error.message);
    } finally {
      span.end();
    }
  },
  methods: {
    async loadUserData() {
      // Track specific operations
      this.$stacksleuth.recordMetric('dashboard.user_data_loaded', 1);
    }
  }
}

🎯 Real-World Usage

Production Configuration

const agent = new VueAgent({
  enabled: process.env.NODE_ENV === 'production',
  projectId: process.env.STACKSLEUTH_PROJECT_ID,
  apiKey: process.env.STACKSLEUTH_API_KEY,
  sampleRate: process.env.NODE_ENV === 'production' ? 0.01 : 0.1,
  bufferSize: 1000,
  flushInterval: 10000
});

Monitoring Best Practices

• Sampling Rate: Use lower sampling rates (1-5%) in production
• Buffer Management: Configure appropriate buffer sizes for your traffic
• Error Handling: Always include error context in your monitoring
• Security: Never log sensitive data like passwords or API keys
• Performance: Monitor the monitoring - track agent overhead

🛠️ Troubleshooting

Common Issues

Agent Not Starting

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

High Memory Usage

// Optimize memory usage
const agent = new VueAgent({
  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