Session replay integration tests (#1179)

Author: matux

CLAUDE.md

@@ -138,11 +138,24 @@ The `src/tracing/` directory contains an OpenTelemetry-inspired tracing implemen
 - **Attributes and events**: Add metadata to spans with `setAttribute()` and `addEvent()`
 - **Session management**: Automatically manages user sessions via browser sessionStorage
 
-### Integration with Session Replay
+### Session Replay Implementation
 
-The Session Replay feature utilizes this tracing infrastructure to:
+The `src/browser/replay` directory contains the implementation of the Session Replay feature:
 
-- Track and record user sessions with unique identifiers
-- Associate spans with specific user sessions for complete context
-- Capture timing information for accurate playback
-- Store interaction events as span attributes and events
+- **Recorder**: Core class that integrates with rrweb to record DOM events
+- **Configuration**: Configurable options in `defaults.js` for replay behavior
+
+The Session Replay feature utilizes our tracing infrastructure to:
+
+- Record user interactions using rrweb in a memory-efficient way
+- Store recordings with checkpoints for better performance
+- Generate spans that contain replay events with proper timing
+- Associate recordings with user sessions for complete context
+- Transport recordings to Rollbar servers via the API
+
+### Testing Approach
+
+- **Mock Implementation**: `test/replay/mockRecordFn.js` provides a deterministic mock of rrweb
+- **Fixtures**: Realistic rrweb events in `test/fixtures/replay/` for testing
+- **Integration Tests**: Verify interaction between Recorder and Tracing system
+- **Edge Cases**: Test handling of empty events, checkpoints, and error conditions

Gruntfile.js

@@ -196,6 +196,33 @@ module.exports = function (grunt) {
     var tasks = [karmaTask];
     grunt.task.run.apply(grunt.task, tasks);
   });
