rollbar 2.26.4 → 3.0.0-alpha.2

package/eslint.config.mjs

@@ -0,0 +1,33 @@
+import babelParser from '@babel/eslint-parser';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  {
+    files: ['**/*.js', '**/*.mjs'],
+    languageOptions: {
+      ecmaVersion: 2021,
+      sourceType: 'module',
+      parser: babelParser,
+      parserOptions: {
+        ecmaVersion: 2021,
+      },
+    },
+    rules: {
+      'comma-dangle': 'off',
+      'strict': 0,
+      'no-underscore-dangle': 0,
+      'no-useless-escape': 0,
+      'complexity': [2, { 'max': 35 }],
+      'no-use-before-define': [0, { 'functions': false }],
+      'no-prototype-builtins': 0,
+
+      // Off until issues are fixed
+      'camelcase': 'off', //[2, {'properties': 'never'}],
+      'no-unused-vars': 'off', //[2, { 'argsIgnorePattern': '^_' }],
+      'quotes': 'off', //[2, 'single', 'avoid-escape'],
+    }
+  },
+  {
+    ignores: ['dist', 'examples', 'node_modules', 'vendor'],
+  }
+]);

package/karma.conf.js

@@ -1,8 +1,8 @@
-var path = require('path');
-var webpack = require('webpack');
-var defaults = require('./defaults');
+const path = require('path');
+const webpack = require('webpack');
+const defaults = require('./defaults');
 
