export telemetry from ReplayMap

Author: waltjones

src/browser/core.js

@@ -33,6 +33,9 @@ function Rollbar(options, client) {
     this.tracing = new Tracing(_gWindow(), this.options);
     this.tracing.initSession();
   }
+  if (Telemeter) {
+    this.telemeter = new Telemeter(this.options, this.tracing);
+  }
 
   if (Recorder && _.isBrowser()) {
     const recorderOptions = this.options.recorder;
@@ -41,16 +44,14 @@ function Rollbar(options, client) {
       recorder: this.recorder,
       api: api,
       tracing: this.tracing,
+      telemeter: this.telemeter,
     });
 
     if (recorderOptions.enabled && recorderOptions.autoStart) {
       this.recorder.start();
     }
   }
 
-  if (Telemeter) {
-    this.telemeter = new Telemeter(this.options, this.tracing);
-  }
   this.client =
     client ||
     new Client(

src/browser/replay/replayMap.js

@@ -11,6 +11,7 @@ export default class ReplayMap {
   #recorder;
   #api;
   #tracing;
+  #telemeter;
 
   /**
    * Creates a new ReplayMap instance
@@ -20,7 +21,7 @@ export default class ReplayMap {
    * @param {Object} props.api - The API instance used to send replay payloads to the backend
    * @param {Object} props.tracing - The tracing instance used to create spans and manage context
    */
-  constructor({ recorder, api, tracing }) {
+  constructor({ recorder, api, tracing, telemeter }) {
     if (!recorder) {
       throw new TypeError("Expected 'recorder' to be provided");
     }
@@ -37,6 +38,7 @@ export default class ReplayMap {
     this.#recorder = recorder;
     this.#api = api;
     this.#tracing = tracing;
+    this.#telemeter = telemeter;
   }
 
   /**
@@ -51,6 +53,8 @@ export default class ReplayMap {
    */
   async _processReplay(replayId, occurrenceUuid) {
     try {
+      this.#telemeter?.exportTelemetrySpan({'rollbar.replay.id': replayId});
+
       const payload = this.#recorder.dump(
         this.#tracing,
         replayId,

src/rollbar.js

@@ -167,11 +167,6 @@ Rollbar.prototype._log = function (defaultLevel, item) {
     if (telemeter) {
       telemeter._captureRollbarItem(item);
       item.telemetryEvents = telemeter.copyEvents() || [];
-
-      if (telemeter.telemetrySpan) {
-        telemeter.telemetrySpan.end({'rollbar.replay.id': replayId});
-        telemeter.telemetrySpan = telemeter.tracing.startSpan('rollbar-telemetry', {});
-      }
     }
 
     this.notifier.log(item, callback);

src/telemetry.js

@@ -50,6 +50,14 @@ Telemeter.prototype.copyEvents = function () {
   return events;
 };
 
+
+Telemeter.prototype.exportTelemetrySpan = function (attributes = {}) {
+  if (this.telemetrySpan) {
+    this.telemetrySpan.end(attributes);
+    this.telemetrySpan = this.tracing.startSpan('rollbar-telemetry', {});
+  }
+};
+
 Telemeter.prototype.capture = function (
   type,
   metadata,

test/replay/integration/e2e.test.js

@@ -7,6 +7,7 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 
 import Tracing from '../../../src/tracing/tracing.js';
+import Telemeter from '../../../src/telemetry.js';
 import Recorder from '../../../src/browser/replay/recorder.js';
 import ReplayMap from '../../../src/browser/replay/replayMap.js';
 import recorderDefaults from '../../../src/browser/replay/defaults.js';
@@ -37,6 +38,7 @@ const options = {
 
 describe('Session Replay E2E', function () {
   let tracing;
+  let telemeter;
   let recorder;
   let api;
   let transport;
@@ -73,6 +75,7 @@ describe('Session Replay E2E', function () {
       urlMock,
       truncationMock,
     );
+    telemeter = new Telemeter({}, tracing);
 
     recorder = new Recorder(options.recorder, mockRecordFn);
 
@@ -82,6 +85,7 @@ describe('Session Replay E2E', function () {
       recorder,
       api,
       tracing,
+      telemeter,
     });
 
     queue = new Queue(rateLimiter, api, logger, { transmit: true }, replayMap);
@@ -146,24 +150,35 @@ describe('Session Replay E2E', function () {
             payloads.standardPayload.resourceSpans[0].resource,
           );
 
-          const span = resourceSpan.scopeSpans[0].spans[0];
-          expect(span).to.have.property('name', 'rrweb-replay-recording');
-          expect(span).to.have.property('events');
-          expect(span.events).to.be.an('array');
-          expect(span).to.have.property('attributes').that.is.an('array');
-          expect(span.attributes).to.have.lengthOf(2);
+          const span_t = resourceSpan.scopeSpans[0].spans[0]; // telemetry span
+          const span_r = resourceSpan.scopeSpans[0].spans[1]; // recording span
 
-          expect(span.attributes).to.deep.include({
+          expect(span_r).to.have.property('name', 'rrweb-replay-recording');
+          expect(span_r).to.have.property('events');
+          expect(span_r.events).to.be.an('array');
+          expect(span_r).to.have.property('attributes').that.is.an('array');
+          expect(span_r.attributes).to.have.lengthOf(2);
+
+          expect(span_r.attributes).to.deep.include({
             key: 'rollbar.replay.id',
             value: { stringValue: expectedReplayId },
           });
 
-          const sessionIdAttr = span.attributes.find(
+          const sessionIdAttr = span_r.attributes.find(
             (attr) => attr.key === 'session.id',
           );
           expect(sessionIdAttr).to.exist;
           expect(sessionIdAttr.value.stringValue).to.match(/^[0-9a-fA-F]{32}$/);
 
+          expect(span_t).to.have.property('name', 'rollbar-telemetry');
+          expect(span_t.attributes).to.deep.include({
+            key: 'rollbar.replay.id',
+            value: { stringValue: expectedReplayId },
+          });
+          expect(sessionIdAttr).to.deep.equal(
+            span_t.attributes.find((attr) => attr.key === 'session.id'),
+          );
+
           const transportArgs = transport.post.lastCall.args;
           expect(transportArgs[1].path).to.include('/api/1/session/');