tessl/npm-rollbar

JavaScript error tracking and monitoring library for Node.js and browser environments with telemetry, automatic error grouping, and real-time notifications

—

Pending

Overview

Eval results

Files

Telemetry

Name: tessl/npm-rollbar
Author: tessl

Comprehensive telemetry capture system providing debugging context through user interactions, application events, network requests, and custom events.

Capabilities

Capture Event

Capture custom telemetry events with metadata and severity levels.

/**
 * Capture a custom telemetry event
 * @param metadata - Event metadata and context
 * @param level - Severity level of the event
 * @returns Telemetry event object with UUID
 */
function captureEvent(metadata: object, level: Level): TelemetryEvent;

Usage Examples:

// User interaction tracking
rollbar.captureEvent({
  type: 'user_action',
  action: 'button_click',
  button_id: 'checkout',
  user_id: '12345',
  cart_value: 99.99
}, 'info');

// Application state changes
rollbar.captureEvent({
  type: 'state_change',
  from: 'loading',
  to: 'loaded',
  component: 'ProductList',
  items_count: 25
}, 'debug');

// Performance metrics
rollbar.captureEvent({
  type: 'performance',
  operation: 'api_call',
  endpoint: '/api/users',
  duration_ms: 234,
  status_code: 200
}, 'info');

Capture Error

Capture errors as telemetry events for debugging context.

/**
 * Capture an error as a telemetry event
 * @param err - Error object to capture
 * @param level - Severity level
 * @param rollbarUUID - Optional UUID to associate with Rollbar item
 * @param timestamp - Optional custom timestamp
 * @returns Telemetry event object
 */
function captureError(
  err: Error,
  level: Level,
  rollbarUUID?: string,
  timestamp?: number
): TelemetryEvent;

Capture Log

Capture log messages as telemetry events.

/**
 * Capture a log message as telemetry event
 * @param message - Log message
 * @param level - Severity level
 * @param rollbarUUID - Optional UUID to associate with Rollbar item
 * @param timestamp - Optional custom timestamp
 * @returns Telemetry event object
 */
function captureLog(
  message: string,
  level: Level,
  rollbarUUID?: string,
  timestamp?: number
): TelemetryEvent;

DOM Content Loaded

Capture DOM content loaded events (browser only).

/**
 * Capture DOM content loaded event
 * @param timestamp - Optional custom timestamp
 * @returns Telemetry event object
 */
function captureDomContentLoaded(timestamp?: number): TelemetryEvent;

Page Load

Capture page load events (browser only).

/**
 * Capture page load event
 * @param timestamp - Optional custom timestamp
 * @returns Telemetry event object
 */
function captureLoad(timestamp?: number): TelemetryEvent;

Copy Events

Get a filtered copy of all telemetry events.

/**
 * Get a copy of all telemetry events, filtered by configuration
 * @returns Array of telemetry events
 */
function copyEvents(): TelemetryEvent[];

Telemetry Event Interface

interface TelemetryEvent {
  level: Level;
  type: string;
  timestamp_ms: number;
  body: object;
  source: string;
  uuid?: string;
}

type Level = 'debug' | 'info' | 'warning' | 'error' | 'critical';

Auto-Instrumentation

Automatic telemetry capture for common browser events and interactions.

interface AutoInstrumentSettings {
  network?: boolean;
  networkResponseHeaders?: boolean | string[];
  networkResponseBody?: boolean;
  networkRequestBody?: boolean;
  log?: boolean;
  dom?: boolean;
  navigation?: boolean;
  connectivity?: boolean;
  contentSecurityPolicy?: boolean;
  errorOnContentSecurityPolicy?: boolean;
}

type AutoInstrumentOptions = boolean | AutoInstrumentSettings;

Network Instrumentation

Automatically capture network requests (fetch, XMLHttpRequest) and responses.

Configuration:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    network: true,
    networkResponseHeaders: ['content-type', 'x-request-id', 'x-rate-limit'],
    networkResponseBody: true, // Capture response bodies
    networkRequestBody: false // Don't capture request bodies (may contain sensitive data)
  }
});

Captured Data:

Request URL, method, headers
Response status, headers, body (if enabled)
Request duration
Error details for failed requests

DOM Instrumentation

Capture DOM events and user interactions.

Configuration:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    dom: true // Capture clicks, form submissions, input changes
  }
});

Captured Events:

Click events on buttons, links, and interactive elements
Form submissions
Input field changes
Focus and blur events

Navigation Instrumentation

Track page navigation and route changes.

Configuration:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    navigation: true // Capture page loads, route changes, history events
  }
});

Console Log Instrumentation

Capture console.log, console.error, and other console methods.

Configuration:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    log: true // Capture all console output
  }
});

Connectivity Instrumentation

Track online/offline status changes.

Configuration:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    connectivity: true // Capture network connectivity changes
  }
});

Telemetry Configuration

Maximum Events

Control the maximum number of telemetry events stored.

maxTelemetryEvents?: number;

Default: 100 events

Event Filtering

Filter telemetry events before they are stored.

filterTelemetry?: (event: TelemetryEvent) => boolean;

Usage Example:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  filterTelemetry: (event) => {
    // Only keep error and warning level events
    return event.level === 'error' || event.level === 'warning';
  }
});

Include Items in Telemetry

Include Rollbar items (errors, messages) in telemetry timeline.

includeItemsInTelemetry?: boolean;

Default: true

Telemetry Scrubbing