+  
+  // Custom task for running all replay-related tests
+  grunt.registerTask('test-replay', function () {
+    // Find all replay-related test files:
+    // 1. Tests in test/replay/ directory
+    // 2. Tests in test/tracing/ directory (underlying infrastructure)
+    // 3. Browser replay tests (browser.replay.*.test.js)
+    var replayTests = Object.keys(browserTests).filter(function(testName) {
+      var testPath = browserTests[testName];
+      return (
+        testPath.includes('test/replay/') || 
+        testPath.includes('test/tracing/') ||
+        testPath.match(/test\/browser\.replay\..*\.test\.js/)
+      );
+    });
+    
+    // Log which tests will be run
+    grunt.log.writeln('Running replay-related tests:');
+    replayTests.forEach(function(testName) {
+      grunt.log.writeln('- ' + testName + ' (' + browserTests[testName] + ')');
+    });
+    
+    // Run each test
+    replayTests.forEach(function(testName) {
+      grunt.task.run('karma:' + testName);
+    });
+  });
 
   grunt.registerTask('copyrelease', function createRelease() {
     var version = pkg.version;

package.json

@@ -89,6 +89,7 @@
     "test": "./node_modules/.bin/grunt test",
     "test-browser": "./node_modules/.bin/grunt test-browser",
     "test-server": "./node_modules/.bin/grunt test-server",
+    "test-replay": "./node_modules/.bin/grunt test-replay",
     "test_ci": "./node_modules/.bin/grunt test",
     "lint": "./node_modules/.bin/eslint ."
   },

test/replay/mockRecordFn.js

@@ -0,0 +1,80 @@
+/**
+ * Mock implementation of rrweb.record for testing
+ * Emits fixture events on a schedule to test the Recorder
+ */
+
+import { allEvents } from '../fixtures/replay/index.js';
+
+/**
+ * Mock implementation of rrweb's record function
+ *
+ * @param {Object} options Configuration options
+ * @param {Function} options.emit Function that will receive events
+ * @param {number} options.checkoutEveryNms Milliseconds between checkpoints
+ * @param {number} options.emitEveryNms Milliseconds between events
+ * @returns {Function} Stop function
+ */
+export default function mockRecordFn(options = {}) {
+  function* cycling(xs) {
+    let i = 0;
+    while (true) {
+      yield xs[i++ % xs.length];
+    }
+  }
+
+  const systemEvents = ['domContentLoaded', 'load', 'meta', 'fullSnapshot'];
+  const events = cycling(
+    Object.entries(allEvents)
+      .filter(([eventName]) => !systemEvents.includes(eventName))
+      .map(([_, event]) => event),
+  );
+
+  const emit = options.emit;
+
+  let lastCheckoutTime = Date.now();
+  let intervalId = null;
+  let stopping = false;
+  let initialSnapshotDone = false;
+
+  const emitNextEvent = () => {
+    if (stopping) return;
+
+    // Check if we need to do a checkout
+    const now = Date.now();
+
+    if (
+      initialSnapshotDone &&
+      options.checkoutEveryNms &&
+      now - lastCheckoutTime >= options.checkoutEveryNms
+    ) {
+      lastCheckoutTime = now;
+
+      // checkout:
+      // rrweb sends both Meta and FullSnapshot events in the same tick
+      // with isCheckout = true
+      emit({ ...allEvents.meta }, true);
+      emit({ ...allEvents.fullSnapshot }, true);
+    }
+
+    emit(events.next().value, false);
+  };
+
+  // Start emitting events on a regular interval
+  // 1 event every 100ms is a reasonable pace for testing
+  intervalId = setInterval(emitNextEvent, options.emitEveryNms);
+
+  // Initial events: domContentLoaded, load, meta, fullSnapshot
+  // Based on rrweb's implementation, the initial snapshot is NOT a checkout
+  emit(allEvents.domContentLoaded, false);
+  emit(allEvents.load, false);
+  emit(allEvents.meta, false);
+  emit(allEvents.fullSnapshot, false);
+  initialSnapshotDone = true;
+
+  // Return a stop function that cleans up the intervals
+  return () => {
+    stopping = true;
+    clearInterval(intervalId);
+    intervalId = null;
+  };
+}

test/replay/sessionRecording.test.js

@@ -0,0 +1,156 @@
+/**
+ * Integration tests for the Recorder and Tracing interaction
+ */
+
+/* globals describe */
+/* globals it */
+/* globals beforeEach */
+/* globals afterEach */
+
+import { expect } from 'chai';
+import Tracing from '../../src/tracing/tracing.js';
+import { Span } from '../../src/tracing/span.js';
+import { Context } from '../../src/tracing/context.js';
+import Recorder from '../../src/browser/replay/recorder.js';
+import recorderDefaults from '../../src/browser/replay/defaults.js';
+import { spanExportQueue } from '../../src/tracing/exporter.js';
+import mockRecordFn from './mockRecordFn.js';
+import { EventType } from '../fixtures/replay/types.js';
+
+const mockWindow = {
+  sessionStorage: {},
+  document: {
+    location: {
+      href: 'https://example.com/test',
+    },
+  },
+  navigator: {
+    userAgent: 'Mozilla/5.0 Test',
+  },
+};
+
+const options = {
+  enabled: true,
+  resource: {
+    attributes: {
+      'service.name': 'unknown_service',
+      'telemetry.sdk.language': 'webjs',
+      'telemetry.sdk.name': 'rollbar',
+      'telemetry.sdk.version': '0.1.0',
+    },
+  },
+  notifier: {
+    name: 'rollbar.js',
+    version: '0.1.0',
+  },
+  recorder: {
+    ...recorderDefaults,
+    enabled: true,
+    autoStart: false,
+    emitEveryNms: 100, // non-rrweb, used by mockRecordFn
+  },
+};
+
+describe('Session Replay Integration', function () {
+  let tracing;
+  let recorder;
+
+  beforeEach(function () {
+    spanExportQueue.length = 0;
+
+    tracing = new Tracing(mockWindow, options);
+    tracing.initSession();
+  });
+
+  afterEach(function () {
+    recorder.stop();
+  });
+
+  it('dumping recording should export tracing', function (done) {
+    recorder = new Recorder(tracing, options.recorder, mockRecordFn);
+    recorder.start();
+
+    const tracingContext = tracing.contextManager.active();
+    expect(tracingContext).to.be.instanceOf(Context);
+
+    const dumpRecording = () => {
+      const recordingSpan = recorder.dump(tracingContext);
+      expect(recordingSpan).to.be.instanceOf(Span);
+      expect(recordingSpan.span.name).to.be.equal('rrweb-replay-recording');
+
+      const events = recordingSpan.span.events;
+      expect(events.length).to.be.greaterThan(0);
+      expect(events.every((e) => e.name === 'rrweb-replay-events')).to.be.true;
+      expect(events[0].attributes).to.have.property('eventType');
+      expect(events[0].attributes).to.have.property('json');
+
+      expect(spanExportQueue.length).to.be.equal(1);
+      expect(spanExportQueue[0]).to.be.deep.equal(recordingSpan.span);
+      expect(spanExportQueue[0].events.length).to.be.equal(events.length);
+      expect(spanExportQueue[0].events).to.be.deep.equal(events);
+      expect(spanExportQueue[0].name).to.be.equal('rrweb-replay-recording');
+
+      done();
+    };
+
+    setTimeout(dumpRecording, 1000);
+  });
+
+  it('should handle checkouts correctly', function (done) {
+    recorder = new Recorder(
+      tracing,
+      {
+        ...options.recorder,
+        checkoutEveryNms: 250,
+      },
+      mockRecordFn,
+    );
+
+    recorder.start();
+
+    const dumpRecording = () => {
+      const recordingSpan = recorder.dump();
+
+      const events = recordingSpan.span.events;
+      expect(
+        events.filter((e) => e.attributes.eventType === EventType.Meta),
+      ).to.have.lengthOf(2);
+      expect(
+        events.filter((e) => e.attributes.eventType === EventType.FullSnapshot),
+      ).to.have.lengthOf(2);
+
+      done();
+    };
+
+    setTimeout(dumpRecording, 1000);
+  });
+
+  it('should handle no checkouts correctly', function (done) {
+    recorder = new Recorder(
+      tracing,
+      {
+        ...options.recorder,
+        checkoutEveryNms: 500,
+      },
+      mockRecordFn,
+    );
+
+    recorder.start();
+
+    const dumpRecording = () => {
+      const recordingSpan = recorder.dump();
+
+      const events = recordingSpan.span.events;
+      expect(
+        events.filter((e) => e.attributes.eventType === EventType.Meta),
+      ).to.have.lengthOf(1);
+      expect(
+        events.filter((e) => e.attributes.eventType === EventType.FullSnapshot),
+      ).to.have.lengthOf(1);
+
+      done();
+    };
+
+    setTimeout(dumpRecording, 250);
+  });
+});