🐕 DashDog

Simple performance monitoring for your web apps ⚡

DashDog is a lightweight performance tracking library that helps you measure what matters. Track user flows, API calls, component renders, or anything else with just a few lines of code!

🚀 Features

• 🏃‍♂️ Lightweight - Minimal overhead, focused on performance tracking
• 🔄 Smart batching - Automatically batches metrics for efficient uploads
• 🎯 Sample rate control - Only track a percentage of users to reduce costs
• 🐛 Debug mode - See exactly what's being tracked during development
• 📱 Cross-platform - Works in browsers and Node.js
• 🎪 Multi-step tracking - Perfect for complex user flows and journeys
• 🔀 Version comparison - Tag events with a version string to compare performance across releases

📦 Installation

npm install @dashdog/web

🔧 Quick Start

import dashdog from '@dashdog/web'

// Start timing something
dashdog.start('user-login')

// ... user does stuff ...

// Stop timing and record the metric
dashdog.end('user-login')

Your metrics are automatically batched and uploaded to your dashboard.

📈 View Your Metrics

All performance data is available in your DashDog Dashboard

• 🆓 Free registration
• 📊 Real-time analytics
• 🎯 Generous usage limits for most applications
• 🖥️ Intuitive UI

📖 API Reference

start(actionName, metadata?)

Begin timing an action.

dashdog.start('checkout-process', {
  version: 'v2',
  items: 3,
  value: 149.99
})

end(actionName, additionalMetadata?)

Stop timing and record the metric. Returns duration in milliseconds.

const duration = dashdog.end('checkout-process', {
  success: true,
  paymentMethod: 'stripe'
})

measure(actionName, asyncFunction, metadata?)

Automatically measure async operations with error handling.

const userData = await dashdog.measure('fetch-user', async () => {
  const response = await fetch('/api/user/123')
  return response.json()
})

cancel(actionName)

Cancel a timer without recording a metric.

dashdog.cancel('file-upload') // Operation was aborted

getActiveActions()

Get currently running timers.

const active = dashdog.getActiveActions() // ['user-login', 'api-call']

uploadPendingEventsAndFlush()

Immediately upload all metrics.

window.addEventListener('beforeunload', () => {
  dashdog.uploadPendingEventsAndFlush()
})

configure(options)

Update settings.

dashdog.configure({
  batchSize: 20,
  batchDelay: 5000,
  enableDebug: true,
  sampleRate: 0.1 // Track 10% of users
})

🎪 Examples

Multi-Step User Flow

// Start timing the entire onboarding process
dashdog.start('user-onboarding')

// ... user goes through multiple steps/pages ...

// Complete onboarding (timer runs across pages)
dashdog.end('user-onboarding', {
  completedSteps: 4,
  source: 'organic'
})

API Performance

// Clean async measurement with automatic error handling
const user = await dashdog.measure('api-users-create', () => createUser(userData), { source: 'signup-form' })

Comparing Versions

Tag events with a version string to compare performance across different releases of your app. The DashDog dashboard lets you filter and overlay metrics by version, making it easy to measure the impact of your changes.

// Old implementation
dashdog.start('user-onboarding', { version: 'v1' })

// New redesigned implementation
dashdog.start('user-onboarding', { version: 'v2' })

Useful for things like:

• UI redesigns - Did the new onboarding flow complete faster than the old one?
• New user flows - Is the redesigned checkout converting and performing better?
• Refactors - Did rewriting that API call actually make it faster?
• A/B experiments - Compare any two variants of a feature side by side

⚙️ Configuration

dashdog.configure({
  batchSize: 10, // Metrics per batch
  batchDelay: 2000, // Delay between uploads (ms)
  enableDebug: false, // Console logging
  sampleRate: 1.0 // Percentage of users to track (0.0-1.0)
})

📊 What Gets Tracked

Every metric includes:

• Duration - Action timing in milliseconds
• Action name - Your custom identifier
• Version (optional) - A tag you provide to group and compare events across releases
• Metadata - Custom data you provide
• Browser info - User agent, device type, screen resolution
• Location - Domain, URL, timezone
• Session data - Groups actions from the same user session

🐛 Debug Mode

dashdog.configure({ enableDebug: true })

// Console output:
// [DashDog] Action started { actionName: 'user-login' }
// [DashDog] Metric queued { duration: 1234, ... }
// [DashDog] Batch uploaded successfully { count: 5 }

🎯 Tips

• Use descriptive action names: 'user-checkout-flow' not 'checkout'
• Add meaningful metadata for better insights
• Use measure() for async operations - it handles errors automatically
• Set appropriate sample rates in production to control costs