Comprehensive Frontend Monitoring Guide: From Sentry to Performance Insights

npm install @sentry/react @sentry/tracing

// src/sentry.js
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  integrations: [
    new BrowserTracing({
      // Capture interactions like clicks, navigation
      tracePropagationTargets: ['localhost', /^https:\/\/yourapi\.domain\.com\/api/],
    }),
  ],
  // Performance monitoring
  tracesSampleRate: 1.0, // Adjust for production
  // Release tracking
  release: process.env.REACT_APP_VERSION,
  environment: process.env.NODE_ENV,
})

// src/App.js
import * as Sentry from '@sentry/react'

const App = () => {
  return (
    <Sentry.ErrorBoundary fallback={ErrorFallback} showDialog>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Router>
    </Sentry.ErrorBoundary>
  )
}

// Custom error fallback component
const ErrorFallback = ({ error, resetError }) => (
  <div className="error-boundary">
    <h2>Something went wrong</h2>
    <p>We've been notified and are working to fix this issue.</p>
    <button onClick={resetError}>Try Again</button>
    <details>
      <summary>Error Details</summary>
      <pre>{error.message}</pre>
    </details>
  </div>
)

export default Sentry.withSentryConfig(App)

// Add user context
Sentry.setUser({
  id: user.id,
  email: user.email,
  username: user.username,
})

// Add custom tags for filtering
Sentry.setTag('feature', 'checkout')
Sentry.setTag('user_type', 'premium')

// Add breadcrumbs for debugging
Sentry.addBreadcrumb({
  message: 'User clicked checkout button',
  level: 'info',
  category: 'ui.click',
})

// Custom error with context
try {
  await processPayment(paymentData)
} catch (error) {
  Sentry.withScope((scope) => {
    scope.setContext('payment', {
      amount: paymentData.amount,
      currency: paymentData.currency,
      method: paymentData.method,
    })
    scope.setLevel('error')
    Sentry.captureException(error)
  })
}

// src/performance.js
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

const sendToAnalytics = (metric) => {
  // Send to your analytics service
  gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
    event_category: 'Web Vitals',
    event_label: metric.id,
    non_interaction: true,
  })

  // Also send to Sentry
  Sentry.addBreadcrumb({
    message: `${metric.name}: ${metric.value}`,
    level: 'info',
    category: 'performance',
  })
}

// Track all Core Web Vitals
getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getFCP(sendToAnalytics)
getLCP(sendToAnalytics)
getTTFB(sendToAnalytics)

// Performance marks and measures
class PerformanceTracker {
  static startTiming(name) {
    performance.mark(`${name}-start`)
  }

  static endTiming(name) {
    performance.mark(`${name}-end`)
    performance.measure(name, `${name}-start`, `${name}-end`)

    const measure = performance.getEntriesByName(name)[0]

    // Send to monitoring service
    this.sendMetric({
      name,
      value: measure.duration,
      type: 'timing',
    })
  }

  static sendMetric(metric) {
    // Send to your analytics
    if (window.gtag) {
      gtag('event', 'custom_timing', {
        value: Math.round(metric.value),
        event_category: 'Performance',
        event_label: metric.name,
      })
    }

    // Send to Sentry
    Sentry.addBreadcrumb({
      message: `Custom timing: ${metric.name} took ${metric.value}ms`,
      level: 'info',
      category: 'performance',
    })
  }
}

// Usage in components
const DataComponent = () => {
  useEffect(() => {
    const fetchData = async () => {
      PerformanceTracker.startTiming('data-fetch')
      try {
        const data = await api.getData()
        setData(data)
      } finally {
        PerformanceTracker.endTiming('data-fetch')
      }
    }

    fetchData()
  }, [])

  return <div>{/* component JSX */}</div>
}

// src/analytics.js
class UserAnalytics {
  static trackClick(element, properties = {}) {
    const eventData = {
      event: 'click',
      element: element.tagName.toLowerCase(),
      text: element.textContent?.slice(0, 100),
      href: element.href,
      classes: element.className,
      timestamp: Date.now(),
      ...properties,
    }

    // Send to multiple services
    this.sendToSentry(eventData)
    this.sendToGoogleAnalytics(eventData)
  }

  static trackFormInteraction(formName, field, action) {
    const eventData = {
      event: 'form_interaction',
      form: formName,
      field,
      action, // focus, blur, change, submit
      timestamp: Date.now(),
    }

    this.sendToSentry(eventData)
  }

