metrics from Frontend + dashboard

Author: trzysiek

docker-compose.yml

@@ -27,6 +27,21 @@ services:
       - order_data:/var/lib/postgresql/data
     networks:
       - grafana_network
+  pgadmin:
+    image: dpage/pgadmin4:latest
+    container_name: pgadmin
+    environment:
+      PGADMIN_DEFAULT_EMAIL: [email protected]
+      PGADMIN_DEFAULT_PASSWORD: admin
+      PGADMIN_CONFIG_SERVER_MODE: 'False'
+    ports:
+      - "5050:80"
+    networks:
+      - grafana_network
+    depends_on:
+      - product-db
+      - order-db
+
   #########################################################
   # SERVICES
   product-service:
@@ -49,8 +64,7 @@ services:
       - order-db
     networks:
       - grafana_network
-  #########################################################
-  # HEALTH MONITOR
+  
   frontend-service:
     build: ./frontend-service
     ports:
@@ -73,6 +87,8 @@ services:
     networks:
       - grafana_network
 
+  #########################################################
+  # HEALTH MONITOR
   health-monitor:
     build: ./health-monitor
     container_name: health-monitor
@@ -96,14 +112,12 @@ services:
       retries: 3
     restart: unless-stopped
 
-######################
-# MONITORING
-# - loki
-# - prometheus
-# - grafana
-
   #########################################################
   # MONITORING
+  # - loki
+  # - prometheus
+  # - grafana
+  #########################################################
   prometheus:
     image: prom/prometheus:latest
     container_name: prometheus

frontend-service/health-server.js

@@ -1,7 +1,56 @@
 const express = require('express')
+const client = require('prom-client')
 const app = express()
 const port = 3001
 
+// Create a Registry to register metrics
+const register = new client.Registry()
+
+// Add default metrics
+client.collectDefaultMetrics({ register })
+
+// Create custom metrics for frontend orders
+const orderMetrics = {
+  // Counter for total orders created
+  ordersCreated: new client.Counter({
+    name: 'frontend_orders_created_total',
+    help: 'Total number of orders created from frontend',
+    labelNames: ['user_email', 'status']
+  }),
+  
+  // Counter for cart operations
+  cartOperations: new client.Counter({
+    name: 'frontend_cart_operations_total',
+    help: 'Total number of cart operations',
+    labelNames: ['operation', 'user_email', 'status']
+  }),
+  
+  // Gauge for current cart items
+  cartItems: new client.Gauge({
+    name: 'frontend_cart_items_current',
+    help: 'Current number of items in user carts',
+    labelNames: ['user_email']
+  }),
+  
+  // Counter for user actions
+  userActions: new client.Counter({
+    name: 'frontend_user_actions_total',
+    help: 'Total number of user actions',
+    labelNames: ['action', 'user_email', 'tab', 'status']
+  }),
+  
+  // Histogram for action response times
+  actionDuration: new client.Histogram({
+    name: 'frontend_action_duration_seconds',
+    help: 'Duration of frontend actions',
+    labelNames: ['action', 'status'],
+    buckets: [0.1, 0.5, 1, 2, 5, 10]
+  })
+}
+
+// Register custom metrics
+Object.values(orderMetrics).forEach(metric => register.registerMetric(metric))
+
 // Enable JSON parsing
 app.use(express.json())
 
@@ -26,6 +75,49 @@ app.get('/health', (req, res) => {
   })
 })
 
