rollbar 2.26.3 → 3.0.0-alpha.1

package/test/browser.domUtility.test.js

@@ -3,33 +3,33 @@
 /* globals it */
 /* globals sinon */
 
-var d = require('../src/browser/domUtility');
+import * as d from '../src/browser/domUtility.js';
 
 function fullElement() {
   return {
     tagName: 'DIV',
     id: 'myId',
     className: 'a b c',
-    getAttribute: function(t) {
+    getAttribute: function (t) {
       return {
         type: 'theType',
         name: 'someName',
-        other: 'otherAttr'
+        other: 'otherAttr',
       }[t];
-    }
+    },
   };
 }
 
 function genElement(tag, id, classes, type, name) {
   var elem = {
     tagName: tag,
-    getAttribute: function(t) {
+    getAttribute: function (t) {
       return {
         type: type,
         name: name,
-        other: 'otherAttr'
+        other: 'otherAttr',
       }[t];
-    }
+    },
   };
   if (id) {
     elem.id = id;
@@ -40,41 +40,41 @@ function genElement(tag, id, classes, type, name) {
   return elem;
 }
 
-describe('isDescribedElement', function() {
-  it('should match the type without subtypes', function() {
+describe('isDescribedElement', function () {
+  it('should match the type without subtypes', function () {
     var e = genElement('div', null, null, 'text');
     expect(d.isDescribedElement(e, 'div')).to.be.ok();
     expect(d.isDescribedElement(e, 'DIV')).to.be.ok();
     expect(d.isDescribedElement(e, 'span')).to.not.be.ok();
   });
-  it('should work with subtypes', function() {
+  it('should work with subtypes', function () {
     var e = genElement('div', null, null, 'text');
     expect(d.isDescribedElement(e, 'div', ['input', 'text'])).to.be.ok();
     expect(d.isDescribedElement(e, 'div', ['input', 'nottext'])).to.not.be.ok();
     expect(d.isDescribedElement(e, 'div', [])).to.not.be.ok();
   });
-  it('should work if element has no type', function() {
+  it('should work if element has no type', function () {
     var e = genElement('div');
     expect(d.isDescribedElement(e, 'div', ['input', 'text'])).to.not.be.ok();
     expect(d.isDescribedElement(e, 'div')).to.be.ok();
   });
 });
 
-describe('describeElement', function() {
-  it('should include the id', function() {
+describe('describeElement', function () {
+  it('should include the id', function () {
     var elem = fullElement();
     var description = d.describeElement(elem);
     expect(description.id).to.eql('myId');
   });
-  it('should have the right tag name', function() {
+  it('should have the right tag name', function () {
     var elem = fullElement();
     var description = d.describeElement(elem);
     expect(description.tagName).to.eql('div');
   });
 });
 
-describe('descriptionToString', function() {
-  it('should be right', function() {
+describe('descriptionToString', function () {
+  it('should be right', function () {
     var elem = fullElement();
     var desc = d.describeElement(elem);
     var str = d.descriptionToString(desc);
@@ -82,14 +82,14 @@ describe('descriptionToString', function() {
   });
 });
 
-describe('treeToArray', function() {
-  it('should follow parent pointers', function() {
+describe('treeToArray', function () {
+  it('should follow parent pointers', function () {
     var base = genElement('span', 'cool');
     base.parentNode = genElement('div', 'parent');
     var arr = d.treeToArray(base);
     expect(arr.length).to.eql(2);
   });
-  it('should not stop before html tag', function() {
+  it('should not stop before html tag', function () {
     var e1 = genElement('div', 'cool');
     var e2 = genElement('div', null, 'a b');
     var h = genElement('html');
@@ -98,7 +98,7 @@ describe('treeToArray', function() {
     var arr = d.treeToArray(e1);
     expect(arr.length).to.eql(2);
   });
-  it('should cap out at 5 elements', function() {
+  it('should cap out at 5 elements', function () {
     var e1 = genElement('div', 'cool');
     var e2 = genElement('div', null, 'a b');
     var e3 = genElement('div', null, 'a b');
@@ -113,7 +113,7 @@ describe('treeToArray', function() {
     var arr = d.treeToArray(e1);
     expect(arr.length).to.eql(5);
   });
-  it('should put the innermost element last', function() {
+  it('should put the innermost element last', function () {
     var e1 = genElement('div', 'id1');
     var e2 = genElement('div', 'id2', 'a b');
     var e3 = genElement('div', 'id3', 'a b');
@@ -131,39 +131,56 @@ describe('treeToArray', function() {
   });
 });
 
-describe('elementArrayToString', function() {
-  it('should work with one element', function() {
-    var e1 = {tagName: 'div', id: 'id1', classes: ['a', 'b'], attributes: []};
+describe('elementArrayToString', function () {
+  it('should work with one element', function () {
+    var e1 = { tagName: 'div', id: 'id1', classes: ['a', 'b'], attributes: [] };
     var arr = [e1];
     var res = d.elementArrayToString(arr);
     expect(res).to.eql('div#id1.a.b');
   });
-  it('should work with two elements', function() {
-    var e1 = {tagName: 'div', id: 'id1', classes: ['a', 'b'], attributes: []};
-    var e2 = {tagName: 'div', id: 'id2', classes: ['a', 'b', 'c'], attributes: [{key: 'name', value: 'thing'}]};
+  it('should work with two elements', function () {
+    var e1 = { tagName: 'div', id: 'id1', classes: ['a', 'b'], attributes: [] };
+    var e2 = {
+      tagName: 'div',
+      id: 'id2',
+      classes: ['a', 'b', 'c'],
+      attributes: [{ key: 'name', value: 'thing' }],
+    };
     var arr = [e1, e2];
     var res = d.elementArrayToString(arr);
     expect(res).to.eql('div#id1.a.b > div#id2.a.b.c[name="thing"]');
   });
-  it('should truncate at 80 characters max without breaking within a element', function() {
-    var e1 = {tagName: 'div', id: 'id1', classes: ['a', 'b'], attributes: []};
-    var e2 = {tagName: 'div', id: 'id2', classes: ['a', 'b', 'c'], attributes: [{key: 'name', value: 'thing2'}]};
-    var e3 = {tagName: 'div', id: 'id3', classes: ['a', 'b'], attributes: []};
-    var e4 = {tagName: 'div', id: 'id4', classes: ['a', 'b', 'c'], attributes: [{key: 'name', value: 'thing4'}]};
+  it('should truncate at 80 characters max without breaking within a element', function () {
+    var e1 = { tagName: 'div', id: 'id1', classes: ['a', 'b'], attributes: [] };
+    var e2 = {
+      tagName: 'div',
+      id: 'id2',
+      classes: ['a', 'b', 'c'],
+      attributes: [{ key: 'name', value: 'thing2' }],
+    };
+    var e3 = { tagName: 'div', id: 'id3', classes: ['a', 'b'], attributes: [] };
+    var e4 = {
+      tagName: 'div',
+      id: 'id4',
+      classes: ['a', 'b', 'c'],
+      attributes: [{ key: 'name', value: 'thing4' }],
+    };
     var arr = [e1, e2, e3, e4];
     var res = d.elementArrayToString(arr);
-    expect(res).to.eql('... > div#id2.a.b.c[name="thing2"] > div#id3.a.b > div#id4.a.b.c[name="thing4"]');
+    expect(res).to.eql(
+      '... > div#id2.a.b.c[name="thing2"] > div#id3.a.b > div#id4.a.b.c[name="thing4"]',
+    );
   });
 });
 
-describe('everything', function() {
-  it('should work with one element', function() {
+describe('everything', function () {
+  it('should work with one element', function () {
     var e = genElement('div', 'id1');
     var description = d.descriptionToString(d.describeElement(e));
     var result = d.elementArrayToString(d.treeToArray(e));
     expect(description).to.eql(result);
   });
-  it('should work with many elements', function() {
+  it('should work with many elements', function () {
     var e1 = genElement('div', 'id1');
     var e2 = genElement('div', 'id2', 'a b', 'input');
     var e3 = genElement('div', 'id3', 'a b', null, 'thing');

package/test/browser.predicates.test.js

@@ -3,50 +3,50 @@
 /* globals it */
 /* globals sinon */
 
-var p = require('../src/browser/predicates');
+import * as p from '../src/browser/predicates.js';
 
-describe('checkIgnore', function() {
-  it('should return false if is ajax and ignoring ajax errors is on', function() {
+describe('checkIgnore', function () {
+  it('should return false if is ajax and ignoring ajax errors is on', function () {
     var item = {
       level: 'critical',
-      body: {message: {extra: {isAjax: true}}}
+      body: { message: { extra: { isAjax: true } } },
     };
     var settings = {
       reportLevel: 'debug',
-      plugins: {jquery: {ignoreAjaxErrors: true}}
+      plugins: { jquery: { ignoreAjaxErrors: true } },
     };
     expect(p.checkIgnore(item, settings)).to.not.be.ok();
   });
-  it('should return true if is ajax and ignoring ajax errors is off', function() {
+  it('should return true if is ajax and ignoring ajax errors is off', function () {
     var item = {
       level: 'critical',
-      body: {message: {extra: {isAjax: true}}}
+      body: { message: { extra: { isAjax: true } } },
     };
     var settings = {
       reportLevel: 'debug',
-      plugins: {jquery: {ignoreAjaxErrors: false}}
+      plugins: { jquery: { ignoreAjaxErrors: false } },
     };
     expect(p.checkIgnore(item, settings)).to.be.ok();
   });
-  it('should return true if is not ajax and ignoring ajax errors is on', function() {
+  it('should return true if is not ajax and ignoring ajax errors is on', function () {
     var item = {
       level: 'critical',
-      body: {message: {extra: {isAjax: false}}}
+      body: { message: { extra: { isAjax: false } } },
     };
     var settings = {
       reportLevel: 'debug',
-      plugins: {jquery: {ignoreAjaxErrors: true}}
+      plugins: { jquery: { ignoreAjaxErrors: true } },
     };
     expect(p.checkIgnore(item, settings)).to.be.ok();
   });
-  it('should return true if no ajax extra key and ignoring ajax errors is on', function() {
+  it('should return true if no ajax extra key and ignoring ajax errors is on', function () {
     var item = {
       level: 'critical',
-      body: {message: 'a message'}
+      body: { message: 'a message' },
     };
     var settings = {
       reportLevel: 'debug',
-      plugins: {jquery: {ignoreAjaxErrors: true}}
+      plugins: { jquery: { ignoreAjaxErrors: true } },
     };
     expect(p.checkIgnore(item, settings)).to.be.ok();
   });

package/test/browser.replay.recorder.test.js

@@ -0,0 +1,416 @@
+/* globals expect */
+/* globals describe */
+/* globals it */
+/* globals beforeEach */
+/* globals sinon */
+
+import { expect } from 'chai';
+import { EventType } from '@rrweb/types';
+
+import Recorder from '../src/browser/replay/recorder.js';
+
+describe('Recorder', function () {
+  let mockTracing;
+  let mockSpan;
+  let stopFnSpy;
+  let recordFnStub;
+  let emitCallback;
+  let testReplayId;
+
+  beforeEach(function () {
+    mockSpan = {
+      addEvent: sinon.spy(),
+      setAttribute: sinon.spy(),
+      span: { startTime: null },
+      end: sinon.spy(),
+    };
+
+    mockTracing = {
+      startSpan: sinon.stub().returns(mockSpan),
+      exporter: {
+        toPayload: sinon.stub().returns([{ id: 'span1' }]),
+      },
+    };
+
+    testReplayId = 'test-replay-id-123';
+    stopFnSpy = sinon.spy();
+    recordFnStub = sinon.stub().callsFake(function (options) {
+      emitCallback = options.emit;
+      return stopFnSpy;
+    });
+  });
+
+  describe('constructor', function () {
+    it('should initialize with default properties', function () {
+      const recorder = new Recorder({}, recordFnStub);
+
+      expect(recorder.isRecording).to.equal(false);
+      expect(recorder.options).to.deep.equal({ enabled: undefined, autoStart: undefined, maxSeconds: undefined, triggerOptions:undefined });
+    });
+
+    it('should initialize removing disallowed options', function () {
+      const options = { enabled: true, checkoutEveryNms: 1000 };
+      const recorder = new Recorder(options, recordFnStub);
+
+      expect(recorder.options).to.deep.equal({ enabled: true, autoStart: undefined, maxSeconds: undefined, triggerOptions:undefined });
+    });
+
+    it('should throw error if no record function is passed', function () {
+      expect(() => new Recorder({}, null)).to.throw(
+        TypeError,
+        "Expected 'recordFn' to be provided",
+      );
+    });
+  });
+
+  describe('recording management', function () {
+    it('should start recording correctly', function () {
+      const recorder = new Recorder(
+        { enabled: true },
+        recordFnStub,
+      );
+      recorder.start();
+
+      expect(recorder.isRecording).to.be.true;
+      expect(recordFnStub.calledOnce).to.be.true;
+      expect(stopFnSpy.called).to.be.false;
+
+      const recordOptions = recordFnStub.firstCall.args[0];
+      expect(recordOptions.checkoutEveryNms).to.equal(5000);
+      expect(typeof recordOptions.emit).to.equal('function');
+    });
+
+    it('should not start if already recording', function () {
+      const recorder = new Recorder(
+        { enabled: true },
+        recordFnStub,
+      );
+      recorder.start();
+      recorder.start();
+
+      expect(recordFnStub.calledOnce).to.be.true;
+    });
+
+    it('should not start if disabled', function () {
+      const recorder = new Recorder(
+        { enabled: false },
+        recordFnStub,
+      );
+      recorder.start();
+
+      expect(recorder.isRecording).to.be.false;
+      expect(recordFnStub.called).to.be.false;
+    });
+
+    it('should stop recording correctly', function () {
+      const recorder = new Recorder(
+        { enabled: true },
+        recordFnStub,
+      );
+      recorder.start();
+      recorder.stop();
+
+      expect(recorder.isRecording).to.be.false;
+      expect(recordFnStub.calledOnce).to.be.true;
+      expect(stopFnSpy.calledOnce).to.be.true;
+    });
+
+    it('should handle stop when not recording', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.stop();
+
+      expect(recorder.isRecording).to.be.false;
+      expect(stopFnSpy.called).to.be.false;
+    });
+  });
+
+  describe('event handling', function () {
+    it('should handle events correctly', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.start();
+
+      const event1 = { timestamp: 1000, type: 'event1', data: { a: 1 } };
+      const event2 = { timestamp: 2000, type: 'event2', data: { b: 2 } };
+
+      emitCallback(event1, false);
+      emitCallback(event2, false);
+
+      const result = recorder.dump(mockTracing, testReplayId);
+
+      expect(mockTracing.startSpan.calledOnce).to.be.true;
+      expect(mockSpan.addEvent.calledTwice).to.be.true;
+      expect(mockSpan.setAttribute.calledOnce).to.be.true;
+      expect(mockSpan.setAttribute.calledWith('rollbar.replay.id', testReplayId)).to.be.true;
+
+      const firstCallData = mockSpan.addEvent.firstCall.args[1];
+      expect(firstCallData.eventType).to.equal('event1');
+      expect(JSON.parse(firstCallData.json)).to.deep.equal({ a: 1 });
+      expect(firstCallData['rollbar.replay.id']).to.equal(testReplayId);
+
+      const secondCallData = mockSpan.addEvent.secondCall.args[1];
+      expect(secondCallData.eventType).to.equal('event2');
+      expect(JSON.parse(secondCallData.json)).to.deep.equal({ b: 2 });
+      expect(secondCallData['rollbar.replay.id']).to.equal(testReplayId);
+    });
+
+    it('should handle checkout events correctly', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.start();
+
+      // First checkout
+      emitCallback({ timestamp: 0, type: EventType.Meta, data: {} }, true);
+      emitCallback(
+        { timestamp: 10, type: EventType.FullSnapshot, data: {} },
+        true,
+      );
+      emitCallback(
+        {
+          timestamp: 1000,
+          type: EventType.IncrementalSnapshot,
+          data: { a: 1 },
+        },
+        false,
+      );
+      emitCallback(
+        {
+          timestamp: 2000,
+          type: EventType.IncrementalSnapshot,
+          data: { b: 2 },
+        },
+        false,
+      );
+
+      // Second checkout
+      emitCallback({ timestamp: 3050, type: EventType.Meta, data: {} }, true);
+      emitCallback(
+        { timestamp: 3100, type: EventType.FullSnapshot, data: {} },
+        true,
+      );
+      emitCallback(
+        {
+          timestamp: 4000,
+          type: EventType.IncrementalSnapshot,
+          data: { c: 3 },
+        },
+        false,
+      );
+
+      // Third checkout
+      emitCallback({ timestamp: 4500, type: EventType.Meta, data: {} }, true);
+      emitCallback(
+        { timestamp: 5000, type: EventType.FullSnapshot, data: {} },
+        true,
+      );
+      emitCallback(
+        {
+          timestamp: 6000,
+          type: EventType.IncrementalSnapshot,
+          data: { d: 4 },
+        },
+        false,
+      );
+
+      recorder.dump(mockTracing, testReplayId);
+
+      // 2nd checkout (meta + fs) + event3 + 3rd checkout (meta + fs) + event4
+      expect(mockSpan.span.startTime).to.be.deep.equal([3, 50000000]); // otel time
+      expect(mockSpan.span.endTime).not.to.be.null;
+
+      expect(mockSpan.addEvent.callCount).to.equal(6);
+
+      [
+        {
+          name: 'rrweb-replay-events',
+          attributes: {
+            eventType: EventType.Meta,
+            json: JSON.stringify({}),
+            'rollbar.replay.id': testReplayId,
+          },
+          timestamp: [3, 50000000],
+        },
+        {
+          name: 'rrweb-replay-events',
+          attributes: {
+            eventType: EventType.FullSnapshot,
+            json: JSON.stringify({}),
+            'rollbar.replay.id': testReplayId,
+          },
+          timestamp: [3, 100000000],
+        },
+        {
+          name: 'rrweb-replay-events',
+          attributes: {
+            eventType: EventType.IncrementalSnapshot,
+            json: JSON.stringify({ c: 3 }),
+            'rollbar.replay.id': testReplayId,
+          },
+          timestamp: [4, 0],
+        },
+        {
+          name: 'rrweb-replay-events',
+          attributes: {
+            eventType: EventType.Meta,
+            json: JSON.stringify({}),
+            'rollbar.replay.id': testReplayId,
+          },
+          timestamp: [4, 500000000],
+        },
+        {
+          name: 'rrweb-replay-events',
+          attributes: {
+            eventType: EventType.FullSnapshot,
+            json: JSON.stringify({}),
+            'rollbar.replay.id': testReplayId,
+          },
+          timestamp: [5, 0],
+        },
+        {
+          name: 'rrweb-replay-events',
+          attributes: {
+            eventType: EventType.IncrementalSnapshot,
+            json: JSON.stringify({ d: 4 }),
+            'rollbar.replay.id': testReplayId,
+          },
+          timestamp: [6, 0],
+        },
+      ].forEach((expected, index) => {
+        const call = mockSpan.addEvent.getCall(index);
+        expect(call.args[0]).to.equal(expected.name);
+        expect(call.args[1]).to.deep.equal(expected.attributes);
+        expect(call.args[2]).to.deep.equal(expected.timestamp);
+      });
+    });
+  });
+
+  describe('dump functionality', function () {
+    it('should create a span with events and return formatted payload', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.start();
+
+      emitCallback({ timestamp: 1000, type: 'event1', data: { a: 1 } }, false);
+      emitCallback({ timestamp: 2000, type: 'event2', data: { b: 2 } }, false);
+
+      const result = recorder.dump(mockTracing, testReplayId);
+
+      expect(result).to.deep.equal([{ id: 'span1' }]);
+      expect(mockTracing.startSpan.calledOnce).to.be.true;
+      expect(mockSpan.addEvent.calledTwice).to.be.true;
+      expect(mockSpan.end.calledOnce).to.be.true;
+      expect(mockTracing.exporter.toPayload.calledOnce).to.be.true;
+    });
+
+    it('should create a span with the correct span name', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.start();
+
+      emitCallback({ timestamp: 1000, type: 'event1', data: { a: 1 } }, false);
+      emitCallback({ timestamp: 2000, type: 'event2', data: { b: 2 } }, false);
+
+      recorder.dump(mockTracing, testReplayId);
+
+      expect(mockTracing.startSpan.calledOnce).to.be.true;
+      const spanName = mockTracing.startSpan.firstCall.args[0];
+      expect(spanName).to.equal('rrweb-replay-recording');
+    });
+
+    it('should add events with the correct event name and replayId', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.start();
+
+      emitCallback(
+        { timestamp: 1000, type: 'fullSnapshot', data: { a: 1 } },
+        false,
+      );
+      emitCallback(
+        { timestamp: 2000, type: 'mouseMove', data: { b: 2 } },
+        false,
+      );
+      emitCallback({ timestamp: 3000, type: 'input', data: { c: 3 } }, false);
+
+      recorder.dump(mockTracing, testReplayId);
+
+      expect(mockSpan.addEvent.callCount).to.equal(3);
+
+      for (let i = 0; i < mockSpan.addEvent.callCount; i++) {
+        const eventName = mockSpan.addEvent.getCall(i).args[0];
+        const eventAttrs = mockSpan.addEvent.getCall(i).args[1];
+        expect(eventName).to.equal(
+          'rrweb-replay-events',
+          `Event at index ${i} should have name "rrweb-replay-events"`
+        );
+        expect(eventAttrs['rollbar.replay.id']).to.equal(testReplayId);
+      }
+    });
+
+    it('should handle no events', function () {
+      const recorder = new Recorder({}, recordFnStub);
+
+      const result = recorder.dump(mockTracing, testReplayId);
+
+      expect(result).to.be.null;
+      expect(mockTracing.startSpan.called).to.be.false;
+      expect(mockTracing.exporter.toPayload.called).to.be.false;
+    });
+
+    it('should handle less than 2 events (invalid recording)', function () {
+      const recorder = new Recorder({}, recordFnStub);
+      recorder.start();
+
+      emitCallback({ timestamp: 1000, type: 'event1', data: { a: 1 } }, false);
+
+      const result = recorder.dump(mockTracing, testReplayId);
+
+      expect(result).to.be.null;
+      expect(mockTracing.startSpan.called).to.be.false;
+      expect(mockTracing.exporter.toPayload.called).to.be.false;
+    });
+  });
+
+  describe('configure', function () {
+    it('should update options', function () {
+      const recorder = new Recorder(
+        { enabled: true },
+        recordFnStub,
+      );
+
+      recorder.configure({ enabled: false, maxSeconds: 20 });
+
+      expect(recorder.options).to.deep.equal({
+        enabled: false,
+        autoStart: undefined,
+        maxSeconds: 20,
+        triggerOptions:undefined,
+      });
+    });
+
+    it('should set correct checkoutEveryNms', function () {
+      const recorder = new Recorder({ enabled: false });
+
+      recorder.configure({ enabled: true, maxSeconds: 15 });
+
+      expect(recorder.options).to.deep.equal({
+        enabled: true,
+        autoStart: undefined,
+        maxSeconds: 15,
+        triggerOptions:undefined,
+      });
+
+      expect(recorder.checkoutEveryNms()).to.equal(7500);
+    });
+
+    it('should stop recording if enabled set to false', function () {
+      const recorder = new Recorder(
+        { enabled: true },
+        recordFnStub,
+      );
+      recorder.start();
+
+      expect(recorder.isRecording).to.be.true;
+
+      recorder.configure({ enabled: false });
+
+      expect(recorder.isRecording).to.be.false;
+      expect(stopFnSpy.calledOnce).to.be.true;
+    });
+  });
+});