-var defaultsPlugin = new webpack.DefinePlugin(defaults);
+const defaultsPlugin = new webpack.DefinePlugin(defaults);
 
 module.exports = function (config) {
   config.set({
@@ -66,17 +66,8 @@ module.exports = function (config) {
       module: {
         rules: [
           {
-            enforce: 'pre',
             test: /\.js$/,
-            loader: 'eslint-loader',
-            exclude: [/node_modules/, /vendor/, /lib/, /dist/],
-            options: {
-              configFile: path.resolve(__dirname, '.eslintrc'),
-            },
-          },
-          {
-            test: /\.js$/,
-            loader: 'strict-loader',
+            loader: 'babel-loader',
             exclude: [/node_modules/, /vendor/, /lib/, /dist/, /test/],
           },
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollbar",
-  "version": "2.26.4",
+  "version": "3.0.0-alpha.2",
   "repository": {
     "type": "git",
     "url": "http://github.com/rollbar/rollbar.js"
@@ -18,6 +18,7 @@
   "browser": "dist/rollbar.umd.min.js",
   "types": "./index.d.ts",
   "dependencies": {
+    "@rrweb/record": "^2.0.0-alpha.18",
     "async": "~3.2.3",
     "console-polyfill": "0.3.0",
     "error-stack-parser": "^2.0.4",
@@ -27,20 +28,21 @@
     "source-map": "^0.5.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.26.10",
+    "@babel/eslint-parser": "^7.27.0",
+    "@babel/preset-env": "^7.26.9",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^9.2.1",
     "bluebird": "^3.3.5",
     "chai": "^4.2.0",
     "chalk": "^1.1.1",
     "coverage-istanbul-loader": "^3.0.5",
-    "eslint": "^6.8.0",
-    "eslint-loader": "^3.0.3",
-    "express": "^4.18.2",
+    "eslint": "^9.24.0",
+    "express": "^4.21.2",
     "glob": "^5.0.14",
     "grunt": "^1.1.0",
     "grunt-bumpup": "^0.6.3",
-    "grunt-cli": "^1.3.2",
+    "grunt-cli": "^1.5.0",
     "grunt-contrib-concat": "^2.1.0",
     "grunt-contrib-connect": "^2.1.0",
     "grunt-contrib-copy": "^1.0.0",
@@ -50,12 +52,11 @@
     "grunt-karma": "^4.0.2",
     "grunt-parallel": "^0.5.1",
     "grunt-text-replace": "^0.4.0",
-    "grunt-vows": "^0.4.2",
     "grunt-webpack": "^5.0.0",
     "jade": "~0.27.7",
     "jasmine-core": "^2.3.4",
     "jquery-mockjax": "^2.5.0",
-    "karma": "^6.4.2",
+    "karma": "^6.4.4",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-expect": "^1.1.0",
@@ -69,30 +70,28 @@
     "karma-sinon": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^5.0.0",
-    "mocha": "^10.2.0",
+    "mocha": "^11.1.0",
     "natives": "^1.1.6",
     "nock": "^11.9.1",
     "node-libs-browser": "^0.5.2",
     "prettier": "^3.2.5",
-    "requirejs": "^2.1.20",
+    "requirejs": "^2.3.7",
     "script-loader": "0.6.1",
     "sinon": "^8.1.1",
     "stackframe": "^0.2.2",
-    "strict-loader": "^1.2.0",
     "time-grunt": "^1.0.0",
-    "vows": "^0.8.3",
-    "webpack": "^5.88.2"
-  },
-  "optionalDependencies": {
-    "decache": "^3.0.5"
+    "webpack": "^5.98.0"
   },
   "scripts": {
     "build": "./node_modules/.bin/grunt",
     "test": "./node_modules/.bin/grunt test",
     "test-browser": "./node_modules/.bin/grunt test-browser",
-    "test-server": "./node_modules/.bin/grunt test-server",
-    "test_ci": "./node_modules/.bin/grunt test",
-    "lint": "./node_modules/.bin/eslint . --ext .js"
+    "test-server": "mocha 'test/server.*.mocha.test.mjs' --reporter spec",
+    "test-replay": "./node_modules/.bin/grunt test-replay",
+    "test-replay-unit": "./node_modules/.bin/grunt test-replay-unit",
+    "test-replay-integration": "./node_modules/.bin/grunt test-replay-integration",
+    "test-ci": "./node_modules/.bin/grunt test && npm run test-server",
+    "lint": "./node_modules/.bin/eslint ."
   },
   "cdn": {
     "host": "cdn.rollbar.com"

package/src/api.js

@@ -10,6 +10,15 @@ var defaultOptions = {
   port: 443,
 };
 
+var OTLPDefaultOptions = {
+  hostname: 'api.rollbar.com',
+  path: '/api/1/session/',
+  search: null,
+  version: '1',
+  protocol: 'https:',
+  port: 443,
+};
+
 /**
  * Api is an object that encapsulates methods of communicating with
  * the Rollbar API.  It is a standard interface with some parts implemented
@@ -29,16 +38,35 @@ var defaultOptions = {
  *          protocol (optional): https
  * }
  */
-function Api(options, transport, urllib, truncation, jsonBackup) {
+function Api(options, transport, urllib, truncation) {
   this.options = options;
   this.transport = transport;
   this.url = urllib;
   this.truncation = truncation;
-  this.jsonBackup = jsonBackup;
   this.accessToken = options.accessToken;
   this.transportOptions = _getTransport(options, urllib);
+  this.OTLPTransportOptions = _getOTLPTransport(options, urllib);
 }
 
+/**
+ * Wraps transport.post in a Promise to support async/await
+ *
+ * @param {Object} options - Options for the API request
+ * @param {string} options.accessToken - The access token for authentication
+ * @param {Object} options.transportOptions - Options for the transport
+ * @param {Object} options.payload - The data payload to send
+ * @returns {Promise} A promise that resolves with the response or rejects with an error
+ * @private
+ */
+Api.prototype._postPromise = function({ accessToken, transportOptions, payload }) {
+  const self = this;
+  return new Promise((resolve, reject) => {
+    self.transport.post(accessToken, transportOptions, payload, (err, resp) =>
+      err ? reject(err) : resolve(resp)
+    );
+  });
+};
+
 /**
  *
  * @param data
@@ -49,7 +77,7 @@ Api.prototype.postItem = function (data, callback) {
     this.transportOptions,
     'POST',
   );
-  var payload = helpers.buildPayload(this.accessToken, data, this.jsonBackup);
+  var payload = helpers.buildPayload(data);
   var self = this;
 
   // ensure the network request is scheduled after the current tick.
@@ -58,13 +86,32 @@ Api.prototype.postItem = function (data, callback) {
   }, 0);
 };
 
+/**
+ * Posts spans to the Rollbar API using the session endpoint
+ *
+ * @param {Array} payload - The spans to send
+ * @returns {Promise<Object>} A promise that resolves with the API response
+ */
+Api.prototype.postSpans = async function (payload) {
+  const transportOptions = helpers.transportOptions(
+    this.OTLPTransportOptions,
+    'POST',
+  );
+
+  return await this._postPromise({
+    accessToken: this.accessToken,
+    transportOptions,
+    payload
+  });
+};
+
 /**
  *
  * @param data
  * @param callback
  */
 Api.prototype.buildJsonPayload = function (data, callback) {
-  var payload = helpers.buildPayload(this.accessToken, data, this.jsonBackup);
+  var payload = helpers.buildPayload(data);
 
   var stringifyResult;
   if (this.truncation) {
@@ -105,6 +152,7 @@ Api.prototype.configure = function (options) {
   var oldOptions = this.oldOptions;
   this.options = _.merge(oldOptions, options);
   this.transportOptions = _getTransport(this.options, this.url);
+  this.OTLPTransportOptions = _getOTLPTransport(this.options, this.url);
   if (this.options.accessToken !== undefined) {
     this.accessToken = this.options.accessToken;
   }
@@ -115,4 +163,9 @@ function _getTransport(options, url) {
   return helpers.getTransportFromOptions(options, defaultOptions, url);
 }
 
+function _getOTLPTransport(options, url) {
+  options = {...options, endpoint: options.tracing?.endpoint};
+  return helpers.getTransportFromOptions(options, OTLPDefaultOptions, url);
+}
+
 module.exports = Api;

package/src/apiUtility.js

@@ -1,8 +1,8 @@
 var _ = require('./utility');
 
-function buildPayload(accessToken, data, jsonBackup) {
+function buildPayload(data) {
   if (!_.isType(data.context, 'string')) {
-    var contextResult = _.stringify(data.context, jsonBackup);
+    var contextResult = _.stringify(data.context);
     if (contextResult.error) {
       data.context = "Error: could not serialize 'context'";
     } else {
@@ -13,7 +13,6 @@ function buildPayload(accessToken, data, jsonBackup) {
     }
   }
   return {
-    access_token: accessToken,
     data: data,
   };
 }

package/src/browser/core.js

@@ -12,24 +12,48 @@ var sharedTransforms = require('../transforms');
 var predicates = require('./predicates');
 var sharedPredicates = require('../predicates');
 var errorParser = require('../errorParser');
+const recorderDefaults = require('./replay/defaults').default;
+const tracingDefaults = require('../tracing/defaults').default;
+const ReplayMap = require('./replay/replayMap').default;
 
 function Rollbar(options, client) {
   this.options = _.handleOptions(defaultOptions, options, null, logger);
   this.options._configuredOptions = options;
-  var Telemeter = this.components.telemeter;
-  var Instrumenter = this.components.instrumenter;
-  var polyfillJSON = this.components.polyfillJSON;
+  const Telemeter = this.components.telemeter;
+  const Instrumenter = this.components.instrumenter;
+  const polyfillJSON = this.components.polyfillJSON;
   this.wrapGlobals = this.components.wrapGlobals;
   this.scrub = this.components.scrub;
-  var truncation = this.components.truncation;
+  const truncation = this.components.truncation;
+  const Tracing = this.components.tracing;
+  const Recorder = this.components.recorder;
+
+  const transport = new Transport(truncation);
+  const api = new API(this.options, transport, urllib, truncation);
+  if (Tracing) {
+    this.tracing = new Tracing(_gWindow(), this.options);
+    this.tracing.initSession();
+  }
+
+  if (Recorder && _.isBrowser()) {
+    const recorderOptions = this.options.recorder;
+    this.recorder = new Recorder(recorderOptions);
+    this.replayMap = new ReplayMap({
+      recorder: this.recorder,
+      api: api,
+      tracing: this.tracing
+    });
+
+    if (recorderOptions.enabled && recorderOptions.autoStart) {
+      this.recorder.start();
+    }
+  }
 
-  var transport = new Transport(truncation);
-  var api = new API(this.options, transport, urllib, truncation);
   if (Telemeter) {
-    this.telemeter = new Telemeter(this.options);
+    this.telemeter = new Telemeter(this.options, this.tracing);
   }
   this.client =
-    client || new Client(this.options, api, logger, this.telemeter, 'browser');
+    client || new Client(this.options, api, logger, this.telemeter, this.tracing, this.replayMap, 'browser');
   var gWindow = _gWindow();
   var gDocument = typeof document != 'undefined' && document;
   this.isChrome = gWindow.chrome && gWindow.chrome.runtime; // check .runtime to avoid Edge browsers
@@ -94,12 +118,15 @@ Rollbar.prototype.configure = function (options, payloadData) {
   if (payloadData) {
     payload = { payload: payloadData };
   }
+
   this.options = _.handleOptions(oldOptions, options, payload, logger);
   this.options._configuredOptions = _.handleOptions(
     oldOptions._configuredOptions,
     options,
     payload,
   );
+
+  this.recorder?.configure(this.options);
   this.client.configure(this.options, payloadData);
   this.instrumenter && this.instrumenter.configure(this.options);
   this.setupUnhandledCapture();
@@ -344,7 +371,6 @@ Rollbar.prototype.handleAnonymousErrors = function () {
 
   var r = this;
   function prepareStackTrace(error, _stack) {
-    // eslint-disable-line no-unused-vars
     if (r.options.inspectAnonymousErrors) {
       if (r.anonymousErrorsPending) {
         // This is the only known way to detect that onerror saw an anonymous error.
@@ -600,6 +626,8 @@ var defaultOptions = {
   inspectAnonymousErrors: true,
   ignoreDuplicateErrors: true,
   wrapGlobalEventHandlers: false,
+  recorder: recorderDefaults,
+  tracing: tracingDefaults,
 };
 
 module.exports = Rollbar;

package/src/browser/replay/defaults.js

@@ -0,0 +1,70 @@
+/**
+ * Default options for the rrweb recorder
+ * See https://github.com/rrweb-io/rrweb/blob/master/guide.md#options for details
+ */
+export default {
+  enabled: false, // Whether recording is enabled
+  autoStart: true, // Start recording automatically when Rollbar initializes
+  maxSeconds: 300, // Maximum recording duration in seconds
+
+  triggerOptions: {
+    // Trigger replay on specific items (occurrences)
+    item: {
+      levels: ['error', 'critical'], // Trigger on item level
+    },
+  },
+
+  debug: {
+    logErrors: true, // Whether to log errors emitted by rrweb.
+    logEmits: false, // Whether to log emitted events
+  },
+
+  // Recording options
+  inlineStylesheet: true, // Whether to inline stylesheets to improve replay accuracy
+  inlineImages: false, // Whether to record the image content
+  collectFonts: true, // Whether to collect fonts in the website
+
+  // Privacy options
+  // Fine-grained control over which input types to mask
+  // By default only password inputs are masked if maskInputs is true
+  maskInputOptions: {
+    password: true,
+    email: false,
+    tel: false,
+    text: false,
+    color: false,
+    date: false,
+    'datetime-local': false,
+    month: false,
+    number: false,
+    range: false,
+    search: false,
+    time: false,
+    url: false,
+    week: false,
+  },
+
+  // Remove unnecessary parts of the DOM
+  // By default all removable elements are removed
+  slimDOMOptions: {
+    script: true, // Remove script elements
+    comment: true, // Remove comments
+    headFavicon: true, // Remove favicons in the head
+    headWhitespace: true, // Remove whitespace in head
+    headMetaDescKeywords: true, // Remove meta description and keywords
+    headMetaSocial: true, // Remove social media meta tags
+    headMetaRobots: true, // Remove robots meta directives
+    headMetaHttpEquiv: true, // Remove http-equiv meta directives
+    headMetaAuthorship: true, // Remove authorship meta directives
+    headMetaVerification: true, // Remove verification meta directives
+  },
+
+  // Custom callbacks for advanced use cases
+  // These are undefined by default and can be set programmatically
+  // maskInputFn: undefined,      // Custom function to mask input values
+  // maskTextFn: undefined,       // Custom function to mask text content
+  // errorHandler: undefined,     // Custom error handler for recording errors
+
+  // Plugin system
+  // plugins: []                  // List of plugins to use (must be set programmatically)
+};

package/src/browser/replay/recorder.js

@@ -0,0 +1,194 @@
+import { record as rrwebRecordFn } from '@rrweb/record';
+import { EventType } from '@rrweb/types';
+
+import hrtime from '../../tracing/hrtime.js';
+import logger from '../logger.js';
+
+export default class Recorder {
+  #options;
+  #rrwebOptions;
+  #stopFn = null;
+  #recordFn;
+  #events = {
+    previous: [],
+    current: [],
+  };
+
+  /**
+   * Creates a new Recorder instance for capturing DOM events
+   *
+   * @param {Object} options - Configuration options for the recorder
+   * @param {Function} [recordFn=rrwebRecordFn] - The recording function to use
+   */
+  constructor(options, recordFn = rrwebRecordFn) {
+    if (!recordFn) {
+      throw new TypeError("Expected 'recordFn' to be provided");
+    }
+
+    this.options = options;
+    this.#recordFn = recordFn;
+  }
+
+  get isRecording() {
+    return this.#stopFn !== null;
+  }
+
+  get options() {
+    return this.#options;
+  }
+
+  set options(newOptions) {
+    this.configure(newOptions);
+  }
+
+  configure(newOptions) {
+    const {
+      // Rollbar options
+      enabled,
+      autoStart,
+      maxSeconds,
+      triggerOptions,
+      debug,
+
+      // disallowed rrweb options
+      emit,
+      checkoutEveryNms,
+
+      // rrweb options
+      ...rrwebOptions
+    } = newOptions;
+    this.#options = { enabled, autoStart, maxSeconds, triggerOptions, debug };
+    this.#rrwebOptions = rrwebOptions;
+
+    if (this.isRecording && newOptions.enabled === false) {
+      this.stop();
+    }
+  }
+
+  checkoutEveryNms() {
+    // Recording may be up to two checkout intervals, therefore the checkout
+    // interval is set to half of the maxSeconds.
+    return (this.options.maxSeconds || 10) * 1000 / 2;
+  }
+
+  /**
+   * Converts recorded events into a formatted payload ready for transport.
+   *
+   * This method takes the recorder's stored events, creates a new span with the
+   * provided tracing context, attaches all events with their timestamps as span
+   * events, and then returns a payload ready for transport to the server.
+   *
+   * @param {Object} tracing - The tracing system instance to create spans
+   * @param {string} replayId - Unique identifier to associate with this replay recording
+   * @returns {Object|null} A formatted payload containing spans data in OTLP format, or null if no events exist
+   */
+  dump(tracing, replayId, occurrenceUuid) {
+    const events = this.#events.previous.concat(this.#events.current);
+
+    if (events.length < 2) {
+      logger.error('Replay recording cannot have less than 2 events');
+      return null;
+    }
+
+    const recordingSpan = tracing.startSpan('rrweb-replay-recording', {});
+
+    recordingSpan.setAttribute('rollbar.replay.id', replayId);
+
+    if (occurrenceUuid) {
+      recordingSpan.setAttribute('rollbar.occurrence.uuid', occurrenceUuid);
+    }
+
+    const earliestEvent = events.reduce((earliestEvent, event) =>
+      event.timestamp < earliestEvent.timestamp ? event : earliestEvent,
+    );
+
+    recordingSpan.span.startTime = hrtime.fromMillis(earliestEvent.timestamp);
+
+    for (const event of events) {
+      recordingSpan.addEvent(
+        'rrweb-replay-events',
+        {
+          eventType: event.type,
+          json: JSON.stringify(event.data),
+          'rollbar.replay.id': replayId,
+        },
+        hrtime.fromMillis(event.timestamp),
+      );
+    }
+
+    recordingSpan.end();
+
+    return tracing.exporter.toPayload();
+  }
+
+  start() {
+    if (this.isRecording || this.options.enabled === false) {
+      return;
+    }
+
+    this.clear();
+
+    this.#stopFn = this.#recordFn({
+      emit: (event, isCheckout) => {
+        if (this.options.debug?.logEmits) {
+          this._logEvent(event, isCheckout);
+        }
+
+        if (isCheckout && event.type === EventType.Meta) {
+          this.#events.previous = this.#events.current;
+          this.#events.current = [];
+        }
+
+        this.#events.current.push(event);
+      },
+      checkoutEveryNms: this.checkoutEveryNms(),
+      errorHandler: (error) => {
+        if (this.options.debug?.logErrors) {
+          logger.error('Error during replay recording', error);
+        }
+        return true; // swallow the error instead of throwing it to the window
+      },
+      ...this.#rrwebOptions,
+    });
+
+    return this;
+  }
+
+  stop() {
+    if (!this.isRecording) {
+      return;
+    }
+
+    this.#stopFn();
+    this.#stopFn = null;
+
+    return this;
+  }
+
+  clear() {
+    this.#events = {
+      previous: [],
+      current: [],
+    };
+  }
+
+  _logEvent(event, isCheckout) {
+    logger.log(
+      `Recorder: ${isCheckout ? 'checkout' : ''} event\n`,
+      ((e) => {
+        const seen = new WeakSet();
+        return JSON.stringify(
+          e,
+          (_, v) => {
+            if (typeof v === 'object' && v !== null) {
+              if (seen.has(v)) return '[Circular]';
+              seen.add(v);
+            }
+            return v;
+          },
+          2,
+        );
+      })(event),
+    );
+  }
+}