feat: enhance client tests with additional scenarios for sendBeacon and batch processing, and update route tests for improved error handling and logging behavior

Author: regenrek

.browser-echo-mcp.json

@@ -1 +1 @@
-{"url":"http://127.0.0.1:5179","routeLogs":"/__client-logs","timestamp":1755797556236,"pid":33695}
+{"url":"http://127.0.0.1:5179","routeLogs":"/__client-logs","timestamp":1755811764407,"pid":28310}

packages/core/test/client.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { initBrowserEcho } from '../src/client';
+import * as coreIndex from '../src/index';
 
 describe('@browser-echo/core', () => {
   beforeEach(() => {
@@ -36,4 +37,73 @@ describe('@browser-echo/core', () => {
       (navigator as any).sendBeacon = originalSendBeacon;
     }
   });
+
+  it('uses sendBeacon when available', async () => {
+    const originalSendBeacon = (navigator as any).sendBeacon;
+    const sendBeaconSpy = vi.fn().mockReturnValue(true);
+    (navigator as any).sendBeacon = sendBeaconSpy;
+
+    const fetchSpy = vi.spyOn(globalThis, 'fetch' as any).mockResolvedValue({} as any);
+
+    initBrowserEcho({ route: '/__client-logs', include: ['log'], preserveConsole: true });
+    console.log('hello beacon');
+    await new Promise(r => setTimeout(r, 350));
+
+    expect(sendBeaconSpy).toHaveBeenCalledTimes(1);
+    expect(fetchSpy).not.toHaveBeenCalled();
+
+    fetchSpy.mockRestore();
+    (navigator as any).sendBeacon = originalSendBeacon;
+  });
+
+  it('flushes immediately when batch size threshold is reached', async () => {
+    const originalSendBeacon = (navigator as any).sendBeacon;
+    try { delete (navigator as any).sendBeacon; } catch {}
+
+    const fetchSpy = vi.spyOn(globalThis, 'fetch' as any).mockResolvedValue({} as any);
+
+    initBrowserEcho({ route: '/__client-logs', include: ['log'], batch: { size: 2, interval: 1000 } });
+
+    console.log('a');
+    console.log('b'); // reaching batch size triggers flush
+
+    await new Promise(r => setTimeout(r, 50));
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+
+    fetchSpy.mockRestore();
+    if (originalSendBeacon !== undefined) {
+      (navigator as any).sendBeacon = originalSendBeacon;
+    }
+  });
+
+  it('does not call original console when preserveConsole is false', async () => {
+    const originalSendBeacon = (navigator as any).sendBeacon;
+    try { delete (navigator as any).sendBeacon; } catch {}
+    const fetchSpy = vi.spyOn(globalThis, 'fetch' as any).mockResolvedValue({} as any);
+
+    // Install a stub as the original console.log to detect invocations
+    const originalConsoleLog = console.log;
+    let originalCalled = 0;
+    // @ts-ignore
+    console.log = function stub() { originalCalled++; } as any;
+
+    initBrowserEcho({ route: '/__client-logs', include: ['log'], preserveConsole: false });
+    console.log('should not call original');
+
+    await new Promise(r => setTimeout(r, 50));
+    expect(originalCalled).toBe(0);
+
+    // Cleanup
+    console.log = originalConsoleLog;
+    fetchSpy.mockRestore();
+    if (originalSendBeacon !== undefined) {
+      (navigator as any).sendBeacon = originalSendBeacon;
+    }
+  });
+
+  it('public API exports stay unchanged', () => {
+    const keys = Object.keys(coreIndex as any).sort();
+    expect(keys).toEqual(['initBrowserEcho']);
+    expect(typeof (coreIndex as any).initBrowserEcho).toBe('function');
+  });
 });

packages/mcp/test/e2e.next.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
+import { startMcpServer } from '../src/index';
+
+const HOST = '127.0.0.1';
+const PORT = 5183;
+const BASE = `http://${HOST}:${PORT}`;
+
+describe('E2E: Next route → MCP ingest', () => {
+  const oldEnv = { ...process.env } as any;
+  let POST: (req: any) => Promise<any>;
+  beforeAll(async () => {
+    await startMcpServer({ name: 'tests', version: 'test', host: HOST, port: PORT, endpoint: '/mcp', logsRoute: '/__client-logs' });
+    process.env.BROWSER_ECHO_MCP_URL = BASE; // ensure route forwards
+    // Import after setting env so the route reads the configured MCP URL
+    const mod: any = await import('../../next/src/route');
+    POST = mod.POST;
+  }, 30_000);
+
+  afterAll(async () => {
+    process.env = oldEnv;
+  });
+
+  it('forwards an error log to MCP', async () => {
+    const req: any = { json: async () => ({ sessionId: 'n3xte2e', entries: [{ level: 'error', text: 'next e2e err' }] }) };
+    const res: any = await POST(req as any);
+    expect((res as any).status).toBe(204);
+
+    await new Promise((r) => setTimeout(r, 200));
+    const diag = await fetch(`${BASE}/__client-logs`);
+    expect(diag.status).toBe(200);
+    const body = await diag.text();
+    expect(body).toContain('next e2e err');
+  });
+
+  it('includes warn/info as well', async () => {
+    const req: any = { json: async () => ({ sessionId: 'n3xtwi', entries: [
+      { level: 'warn', text: 'next e2e warn' },
+      { level: 'info', text: 'next e2e info' }
+    ] }) };
+    const res: any = await POST(req as any);
+    expect((res as any).status).toBe(204);
+
+    await new Promise((r) => setTimeout(r, 200));
+    const diag = await fetch(`${BASE}/__client-logs`);
+    const body = await diag.text();
+    expect(body).toContain('next e2e warn');
+    expect(body).toContain('next e2e info');
+  });
+});
+
+

packages/mcp/test/e2e.nuxt.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
+import { startMcpServer } from '../src/index';
+import { createApp, createRouter, toNodeListener } from 'h3';
+import { createServer } from 'node:http';
+
+const HOST = '127.0.0.1';
+const PORT = 5184;
+const BASE = `http://${HOST}:${PORT}`;
+
+// Minimal h3 event mock compatible with our handler
+function makeEvent() { return {} as any; }
+
+describe('E2E: Nuxt handler → MCP ingest', () => {
+  const oldEnv = { ...process.env } as any;
+  let handler: (e: any) => Promise<any>;
+  beforeAll(async () => {
+    await startMcpServer({ host: HOST, port: PORT, endpoint: '/mcp', logsRoute: '/__client-logs' });
+    process.env.BROWSER_ECHO_MCP_URL = BASE;
+    const mod: any = await import('../../nuxt/src/runtime/server/handler');
+    handler = mod.default || mod;
+  }, 30_000);
+
+  afterAll(async () => {
+    process.env = oldEnv;
+  });
+
+  it('flushes an error entry to MCP', async () => {
+    // Spin up a tiny H3 server that mounts the Nuxt handler and POST a payload
+    const app = createApp();
+    const router = createRouter();
+    const route = '/__nuxt-e2e';
+    router.post(route, handler as any);
+    app.use(router);
+
+    const server = createServer(toNodeListener(app));
+    await new Promise<void>((resolve) => server.listen(0, '127.0.0.1', resolve));
+    const address = server.address();
+    const port = typeof address === 'object' && address ? (address as any).port : 0;
+
+    const res = await fetch(`http://127.0.0.1:${port}${route}`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ sessionId: 'nuxte2e', entries: [{ level: 'error', text: 'nuxt e2e err' }] })
+    });
+    // h3 handler returns text body but we only care it didn't error and MCP forwarding occurred
+    expect(res.status).toBe(204);
+
+    server.close();
+
+    await new Promise((r) => setTimeout(r, 200));
+    const diag = await fetch(`${BASE}/__client-logs`);
+    expect(diag.status).toBe(200);
+    const body = await diag.text();
+    expect(body).toContain('nuxt e2e err');
+  });
+});
+
+