Control what data is captured in DOM telemetry events.

type TelemetryScrubber = (description: TelemetryScrubberInput) => boolean;

type TelemetryScrubberInput = DomDescription | null;

interface DomDescription {
  tagName: string;
  id: string | undefined;
  classes: string[] | undefined;
  attributes: DomAttribute[];
}

interface DomAttribute {
  key: DomAttributeKey;
  value: string;
}

type DomAttributeKey = 'type' | 'name' | 'title' | 'alt';

Usage Example:

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  telemetryScrubber: (description) => {
    if (!description) return false;
    
    // Scrub password fields
    if (description.attributes.some(attr => 
      attr.key === 'type' && attr.value === 'password'
    )) {
      return true; // Don't capture this element
    }
    
    // Scrub elements with sensitive data attributes
    if (description.attributes.some(attr => 
      attr.key === 'data-sensitive'
    )) {
      return true;
    }
    
    return false; // Capture this element
  }
});

Scrub Telemetry Inputs

Scrub sensitive input values from telemetry events.

scrubTelemetryInputs?: boolean;

Default: false

Telemetry Usage Examples

E-commerce Application

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    network: true,
    dom: true,
    navigation: true
  },
  maxTelemetryEvents: 200
});

// Track shopping cart events
function addToCart(productId, quantity) {
  rollbar.captureEvent({
    type: 'ecommerce',
    action: 'add_to_cart',
    product_id: productId,
    quantity: quantity,
    cart_total: getCartTotal()
  }, 'info');
  
  // Your add to cart logic
}

// Track checkout process
function startCheckout() {
  rollbar.captureEvent({
    type: 'ecommerce',
    action: 'checkout_started',
    cart_value: getCartTotal(),
    item_count: getCartItemCount()
  }, 'info');
}

function completeCheckout(orderId) {
  rollbar.captureEvent({
    type: 'ecommerce',
    action: 'checkout_completed',
    order_id: orderId,
    order_value: getOrderTotal()
  }, 'info');
}

Single Page Application

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  autoInstrument: {
    network: true,
    navigation: true,
    dom: true
  }
});

// Track route changes
function onRouteChange(from, to) {
  rollbar.captureEvent({
    type: 'navigation',
    action: 'route_change',
    from_route: from,
    to_route: to,
    user_id: getCurrentUserId()
  }, 'info');
}

// Track component lifecycle
function componentDidMount(componentName) {
  rollbar.captureEvent({
    type: 'component',
    action: 'mount',
    component: componentName,
    props: getComponentProps()
  }, 'debug');
}

// Track API calls with timing
async function apiCall(endpoint, method, data) {
  const startTime = Date.now();
  
  rollbar.captureEvent({
    type: 'api',
    action: 'request_start',
    endpoint: endpoint,
    method: method
  }, 'debug');
  
  try {
    const response = await fetch(endpoint, {
      method: method,
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    });
    
    const duration = Date.now() - startTime;
    
    rollbar.captureEvent({
      type: 'api',
      action: 'request_complete',
      endpoint: endpoint,
      method: method,
      status_code: response.status,
      duration_ms: duration
    }, response.ok ? 'info' : 'warning');
    
    return response;
  } catch (error) {
    const duration = Date.now() - startTime;
    
    rollbar.captureEvent({
      type: 'api', 
      action: 'request_error',
      endpoint: endpoint,
      method: method,
      error: error.message,
      duration_ms: duration
    }, 'error');
    
    throw error;
  }
}

Form Interaction Tracking

// Track form interactions for debugging form abandonment
function setupFormTelemetry(formId) {
  const form = document.getElementById(formId);
  
  form.addEventListener('focusin', (e) => {
    rollbar.captureEvent({
      type: 'form',
      action: 'field_focus',
      form_id: formId,
      field_name: e.target.name,
      field_type: e.target.type
    }, 'debug');
  });
  
  form.addEventListener('change', (e) => {
    rollbar.captureEvent({
      type: 'form',
      action: 'field_change',
      form_id: formId,
      field_name: e.target.name,
      field_type: e.target.type,
      value_length: e.target.value ? e.target.value.length : 0
    }, 'debug');
  });
  
  form.addEventListener('submit', (e) => {
    const formData = new FormData(form);
    rollbar.captureEvent({
      type: 'form',
      action: 'submit',
      form_id: formId,
      field_count: formData.keys().length,
      completion_time: getFormCompletionTime()
    }, 'info');
  });
}

Server-side Telemetry

const Rollbar = require('rollbar');

const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  environment: 'production'
});

// Track business logic events
function processOrder(order) {
  rollbar.captureEvent({
    type: 'business',
    action: 'order_processing',
    order_id: order.id,
    customer_id: order.customerId,
    order_value: order.total
  }, 'info');
  
  try {
    validateOrder(order);
    
    rollbar.captureEvent({
      type: 'business',
      action: 'order_validated',
      order_id: order.id
    }, 'info');
    
    const result = processPayment(order);
    
    rollbar.captureEvent({
      type: 'business',
      action: 'payment_processed',
      order_id: order.id,
      payment_method: order.paymentMethod,
      amount: order.total
    }, 'info');
    
    return result;
  } catch (error) {
    rollbar.captureEvent({
      type: 'business',
      action: 'order_processing_failed',
      order_id: order.id,
      error: error.message,
      step: getCurrentProcessingStep()
    }, 'error');
    
    throw error;
  }
}

Install with Tessl CLI