@cedarai/session-replay-sdk 0.1.0

package/src/network.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { NetworkCapture } from './network.js';
+import type { NetworkSessionEvent } from './types.js';
+
+describe('NetworkCapture', () => {
+  let capture: NetworkCapture;
+  let events: NetworkSessionEvent[];
+  let originalFetch: typeof fetch;
+
+  beforeEach(() => {
+    events = [];
+    // Mock fetch as a basic function
+    originalFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      headers: new Headers({ 'content-type': 'application/json' }),
+      clone: () => ({
+        text: () => Promise.resolve('{"data":"response"}'),
+        headers: new Headers({ 'content-type': 'application/json' }),
+      }),
+      text: () => Promise.resolve('{"data":"response"}'),
+    }) as any;
+    vi.stubGlobal('fetch', originalFetch);
+  });
+
+  afterEach(() => {
+    capture?.stop();
+    vi.restoreAllMocks();
+  });
+
+  it('intercepts fetch calls and captures request/response', async () => {
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    await fetch('https://api.getcedar.ai/graphql', {
+      method: 'POST',
+      body: JSON.stringify({ query: '{ users { id } }', operationName: 'GetUsers' }),
+    });
+
+    // Wait for async capture to complete
+    await vi.waitFor(() => expect(events).toHaveLength(1));
+
+    expect(events[0].type).toBe('network');
+    expect(events[0].data.method).toBe('POST');
+    expect(events[0].data.url).toBe('https://api.getcedar.ai/graphql');
+    expect(events[0].data.status).toBe(200);
+  });
+
+  it('extracts GraphQL operation name from request body', async () => {
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    await fetch('https://api.getcedar.ai/graphql', {
+      method: 'POST',
+      body: JSON.stringify({ query: '{ users { id } }', operationName: 'GetUsers' }),
+    });
+
+    await vi.waitFor(() => expect(events).toHaveLength(1));
+    expect(events[0].data.graphqlOperationName).toBe('GetUsers');
+  });
+
+  it('does NOT capture requests to the SDK server URL', async () => {
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    await fetch('https://replay.getcedar.ai/api/ingest', { method: 'POST', body: '{}' });
+
+    // Give it a moment to process
+    await new Promise((r) => setTimeout(r, 10));
+    expect(events).toHaveLength(0);
+  });
+
+  it('captures GET requests', async () => {
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    await fetch('https://api.getcedar.ai/users');
+
+    await vi.waitFor(() => expect(events).toHaveLength(1));
+    expect(events[0].data.method).toBe('GET');
+  });
+
+  it('captures fetch errors', async () => {
+    (originalFetch as any).mockRejectedValueOnce(new Error('Network failed'));
+
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    try {
+      await fetch('https://api.getcedar.ai/down');
+    } catch {
+      // Expected
+    }
+
+    await vi.waitFor(() => expect(events).toHaveLength(1));
+    expect(events[0].data.error).toBe('Network failed');
+  });
+
+  it('records timing information', async () => {
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    await fetch('https://api.getcedar.ai/users');
+
+    await vi.waitFor(() => expect(events).toHaveLength(1));
+    expect(typeof events[0].data.startTime).toBe('number');
+    expect(typeof events[0].data.endTime).toBe('number');
+    expect(typeof events[0].data.duration).toBe('number');
+    expect(events[0].data.duration!).toBeGreaterThanOrEqual(0);
+  });
+
+  it('restores original fetch on stop()', async () => {
+    const origFetch = globalThis.fetch;
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    expect(globalThis.fetch).not.toBe(origFetch);
+
+    capture.stop();
+    expect(globalThis.fetch).toBe(origFetch);
+  });
+
+  it('adds timestamp to events', async () => {
+    capture = new NetworkCapture((e) => events.push(e), 'https://replay.getcedar.ai');
+    capture.start();
+
+    const before = Date.now();
+    await fetch('https://api.getcedar.ai/users');
+    await vi.waitFor(() => expect(events).toHaveLength(1));
+    const after = Date.now();
+
+    expect(events[0].timestamp).toBeGreaterThanOrEqual(before);
+    expect(events[0].timestamp).toBeLessThanOrEqual(after);
+  });
+});

package/src/network.ts