packages/mcp/test/e2e.vite.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { startMcpServer } from '../src/index';
+import browserEcho from '../../vite/src/index';
+
+const HOST = '127.0.0.1';
+const PORT = 5182; // separate port from other smoke tests
+const BASE = `http://${HOST}:${PORT}`;
+
+function makeServerMock() {
+  const logs: any[] = [];
+  const logger = {
+    info: (m: string) => logs.push(['info', m]),
+    warn: (m: string) => logs.push(['warn', m]),
+    error: (m: string) => logs.push(['error', m])
+  };
+  const handlers: Array<[string, Function]> = [];
+  const server: any = {
+    config: { logger },
+    middlewares: { use: (route: string, fn: Function) => handlers.push([route, fn]) }
+  };
+  return { server, logs, handlers };
+}
+
+async function httpGet(url: string) {
+  const res = await fetch(url);
+  return { status: res.status, text: await res.text() };
+}
+
+describe('E2E: Vite → MCP forwarding via middleware', () => {
+  beforeAll(async () => {
+    await startMcpServer({ host: HOST, port: PORT, endpoint: '/mcp', logsRoute: '/__client-logs' });
+  }, 30_000);
+
+  afterAll(async () => {
+    // streamable server persists for the test process
+  });
+
+  it('forwards browser logs to MCP ingest', async () => {
+    const { server, handlers } = makeServerMock();
+    const plugin = browserEcho({ mcp: { url: BASE, suppressTerminal: true } });
+    (plugin as any).configureServer(server);
+    const [route, fn] = handlers[0];
+    expect(route).toBe('/__client-logs');
+
+    // simulate incoming POST to vite middleware
+    const req: any = new (class {
+      method = 'POST';
+      listeners: any = {};
+      on(evt: string, cb: any) { this.listeners[evt] = cb; }
+      trigger(data: any) { this.listeners['data']?.(data); this.listeners['end']?.(); }
+    })();
+    const res: any = { statusCode: 0, end: (cb?: any) => cb?.() };
+    const payload = JSON.stringify({ sessionId: 'v1teee2e', entries: [{ level: 'error', text: 'vite→mcp e2e' }] });
+    setTimeout(() => req.trigger(Buffer.from(payload)), 0);
+    await new Promise<void>((resolve) => { res.end = () => { resolve(); }; fn(req, res, () => {}); });
+    expect(res.statusCode).toBe(204);
+
+    // give the async forward a moment
+    await new Promise((r) => setTimeout(r, 200));
+    const diag = await httpGet(`${BASE}/__client-logs`);
+    expect(diag.status).toBe(200);
+    expect(diag.text).toContain('vite→mcp e2e');
+  });
+});
+
+

