Practical Recipes¶

Copy-pasteable real-world recipes showcasing how to integrate console-graph into Node.js applications, CI/CD pipelines, and web servers.

Node.js Memory & GC Monitoring¶

Track the active heap usage of your Node.js application. Useful for identifying memory leaks and garbage collection pattern drops during development stress tests.

import { ConsoleGraph } from 'console-graph';

const memoryTracker = new ConsoleGraph({
  label: 'Heap Memory',
  unit: 'MB',
  gradient: 'cool',
  bufferSize: 30,
  showStats: true
});

setInterval(() => {
  const usage = process.memoryUsage().heapUsed / 1024 / 1024;
  memoryTracker.log(usage);
}, 1000);

Express.js Request Latency Logger¶

Graph HTTP response latencies inside your server console. This provides a direct, low-overhead stream showing response time spikes directly inside your development log outputs.

import express from 'express';
import { ConsoleGraph } from 'console-graph';

const app = express();

const latencyGraph = new ConsoleGraph({
  label: 'HTTP Latency',
  unit: 'ms',
  gradient: 'ocean',
  bufferSize: 25,
  showStats: true
});

// Response time middleware
app.use((req, res, next) => {
  const start = process.hrtime();

  res.on('finish', () => {
    const diff = process.hrtime(start);
    const timeInMs = (diff[0] * 1e9 + diff[1]) / 1e6;

    // Log the request latency to the chart
    latencyGraph.log(timeInMs);
  });

  next();
});

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

CI/CD Pipeline Build Timing Tracker¶

Log historical step durations during build scripts or deployment phases to verify speed optimization gains.

import { ConsoleGraph } from 'console-graph';

const buildTimes = new ConsoleGraph({
  label: 'Build Duration',
  unit: 's',
  gradient: 'green',
  bufferSize: 10,
  showBounds: true
});

// Run this at the end of every build step (e.g. read history from a build database/json file)
const historicalSteps = [15.2, 14.8, 16.1, 13.9, 12.4, 11.8, 12.1, 9.8];
historicalSteps.forEach((duration) => {
  buildTimes.push(duration);
});

console.log('\n--- Pipeline Timing Trend ---');
buildTimes.print();

Web Browser Real-Time Telemetry¶

Stream client-side performance parameters directly into Chrome/Firefox/Safari DevTools.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>console-graph Browser Demo</title>
</head>
<body>
  <h1>Open your browser DevTools Console!</h1>

  <script type="module">
    import 'https://cdn.jsdelivr.net/npm/console-graph/dist/register.mjs';

    // Graph the FPS frame count or mouse positioning
    let lastTime = performance.now();
    let frames = 0;

    function loop() {
      frames++;
      const now = performance.now();
      if (now >= lastTime + 1000) {
        // Log frames per second to the global patched console
        console.graph(frames, {
          label: 'FPS Monitor',
          min: 0,
          max: 60,
          gradient: 'heat'
        });
        frames = 0;
        lastTime = now;
      }
      requestAnimationFrame(loop);
    }

    loop();
  </script>
</body>
</html>