+// Metrics endpoint for Prometheus
+app.get('/metrics', async (req, res) => {
+  try {
+    res.set('Content-Type', register.contentType)
+    res.end(await register.metrics())
+  } catch (error) {
+    console.error('Error generating metrics:', error)
+    res.status(500).end('Error generating metrics')
+  }
+})
+
+// Endpoint to record metrics from frontend
+app.post('/api/metrics', (req, res) => {
+  try {
+    const { type, name, labels = {}, value = 1 } = req.body
+    
+    if (!orderMetrics[name]) {
+      return res.status(400).json({ error: 'Unknown metric name' })
+    }
+    
+    const metric = orderMetrics[name]
+    
+    switch (type) {
+      case 'counter':
+        metric.inc(labels, value)
+        break
+      case 'gauge':
+        metric.set(labels, value)
+        break
+      case 'histogram':
+        metric.observe(labels, value)
+        break
+      default:
+        return res.status(400).json({ error: 'Unknown metric type' })
+    }
+    
+    res.status(200).json({ success: true })
+  } catch (error) {
+    console.error('Error recording metric:', error)
+    res.status(500).json({ error: 'Internal server error' })
+  }
+})
+
 // Proxy endpoint to forward logs to Loki
 app.post('/api/logs', async (req, res) => {
   try {

frontend-service/package.json

@@ -16,7 +16,8 @@
     "axios": "^1.6.0",
     "express": "^4.18.2",
     "vite": "^5.0.0",
-    "node-fetch": "^3.3.2"
+    "node-fetch": "^3.3.2",
+    "prom-client": "^15.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

frontend-service/src/App.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 import { logger } from './logger'
+import { metrics } from './metrics'
 
 const API_CONFIG = {
   PRODUCT_SERVICE: 'http://localhost:3001',
@@ -178,6 +179,10 @@ function App() {
         setCart(cartResponse.data)
         setOrders(ordersResponse.data)
 
+        // Record login metrics
+        await metrics.recordUserAction('login', userResponse.data.email, activeTab, 'success')
+        await metrics.updateCartItems(userResponse.data.email, cartResponse.data.length)
+        
         await logger.info('User logged in successfully', {
           action: 'login',
           user: userResponse.data.email
@@ -216,13 +221,21 @@ function App() {
       return
     }
 
+    const timer = metrics.createTimer('addToCart')
+    
     try {
       const headers = { Authorization: `Bearer ${token}` }
       await axios.post(`${API_CONFIG.ORDER_SERVICE}/users/${user.id}/cart/items`, {
         product_id: productId,
         quantity: quantity
       }, { headers })
       loadUserData()
+      
+      // Record metrics
+      await metrics.recordCartOperation('add', user.email, 'success')
+      await metrics.recordUserAction('addToCart', user.email, activeTab, 'success')
+      await timer.end('success')
+      
       await logger.info('Item added to cart successfully', {
         action: 'addToCart',
         productId,
@@ -233,6 +246,11 @@ function App() {
       // Reset quantity to 1 after adding
       setQuantities(prev => ({ ...prev, [productId]: 1 }))
     } catch (error) {
+      // Record failed metrics
+      await metrics.recordCartOperation('add', user.email, 'error')
+      await metrics.recordUserAction('addToCart', user.email, activeTab, 'error')
+      await timer.end('error')
+      
       await handleError(error, 'Failed to add item to cart', {
         action: 'addToCart',
         productId,
@@ -297,17 +315,38 @@ function App() {
       return
     }
 
+    const timer = metrics.createTimer('createOrder')
+    
     try {
       const headers = { Authorization: `Bearer ${token}` }
       await axios.post(`${API_CONFIG.ORDER_SERVICE}/orders`, {
         items: cart,
         shipping_address: { address: '123 Main St', city: 'City', country: 'Country' }
       }, { headers })
       loadUserData()
+      
+      // Record successful order metrics
+      await metrics.recordOrderCreated(user.email, 'success')
+      await metrics.recordUserAction('createOrder', user.email, activeTab, 'success')
+      await metrics.updateCartItems(user.email, 0) // Cart should be empty after order
+      await timer.end('success')
+      
+      await logger.info('Order created successfully', {
+        action: 'createOrder',
+        user: user.email,
+        itemCount: cart.length
+      })
       alert('Order created successfully!')
     } catch (error) {
-      console.error('Error creating order:', error)
-      alert('Error creating order')
+      // Record failed order metrics
+      await metrics.recordOrderCreated(user.email, 'error')
+      await metrics.recordUserAction('createOrder', user.email, activeTab, 'error')
+      await timer.end('error')
+      
+      await handleError(error, 'Failed to create order', {
+        action: 'createOrder',
+        itemCount: cart.length
+      })
     }
   }
 

frontend-service/src/metrics.js

@@ -0,0 +1,81 @@
+// Frontend metrics client that sends metrics to Prometheus via health server
+class MetricsClient {
+  constructor() {
+    this.metricsUrl = 'http://localhost:3004/api/metrics'
+  }
+
+  async sendMetric(type, name, labels = {}, value = 1) {
+    try {
+      await fetch(this.metricsUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type,
+          name,
+          labels,
+          value
+        })
+      })
+    } catch (error) {
+      console.error('Failed to send metric:', error)
+    }
+  }
+
+  // Order-related metrics
+  async recordOrderCreated(userEmail, status = 'success') {
+    await this.sendMetric('counter', 'ordersCreated', { 
+      user_email: userEmail, 
+      status 
+    })
+  }
+
+  // Cart operations
+  async recordCartOperation(operation, userEmail, status = 'success') {
+    await this.sendMetric('counter', 'cartOperations', { 
+      operation, 
+      user_email: userEmail, 
+      status 
+    })
+  }
+
+  // Update cart items count
+  async updateCartItems(userEmail, count) {
+    await this.sendMetric('gauge', 'cartItems', { 
+      user_email: userEmail 
+    }, count)
+  }
+
+  // User actions
+  async recordUserAction(action, userEmail, tab, status = 'success') {
+    await this.sendMetric('counter', 'userActions', { 
+      action, 
+      user_email: userEmail, 
+      tab, 
+      status 
+    })
+  }
+
+  // Action duration
+  async recordActionDuration(action, durationSeconds, status = 'success') {
+    await this.sendMetric('histogram', 'actionDuration', { 
+      action, 
+      status 
+    }, durationSeconds)
+  }
+
+  // Helper to time actions
+  createTimer(action) {
+    const startTime = Date.now()
+    return {
+      end: async (status = 'success') => {
+        const duration = (Date.now() - startTime) / 1000
+        await this.recordActionDuration(action, duration, status)
+      }
+    }
+  }
+}
+
+export const metrics = new MetricsClient()
+export default metrics