🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →

Book a Demo Install Sign in

@splunk/otel-web

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@splunk/otel-web

Splunk distribution of Open Telemetry for browser environment.

latest

Source

npm

Version: 1.1.0

Version published: last week

Weekly downloads: 14K

Maintainers: 14

Weekly downloads

Created: 5 years ago

Source

@splunk/otel-web

🚀 Installation & Setup • ⚙️ Configuration • 🛠️ Troubleshooting • 📚 API Reference

For complete instructions for how to get started with the Splunk distribution of OpenTelemetry JavaScript for Web, see Install the Browser RUM agent for Splunk RUM and Instrument browser-based web applications for Splunk RUM.

Splunk RUM for Browser collects performance metrics, web vitals, errors, and other forms of data for every user session to enable you to detect and troubleshoot problems in your application. For a complete view of your application from browser to back-end, integrate with Splunk APM.

🚀 Installation & Setup

Package Manager Installation

1. Install the Package

npm install @splunk/otel-web
# or
pnpm add @splunk/otel-web
# or
yarn add @splunk/otel-web

2. Initialize RUM

import { SplunkRum } from '@splunk/otel-web'

SplunkRum.init({
	realm: 'us1', // Your Splunk realm
	rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN', // RUM access token
	applicationName: 'my-web-app', // Application identifier
	deploymentEnvironment: 'production', // Environment (dev, staging, prod)
})

CDN Installation

1. Load the Script

Choose a versioning strategy based on your needs:

Major Version Lock (Recommended)

<!-- Locks to v1.x.x - gets latest minor and patch updates -->
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v1/splunk-otel-web.js" crossorigin="anonymous"></script>

Minor Version Lock

<!-- Locks to v1.1.x - gets latest patch updates only -->
<script src="https://cdn.signalfx.com/o11y-gdi-rum/v1.1/splunk-otel-web.js" crossorigin="anonymous"></script>

Exact Version Lock

<!-- Locks to exact version v1.1.0 - no automatic updates -->
<script
	src="https://cdn.signalfx.com/o11y-gdi-rum/v1.1.0/splunk-otel-web.js"
	crossorigin="anonymous"
	integrity="sha384-<integrity>"
></script>

Latest Version (Not Recommended)

<!-- Always pulls the latest released version -->
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>

⚠️ Warning: Using latest automatically pulls the newest released version of the RUM agent, which may introduce breaking changes without notice. This can cause unexpected behavior in production. Use a version lock strategy instead.

📖 For version numbers and integrity hashes, see GitHub Releases.

📚 For detailed CDN setup instructions, see the official documentation.

2. Initialize RUM

<script>
	SplunkRum.init({
		realm: 'us1', // Your Splunk realm
		rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN', // RUM access token
		applicationName: 'my-web-app', // Application identifier
		deploymentEnvironment: 'production', // Environment (dev, staging, prod)
	})
</script>

Complete CDN Example

<!DOCTYPE html>
<html>
	<head>
		<title>My Web App</title>
		<!-- Load Splunk RUM (using major version lock) -->
		<script src="https://cdn.signalfx.com/o11y-gdi-rum/v1/splunk-otel-web.js" crossorigin="anonymous"></script>
		<script>
			SplunkRum.init({
				realm: 'us1',
				rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
				applicationName: 'my-web-app',
				deploymentEnvironment: 'production',
				debug: false, // Set to true for development
			})
		</script>
	</head>
	<body>
		<!-- Your app content -->
	</body>
</html>

⚙️ Configuration Options

