Debugging Real-time Systems

Real-time bugs sulit di-reproduce: timing-dependent, state-dependent, multi-client. Tools dan teknik khusus dibutuhkan.

Browser DevTools

// Network tab → WS filter
// Lihat semua WebSocket frames (sent & received)
// Click pada WS connection → Messages tab

// Console: monitor events
socket.onAny((event, ...args) => {
  console.log(`[Socket.IO] ${event}`, args);
});

Server-side Logging

// Socket.IO debug mode
DEBUG=socket.io* node server.js

// Custom event logging
io.use((socket, next) => {
  const originalEmit = socket.emit;
  socket.emit = function (event, ...args) {
    console.log(`[OUT] ${socket.data.userId} ← ${event}`, args[0]);
    return originalEmit.apply(this, [event, ...args]);
  };
  next();
});

// Log all incoming events
socket.onAny((event, ...args) => {
  console.log(`[IN] ${socket.data.userId} → ${event}`, args[0]);
});

Common Issues

• Message ordering — Events arrive out of order. Use sequence numbers.
• Reconnection storms — Server restart → semua client reconnect sekaligus. Use exponential backoff with jitter.
• Memory leaks — Event listeners not cleaned up. Always remove listeners in cleanup.
• Stale state — Client cache tidak sync dengan server setelah reconnect. Re-fetch state on reconnect.

Testing Real-time

// Integration test: multiple clients
import { io as Client } from "socket.io-client";

test("two users can chat", async () => {
  const alice = Client("http://localhost:3001", { auth: { token: aliceToken } });
  const bob = Client("http://localhost:3001", { auth: { token: bobToken } });

  await Promise.all([
    new Promise(r => alice.on("connect", r)),
    new Promise(r => bob.on("connect", r)),
  ]);

  // Alice sends, Bob receives
  const received = new Promise(resolve => {
    bob.on("message:new", resolve);
  });

  alice.emit("message:send", { channelId: "1", text: "Hello Bob!" });

  const msg = await received;
  expect(msg.text).toBe("Hello Bob!");

  alice.close();
  bob.close();
});

Monitoring

• Track: active connections, messages/sec, connection errors, reconnect rate
• Alert: connection count drop > 50% (server issue), message latency > 1s
• Dashboard: real-time metrics of your real-time system