packages/mcp/test/http.smoke.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { startMcpServer } from '../src/index';
+
+const HOST = '127.0.0.1';
+const PORT = 5181; // use a non-default port to avoid clashes with stdio test
+const BASE = `http://${HOST}:${PORT}`;
+
+async function httpPost(path: string, body: any, headers: Record<string,string> = {}) {
+  return await fetch(`${BASE}${path}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', ...headers },
+    body: JSON.stringify(body)
+  });
+}
+
+async function httpGet(path: string, headers: Record<string,string> = {}) {
+  return await fetch(`${BASE}${path}`, { method: 'GET', headers });
+}
+
+describe('@browser-echo/mcp streamable HTTP transport (smoke)', () => {
+  beforeAll(async () => {
+    await startMcpServer({ host: HOST, port: PORT, endpoint: '/mcp', logsRoute: '/__client-logs' });
+  }, 30_000);
+
+  afterAll(async () => {
+    // streamable server keeps running for the test process; no explicit stop API exposed
+  });
+
+  it('exposes health endpoint and rejects GET /mcp without session id', async () => {
+    const health = await httpGet('/health');
+    expect(health.status).toBe(200);
+    const txt = await health.text();
+    expect(txt).toBe('ok');
+
+    const resNoSid = await httpGet('/mcp');
+    expect(resNoSid.status).toBe(405);
+  });
+
+  it('ingests a browser log and shows in GET diagnostics', async () => {
+    const payload = { sessionId: 'feedf00d', entries: [{ level: 'warn', text: 'http smoke' }] };
+    const ingest = await httpPost('/__client-logs', payload);
+    expect(ingest.status).toBe(204);
+
+    const diag = await httpGet('/__client-logs');
+    expect(diag.status).toBe(200);
+    const body = await diag.text();
+    expect(body).toContain('http smoke');
+  });
+});
+
+

packages/mcp/test/stdio.smoke.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { McpTestClient } from './utils/mcpTestClient';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+describe('@browser-echo/mcp stdio transport (smoke)', () => {
+  let client: McpTestClient;
+
+  beforeAll(async () => {
+    const cli = join(__dirname, '..', 'bin', 'cli.mjs');
+    client = new McpTestClient({ cliEntryPoint: cli });
+    await client.connect();
+  }, 30_000);
+
+  afterAll(async () => {
+    await client?.close();
+  });
+
+  it('lists tools', async () => {
+    const out = await client.listTools();
+    // minimal shape validation
+    expect(out?.tools?.length).toBeGreaterThan(0);
+    const names = (out.tools || []).map((t: any) => t.name);
+    expect(names).toContain('get_logs');
+    expect(names).toContain('clear_logs');
+  });
+
+  it('ingests logs via HTTP ingest and retrieves via get_logs', async () => {
+    // Post a log entry to the ingest endpoint that stdio server exposes
+    const payload = { sessionId: 'deadbeef', entries: [{ level: 'error', text: 'stdio smoke' }] };
+    const res = await fetch('http://127.0.0.1:5179/__client-logs', {
+      method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload)
+    });
+    expect(res.status).toBe(204);
+
+    const got = await client.callTool('get_logs', { session: 'deadbeef', level: ['error'], includeStack: false, limit: 10 });
+    const text = String(got?.content?.[0]?.text || '');
+    expect(text).toContain('stdio smoke');
+  });
+
+  it('clears logs via clear_logs', async () => {
+    const result = await client.callTool('clear_logs', { scope: 'all' });
+    const msg = JSON.stringify(result);
+    expect(msg).toContain('cleared');
+  });
+});
+
+