@@ -0,0 +1,112 @@
+import type { NetworkSessionEvent } from './types.js';
+
+let nextId = 0;
+
+export class NetworkCapture {
+  private onEvent: (event: NetworkSessionEvent) => void;
+  private serverUrl: string;
+  private originalFetch: typeof fetch | null = null;
+  private started = false;
+
+  constructor(onEvent: (event: NetworkSessionEvent) => void, serverUrl: string) {
+    this.onEvent = onEvent;
+    this.serverUrl = serverUrl;
+  }
+
+  start(): void {
+    if (this.started) return;
+    this.started = true;
+
+    this.originalFetch = globalThis.fetch;
+
+    globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+
+      // Skip requests to our own server to avoid self-interception
+      if (url.startsWith(this.serverUrl)) {
+        return this.originalFetch!(input, init);
+      }
+
+      const method = init?.method?.toUpperCase() ?? 'GET';
+      const requestBody = init?.body ? String(init.body) : undefined;
+      const startTime = performance.now();
+      const id = String(++nextId);
+
+      // Extract GraphQL operation name if present
+      let graphqlOperationName: string | undefined;
+      if (requestBody) {
+        try {
+          const parsed = JSON.parse(requestBody);
+          if (parsed.operationName) {
+            graphqlOperationName = parsed.operationName;
+          }
+        } catch {
+          // Not JSON, skip
+        }
+      }
+
+      try {
+        const response = await this.originalFetch!(input, init);
+        const endTime = performance.now();
+
+        // Read response body from a clone to avoid consuming the original
+        let responseBody: string | undefined;
+        try {
+          const cloned = response.clone();
+          responseBody = await cloned.text();
+        } catch {
+          // Ignore body read failures
+        }
+
+        this.onEvent({
+          type: 'network',
+          timestamp: Date.now(),
+          data: {
+            id,
+            method,
+            url,
+            graphqlOperationName,
+            requestBody,
+            status: response.status,
+            responseBody,
+            startTime,
+            endTime,
+            duration: endTime - startTime,
+          },
+        });
+
+        return response;
+      } catch (err) {
+        const endTime = performance.now();
+
+        this.onEvent({
+          type: 'network',
+          timestamp: Date.now(),
+          data: {
+            id,
+            method,
+            url,
+            graphqlOperationName,
+            requestBody,
+            startTime,
+            endTime,
+            duration: endTime - startTime,
+            error: err instanceof Error ? err.message : String(err),
+          },
+        });
+
+        throw err;
+      }
+    };
+  }
+
+  stop(): void {
+    if (!this.started) return;
+    this.started = false;
+
+    if (this.originalFetch) {
+      globalThis.fetch = this.originalFetch;
+      this.originalFetch = null;
+    }
+  }
+}

package/src/recorder.test.ts

