How to measure app performance in Replit

1// server/middleware/timing.js
2export function timingMiddleware(req, res, next) {
3  const start = process.hrtime.bigint();
4
5  res.on('finish', () => {
6    const end = process.hrtime.bigint();
7    const durationMs = Number(end - start) / 1_000_000;
8
9    console.log(
10      `${req.method} ${req.path} ${res.statusCode} ${durationMs.toFixed(1)}ms`
11    );
12
13    // Flag slow requests
14    if (durationMs > 1000) {
15      console.warn(`SLOW REQUEST: ${req.method} ${req.path} took ${durationMs.toFixed(0)}ms`);
16    }
17  });
18
19  next();
20}
21
22// In server/index.js:
23import { timingMiddleware } from './middleware/timing.js';
24app.use(timingMiddleware);

1-- Create metrics table
2CREATE TABLE IF NOT EXISTS performance_metrics (
3  id SERIAL PRIMARY KEY,
4  method VARCHAR(10),
5  path VARCHAR(255),
6  status_code INTEGER,
7  duration_ms NUMERIC(10, 2),
8  created_at TIMESTAMP DEFAULT NOW()
9);
10
11CREATE INDEX idx_metrics_created ON performance_metrics(created_at);
12CREATE INDEX idx_metrics_path ON performance_metrics(path);

1// GET /api/performance?days=7
2router.get('/api/performance', async (req, res) => {
3  const adminKey = req.headers['x-admin-key'];
4  if (adminKey !== process.env.ADMIN_KEY) {
5    return res.status(403).json({ error: 'Unauthorized' });
6  }
7
8  const days = parseInt(req.query.days) || 7;
9
10  try {
11    const result = await pool.query(
12      `SELECT
13         path,
14         COUNT(*) as total_requests,
15         ROUND(AVG(duration_ms), 1) as avg_ms,
16         ROUND(PERCENTILE_CONT(0.5) WITHIN GROUP (ORDER BY duration_ms), 1) as median_ms,
17         ROUND(PERCENTILE_CONT(0.95) WITHIN GROUP (ORDER BY duration_ms), 1) as p95_ms,
18         MAX(duration_ms) as max_ms
19       FROM performance_metrics
20       WHERE created_at > NOW() - INTERVAL '1 day' * $1
21       GROUP BY path
22       ORDER BY avg_ms DESC`,
23      [days]
24    );
25
26    res.json({
27      period_days: days,
28      generated_at: new Date().toISOString(),
29      endpoints: result.rows
30    });
31  } catch (err) {
32    console.error('Performance report error:', err.message);
33    res.status(500).json({ error: 'Report generation failed' });
34  }
35});

1// src/utils/webVitals.ts
2export function reportWebVitals() {
3  if (typeof window === 'undefined') return;
4
5  window.addEventListener('load', () => {
6    setTimeout(() => {
7      const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
8      if (!nav) return;
9
10      const metrics = {
11        dns: Math.round(nav.domainLookupEnd - nav.domainLookupStart),
12        tcp: Math.round(nav.connectEnd - nav.connectStart),
13        ttfb: Math.round(nav.responseStart - nav.requestStart),
14        domLoad: Math.round(nav.domContentLoadedEventEnd - nav.fetchStart),
15        fullLoad: Math.round(nav.loadEventEnd - nav.fetchStart)
16      };
17
18      console.log('Page performance:', metrics);
19
20      // Send to backend
21      fetch('/api/events', {
22        method: 'POST',
23        headers: { 'Content-Type': 'application/json' },
24        body: JSON.stringify({
25          event_type: 'performance',
26          page: window.location.pathname,
27          metadata: metrics
28        })
29      }).catch(() => {});
30    }, 0);
31  });
32}