Option	Type	Required	Default	Description
`realm`	`string`	✅	-	Splunk realm (us0, us1, eu0, etc.)
`rumAccessToken`	`string`	✅	-	Publicly-visible RUM access token
`applicationName`	`string`	❌	`'unknown-browser-app'`	Application name identifier
`deploymentEnvironment`	`string`	❌	-	Sets the `environment` attribute
`version`	`string`	❌	-	Sets the `app.version` attribute
`beaconEndpoint`	`string`	❌	-	Custom destination URL (overrides realm)
`debug`	`boolean`	❌	`false`	Enable internal debug logging
`cookieDomain`	`string`	❌	`window.location.hostname`	Domain for session cookies
`ignoreUrls`	`Array<string\|RegExp>`	❌	`[]`	URLs to exclude from tracing
`globalAttributes`	`Attributes`	❌	`{}`	Attributes added to every span
`persistence`	`'cookie'\|'localStorage'`	❌	`'cookie'`	Where to store session data
`disableAutomationFrameworks`	`boolean`	❌	`false`	Block automation frameworks
`disableBots`	`boolean`	❌	`false`	Block bots (Google bot, Bing bot, etc.)
`user.trackingMode`	`'noTracking'\|'anonymousTracking'`	❌	`'noTracking'`	User tracking behavior
`exporter.otlp`	`boolean`	❌	`false`	Use OTLP format instead of Zipkin
`exporter.onAttributesSerializing`	`function`	❌	-	Transform attributes before export
`privacy.maskAllText`	`boolean`	❌	`true`	Mask all text from text nodes
`privacy.sensitivityRules`	`Array<SensitivityRule>`	❌	`[]`	Rules for text sensitivity by selector
Instrumentations
`instrumentations.connectivity`	`boolean\|Config`	❌	`false`	Network connectivity monitoring
`instrumentations.document`	`boolean\|Config`	❌	`true`	Document load instrumentation
`instrumentations.errors`	`boolean\|Config`	❌	`true`	Error capture
`instrumentations.fetch`	`boolean\|Config`	❌	`true`	Fetch API monitoring
`instrumentations.interactions`	`boolean\|Config`	❌	`true`	User interaction tracking
`instrumentations.longtask`	`boolean\|Config`	❌	`true`	Long task detection (>50ms)
`instrumentations.postload`	`boolean\|Config`	❌	`true`	Post-load resource timing
`instrumentations.socketio`	`boolean\|Config`	❌	`false`	Socket.IO client monitoring
`instrumentations.visibility`	`boolean\|Config`	❌	`false`	Page visibility changes
`instrumentations.webvitals`	`boolean\|Config`	❌	`true`	Web Vitals collection
`instrumentations.websocket`	`boolean\|Config`	❌	`false`	WebSocket monitoring
`instrumentations.xhr`	`boolean\|Config`	❌	`true`	XMLHttpRequest monitoring

Privacy Configuration

The privacy configuration allows you to control how text content is collected from user interactions:

maskAllText: When true (default), all text from text nodes is masked unless an unmask rule applies
sensitivityRules: Array of rules that determine text sensitivity based on CSS selectors. Rules are applied in order, with later rules overriding earlier ones

Rule Types:

mask: Mask text content in matching elements
unmask: Unmask text content in matching elements
exclude: Exclude matching elements from text collection entirely

Example:

privacy: {
  maskAllText: true,
  sensitivityRules: [
    { rule: 'unmask', selector: '.public-content' },
    { rule: 'exclude', selector: '.sensitive-data' },
    { rule: 'mask', selector: '.public-content .private-info' }
  ]
}

Complete Configuration Example

import { SplunkRum } from '@splunk/otel-web'