@@ -0,0 +1,187 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import type { RRWebSessionEvent } from './types.js';
+
+// vi.hoisted runs before vi.mock hoisting, so these are available in the factory
+const { mockStopFn, mockRecord } = vi.hoisted(() => ({
+  mockStopFn: vi.fn(),
+  mockRecord: vi.fn(),
+}));
+
+vi.mock('rrweb', () => ({
+  record: mockRecord,
+}));
+
+import { RecorderCapture } from './recorder.js';
+
+describe('RecorderCapture', () => {
+  let onEvent: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    onEvent = vi.fn();
+    // Default: record returns a stop function
+    mockRecord.mockReturnValue(mockStopFn);
+  });
+
+  // ── start / stop ────────────────────────────────────────────
+
+  it('calls rrweb.record() on start with an emit callback', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+
+    expect(mockRecord).toHaveBeenCalledTimes(1);
+    const opts = mockRecord.mock.calls[0][0];
+    expect(typeof opts.emit).toBe('function');
+
+    capture.stop();
+  });
+
+  it('wraps emitted rrweb events as RRWebSessionEvent', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+
+    // Grab the emit callback passed to rrweb.record
+    const emitFn = mockRecord.mock.calls[0][0].emit;
+
+    // Simulate rrweb emitting a DOM snapshot event
+    const rrwebEvent = { type: 2, data: { node: { id: 1 } }, timestamp: 1700000000 };
+    emitFn(rrwebEvent);
+
+    expect(onEvent).toHaveBeenCalledTimes(1);
+    const captured: RRWebSessionEvent = onEvent.mock.calls[0][0];
+    expect(captured.type).toBe('rrweb');
+    expect(captured.data).toBe(rrwebEvent);
+
+    capture.stop();
+  });
+
+  it('calls the stop function returned by record() on stop()', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+    capture.stop();
+
+    expect(mockStopFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('is idempotent — double start does not call record twice', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+    capture.start();
+
+    expect(mockRecord).toHaveBeenCalledTimes(1);
+
+    capture.stop();
+  });
+
+  it('is idempotent — double stop does not call stopFn twice', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+    capture.stop();
+    capture.stop();
+
+    expect(mockStopFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('stop is safe when not started', () => {
+    const capture = new RecorderCapture(onEvent);
+    expect(() => capture.stop()).not.toThrow();
+  });
+
+  // ── config passthrough ──────────────────────────────────────
+
+  it('passes config options to rrweb.record()', () => {
+    const capture = new RecorderCapture(onEvent, {
+      checkoutEveryNms: 10_000,
+      blockSelector: '.private',
+      maskAllInputs: true,
+      inlineStylesheet: false,
+      sampling: { mousemove: false, scroll: 150 },
+    });
+    capture.start();
+
+    const opts = mockRecord.mock.calls[0][0];
+    expect(opts.checkoutEveryNms).toBe(10_000);
+    expect(opts.blockSelector).toBe('.private');
+    expect(opts.maskAllInputs).toBe(true);
+    expect(opts.inlineStylesheet).toBe(false);
+    expect(opts.sampling).toEqual({ mousemove: false, scroll: 150 });
+
+    capture.stop();
+  });
+
+  it('works with default config (no config passed)', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+
+    const opts = mockRecord.mock.calls[0][0];
+    expect(typeof opts.emit).toBe('function');
+    // Should not have undefined config keys spread in
+    expect(opts.blockSelector).toBeUndefined();
+
+    capture.stop();
+  });
+
+  // ── edge cases ──────────────────────────────────────────────
+
+  it('handles record() returning undefined (no DOM mutations possible)', () => {
+    mockRecord.mockReturnValue(undefined);
+
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+
+    // stop should not throw even though there's no stopFn
+    expect(() => capture.stop()).not.toThrow();
+  });
+
+  it('can be restarted after stop', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+    capture.stop();
+
+    // Reset mock to track second call
+    mockRecord.mockClear();
+    mockStopFn.mockClear();
+
+    capture.start();
+    expect(mockRecord).toHaveBeenCalledTimes(1);
+
+    capture.stop();
+    expect(mockStopFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('emits multiple events correctly', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+
+    const emitFn = mockRecord.mock.calls[0][0].emit;
+
+    emitFn({ type: 4, data: { href: 'https://example.com' }, timestamp: 1 });
+    emitFn({ type: 3, data: { source: 1 }, timestamp: 2 });
+    emitFn({ type: 3, data: { source: 2 }, timestamp: 3 });
+
+    expect(onEvent).toHaveBeenCalledTimes(3);
+    expect(onEvent.mock.calls[0][0].type).toBe('rrweb');
+    expect(onEvent.mock.calls[1][0].type).toBe('rrweb');
+    expect(onEvent.mock.calls[2][0].type).toBe('rrweb');
+
+    capture.stop();
+  });
+
+  it('does not emit events after stop', () => {
+    const capture = new RecorderCapture(onEvent);
+    capture.start();
+
+    const emitFn = mockRecord.mock.calls[0][0].emit;
+    emitFn({ type: 2, data: {}, timestamp: 1 });
+    expect(onEvent).toHaveBeenCalledTimes(1);
+
+    capture.stop();
+
+    // Even if someone holds a reference to emitFn and calls it after stop,
+    // we should not forward events
+    emitFn({ type: 3, data: {}, timestamp: 2 });
+    expect(onEvent).toHaveBeenCalledTimes(1);
+
+    capture.stop();
+  });
+});

package/src/recorder.ts

@@ -0,0 +1,47 @@
+import { record } from 'rrweb';
+import type { RRWebSessionEvent, RecorderConfig } from './types.js';
+
+export class RecorderCapture {
+  private onEvent: (event: RRWebSessionEvent) => void;
+  private config: RecorderConfig;
+  private stopFn: (() => void) | null = null;
+  private started = false;
+
+  constructor(onEvent: (event: RRWebSessionEvent) => void, config?: RecorderConfig) {
+    this.onEvent = onEvent;
+    this.config = config ?? {};
+  }
+
+  start(): void {
+    if (this.started) return;
+    this.started = true;
+
+    const { checkoutEveryNms, blockSelector, maskAllInputs, inlineStylesheet, sampling } =
+      this.config;
+
+    const result = record({
+      emit: (event) => {
+        if (!this.started) return;
+        this.onEvent({
+          type: 'rrweb',
+          data: event as unknown as Record<string, unknown>,
+        });
+      },
+      ...(checkoutEveryNms !== undefined && { checkoutEveryNms }),
+      ...(blockSelector !== undefined && { blockSelector }),
+      ...(maskAllInputs !== undefined && { maskAllInputs }),
+      ...(inlineStylesheet !== undefined && { inlineStylesheet }),
+      ...(sampling !== undefined && { sampling: sampling as any }),
+    });
+
+    this.stopFn = result ?? null;
+  }
+
+  stop(): void {
+    if (!this.started) return;
+    this.started = false;
+
+    this.stopFn?.();
+    this.stopFn = null;
+  }
+}