  static sendToSentry(data) {
    Sentry.addBreadcrumb({
      message: `User interaction: ${data.event}`,
      level: 'info',
      category: 'user',
      data,
    })
  }
}

// Auto-track clicks
document.addEventListener('click', (event) => {
  UserAnalytics.trackClick(event.target, {
    pageUrl: window.location.href,
    userAgent: navigator.userAgent,
  })
})

// src/hooks/useFormTracking.js
import { useEffect, useRef } from 'react'

export const useFormTracking = (formName, formData) => {
  const startTime = useRef(Date.now())
  const hasInteracted = useRef(false)

  useEffect(() => {
    const handleBeforeUnload = () => {
      if (hasInteracted.current && Object.keys(formData).length > 0) {
        // Track form abandonment
        UserAnalytics.trackFormInteraction(formName, null, 'abandon')
      }
    }

    window.addEventListener('beforeunload', handleBeforeUnload)
    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [formName, formData])

  const trackFieldChange = (fieldName) => {
    hasInteracted.current = true
    UserAnalytics.trackFormInteraction(formName, fieldName, 'change')
  }

  const trackSubmit = () => {
    const duration = Date.now() - startTime.current
    UserAnalytics.trackFormInteraction(formName, null, 'submit')

    // Track form completion time
    PerformanceTracker.sendMetric({
      name: `form_completion_${formName}`,
      value: duration,
      type: 'timing',
    })
  }

  return { trackFieldChange, trackSubmit }
}

// Usage in form component
const ContactForm = () => {
  const [formData, setFormData] = useState({})
  const { trackFieldChange, trackSubmit } = useFormTracking('contact', formData)

  const handleSubmit = (e) => {
    e.preventDefault()
    trackSubmit()
    // Submit form...
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        onChange={(e) => {
          setFormData({ ...formData, email: e.target.value })
          trackFieldChange('email')
        }}
      />
    </form>
  )
}

// src/api/monitor.js
class APIMonitor {
  static wrapFetch() {
    const originalFetch = window.fetch

    window.fetch = async (...args) => {
      const startTime = performance.now()
      const url = args[0]

      try {
        const response = await originalFetch(...args)
        const duration = performance.now() - startTime

        this.trackAPICall({
          url,
          method: args[1]?.method || 'GET',
          status: response.status,
          duration,
          success: response.ok,
        })

        return response
      } catch (error) {
        const duration = performance.now() - startTime

        this.trackAPICall({
          url,
          method: args[1]?.method || 'GET',
          duration,
          success: false,
          error: error.message,
        })

        throw error
      }
    }
  }

  static trackAPICall(data) {
    // Send to Sentry
    Sentry.addBreadcrumb({
      message: `API call to ${data.url}`,
      level: data.success ? 'info' : 'error',
      category: 'http',
      data,
    })

    // Track slow API calls
    if (data.duration > 2000) {
      Sentry.captureMessage(`Slow API call: ${data.url} took ${data.duration}ms`, 'warning')
    }

    // Send to analytics
    gtag('event', 'api_call', {
      event_category: 'API',
      event_label: data.url,
      value: Math.round(data.duration),
      custom_map: {
        status: data.status,
        success: data.success,
      },
    })
  }
}

// Initialize API monitoring
APIMonitor.wrapFetch()

// src/monitoring/memory.js
class MemoryMonitor {
  static startMonitoring() {
    if (!('memory' in performance)) return

    setInterval(() => {
      const memory = performance.memory
      const memoryData = {
        usedJSHeapSize: memory.usedJSHeapSize,
        totalJSHeapSize: memory.totalJSHeapSize,
        jsHeapSizeLimit: memory.jsHeapSizeLimit,
      }

      // Alert if memory usage is high
      const usagePercent = (memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100

      if (usagePercent > 80) {
        Sentry.captureMessage(`High memory usage: ${usagePercent.toFixed(2)}%`, 'warning')
      }

      // Send memory metrics
      this.sendMemoryMetrics(memoryData)
    }, 30000) // Check every 30 seconds
  }

  static sendMemoryMetrics(data) {
    Sentry.addBreadcrumb({
      message: 'Memory usage check',
      level: 'info',
      category: 'performance',
      data,
    })
  }
}

// src/monitoring/features.js
class FeatureMonitor {
  static trackFeatureUsage(featureName, enabled, userId) {
    const eventData = {
      feature: featureName,
      enabled,
      userId,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      url: window.location.href,
    }

    // Track in Sentry
    Sentry.setTag('feature_flag', `${featureName}:${enabled}`)
    Sentry.addBreadcrumb({
      message: `Feature ${featureName} ${enabled ? 'enabled' : 'disabled'}`,
      level: 'info',
      category: 'feature',
      data: eventData,
    })

    // Send to analytics
    gtag('event', 'feature_flag', {
      event_category: 'Features',
      event_label: featureName,
      value: enabled ? 1 : 0,
    })
  }

  static trackFeatureError(featureName, error) {
    Sentry.withScope((scope) => {
      scope.setTag('feature', featureName)
      scope.setLevel('error')
      Sentry.captureException(error)
    })
  }
}

// src/monitoring/index.js
class MonitoringStack {
  static init() {
    // Initialize error tracking
    this.initSentry()

    // Initialize performance monitoring
    this.initPerformanceTracking()

    // Initialize user analytics
    this.initUserTracking()

    // Initialize API monitoring
    this.initAPIMonitoring()
  }

  static initSentry() {
    // Sentry configuration (shown earlier)
  }

  static initPerformanceTracking() {
    // Core Web Vitals tracking
    import('./performance').then((module) => {
      module.initWebVitals()
    })
  }

  static initUserTracking() {
    // User interaction tracking
    if (process.env.NODE_ENV === 'production') {
      this.initGoogleAnalytics()
      this.initHotjar()
    }
  }

  static initAPIMonitoring() {
    APIMonitor.wrapFetch()
    MemoryMonitor.startMonitoring()
  }
}

// Initialize monitoring when app starts
MonitoringStack.init()

// src/monitoring/alerts.js
class AlertManager {
  static checkHealthMetrics() {
    const healthChecks = [this.checkErrorRate(), this.checkPerformance(), this.checkAPIHealth()]

    Promise.all(healthChecks).then((results) => {
      results.forEach((result) => {
        if (result.status === 'critical') {
          this.sendCriticalAlert(result)
        }
      })
    })
  }

  static checkErrorRate() {
    // Check error rate over last 5 minutes
    const errorRate = this.calculateErrorRate()

    if (errorRate > 5) {
      // 5% error rate threshold
      return {
        status: 'critical',
        type: 'error_rate',
        value: errorRate,
        message: `Error rate is ${errorRate}% - above 5% threshold`,
      }
    }

    return { status: 'ok', type: 'error_rate' }
  }

  static sendCriticalAlert(alert) {
    // Send to Slack, email, etc.
    Sentry.captureMessage(`Critical alert: ${alert.message}`, 'error')
  }
}

// Phase 1: Basic error tracking
const basicMonitoring = {
  errorTracking: true,
  basicPerformance: true,
  userTracking: false,
  advancedAnalytics: false,
}

// Phase 2: Add performance monitoring
const intermediateMonitoring = {
  ...basicMonitoring,
  coreWebVitals: true,
  apiMonitoring: true,
  customMetrics: true,
}

// Phase 3: Full observability
const advancedMonitoring = {
  ...intermediateMonitoring,
  userTracking: true,
  sessionReplay: true,
  featureFlags: true,
  businessMetrics: true,
}

// src/monitoring/privacy.js
class PrivacyMonitor {
  static sanitizeData(data) {
    // Remove sensitive information
    const sensitiveFields = ['password', 'ssn', 'creditCard', 'email']

    return Object.keys(data).reduce((clean, key) => {
      if (sensitiveFields.some((field) => key.toLowerCase().includes(field))) {
        clean[key] = '[REDACTED]'
      } else {
        clean[key] = data[key]
      }
      return clean
    }, {})
  }

  static respectUserConsent() {
    // Check user consent before tracking
    const hasConsent = localStorage.getItem('analytics-consent') === 'true'
    return hasConsent
  }
}

// src/monitoring/budget.js
class PerformanceBudget {
  static budgets = {
    bundleSize: 250000, // 250KB
    imageSize: 100000, // 100KB per image
    totalImages: 20, // Max 20 images per page
    apiCalls: 10, // Max 10 API calls per page load
  }

  static checkBudgets() {
    const results = {
      bundleSize: this.checkBundleSize(),
      imageCount: this.checkImageCount(),
      apiCalls: this.checkAPICalls(),
    }

    Object.entries(results).forEach(([metric, result]) => {
      if (result.exceeded) {
        Sentry.captureMessage(
          `Performance budget exceeded: ${metric} is ${result.actual} (limit: ${result.limit})`,
          'warning'
        )
      }
    })
  }
}