SplunkRum.init({
	// Required settings
	realm: 'us1',
	rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',

	// Application identification
	applicationName: 'my-web-app',
	deploymentEnvironment: 'production',
	version: '1.2.3',

	cookieDomain: window.location.hostname,
	persistence: 'cookie',
	ignoreUrls: [/\/health-check/, '/analytics/track', 'https://third-party-ads.com'],

	// Global attributes for all spans
	globalAttributes: {
		'team': 'frontend',
		'feature.flag.checkout': 'enabled',
	},

	// Bot detection
	disableAutomationFrameworks: true,
	disableBots: true,

	// User tracking
	user: {
		trackingMode: 'anonymousTracking',
	},

	// Privacy configuration
	privacy: {
		maskAllText: true, // Mask all text from text nodes by default
		sensitivityRules: [
			// Unmask text in specific elements
			{ rule: 'unmask', selector: '.public-content' },
			{ rule: 'unmask', selector: 'h1, h2, h3' },
			// Exclude sensitive elements entirely
			{ rule: 'exclude', selector: '.sensitive-data' },
			// Override previous rules for specific cases
			{ rule: 'mask', selector: '.public-content .private-info' },
		],
	},

	// Export options
	exporter: {
		otlp: true, // Use OTLP instead of Zipkin
		onAttributesSerializing: (attributes, span) => {
			// Remove or hash sensitive data
			if (attributes['http.url']) {
				attributes['http.url'] = sanitizeUrl(attributes['http.url'])
			}
			return attributes
		},
	},

	// Instrumentation control
	instrumentations: {
		// Core instrumentations (enabled by default)
		document: true,
		errors: true,
		fetch: true,
		interactions: true,
		longtask: true,
		postload: true,
		webvitals: true,
		xhr: true,

		// Optional instrumentations (disabled by default)
		connectivity: false,
		socketio: false,
		visibility: false,
		websocket: false,
	},

	// Development
	debug: process.env.NODE_ENV !== 'production',
})

📚 API Reference

SplunkRum Class

Static Methods

Method	Parameters	Returns	Description
`init(config)`	`SplunkRumConfig`	`void`	Initialize the RUM SDK
`setGlobalAttributes(attrs)`	`Attributes`	`void`	Add global span attributes
`getSessionId()`	-	`string`	Get current session ID

Properties

Property	Type	Description
`provider`	`TracerProvider`	OpenTelemetry tracer provider

🛠️ Troubleshooting

For troubleshooting issues with the Splunk Distribution of OpenTelemetry JS for Web, see Troubleshoot browser instrumentation for Splunk Observability Cloud in the official documentation.

📜 License

Licensed under the Apache License, Version 2.0. See LICENSE for the full license text.

ℹ️ SignalFx was acquired by Splunk in October 2019. See Splunk SignalFx for more information.

1.1.0

@splunk/otel-web
- Collect Text from Clicked Elements #1332
  - Click events now capture text content from the clicked elements with privacy-first defaults
  - Default Behavior: By default, only the element's tag name is collected (e.g., [Button]), ensuring no sensitive information is captured
  - Masking & Unmasking: Use maskAllText and sensitiveRules configuration options to control text capture behavior, similar to session replay functionality
  - Examples:
    - Default: Clicked to '[Button]' for <button>Potentially sensitive text</button>
    - After explicitly unmasking: Clicked to 'Potentially sensitive text'
  - See documentation for details on masking configuration
@splunk/otel-web-session-recorder
- Add browser compatibility guard and enable polyfills for session recorder CDN bundle #1450
  - Prevents session recorder initialization in unsupported browsers and enables automatic polyfill injection for the CDN bundle.

Keywords

FAQs

What is @splunk/otel-web?

Is @splunk/otel-web popular?

Is @splunk/otel-web well maintained?

Package last updated on 21 Oct 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@splunk/otel-web

@splunk/otel-web

🚀 Installation & Setup

Package Manager Installation

1. Install the Package

2. Initialize RUM

CDN Installation

1. Load the Script

2. Initialize RUM

Complete CDN Example

⚙️ Configuration Options

Privacy Configuration

Complete Configuration Example

📚 API Reference

SplunkRum Class

Static Methods

Properties

🛠️ Troubleshooting

📜 License

1.1.0

Keywords

Related posts

Introducing Socket Firewall Enterprise: Flexible, Configurable Protection for Modern Package Ecosystems

New CNAPulse Dashboard Tracks CNA Activity and Disclosure Trends