@splunk/otel-web-session-recorder
Advanced tools
🚀 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, Instrument browser-based web applications for Splunk RUM and Record browser sessions.
Privacy-aware visual session replay for web applications. The Splunk Session Recorder extends @splunk/otel-web with comprehensive session recording capabilities, correlating visual user interactions with OpenTelemetry telemetry for enhanced debugging and user experience analysis.
# Install both core RUM and session recorder
npm install @splunk/otel-web @splunk/otel-web-session-recorder
# or
pnpm add @splunk/otel-web @splunk/otel-web-session-recorder
# or
yarn add @splunk/otel-web @splunk/otel-web-session-recorder
import { SplunkRum } from '@splunk/otel-web'
import SplunkSessionRecorder from '@splunk/otel-web-session-recorder'
// Initialize core RUM first
SplunkRum.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
applicationName: 'my-web-app',
deploymentEnvironment: 'production',
})
// Then initialize session recorder
SplunkSessionRecorder.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
})
<!-- Load core RUM first -->
<script
src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-otel-web.js"
crossorigin="anonymous"
integrity="sha384-<integrity>"
></script>
<!-- Then load session recorder -->
<script
src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-session-recorder.js"
crossorigin="anonymous"
integrity="sha384-<integrity>"
></script>
Replace
<version>and<integrity>with the values from GitHub Releases.
<script>
// Initialize core RUM first
SplunkRum.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
applicationName: 'my-web-app',
deploymentEnvironment: 'production',
})
// Then initialize session recorder
SplunkSessionRecorder.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
})
</script>
<!DOCTYPE html>
<html>
<head>
<title>My Web App with Session Recording</title>
<!-- Load Splunk RUM -->
<script
src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-otel-web.js"
crossorigin="anonymous"
integrity="sha384-<integrity>"
></script>
<!-- Load Session Recorder -->
<script
src="https://cdn.signalfx.com/o11y-gdi-rum/<version>/splunk-session-recorder.js"
crossorigin="anonymous"
integrity="sha384-<integrity>"
></script>
<script>
// Initialize RUM first
SplunkRum.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
applicationName: 'my-web-app',
deploymentEnvironment: 'production',
})
// Then initialize session recorder
SplunkSessionRecorder.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
debug: false, // Set to true for development
})
</script>
</head>
<body>
<!-- Your app content -->
</body>
</html>
⚠️ Important: Always call
SplunkRum.init()beforeSplunkSessionRecorder.init().
| Option | Type | Required | Default | Description |
|---|---|---|---|---|
realm | string | ✅ | - | Splunk realm (us0, us1, eu0, etc.) |
rumAccessToken | string | ✅ | - | RUM access token for authentication |
beaconEndpoint | string | ❌ | - | Custom destination URL for captured data (overrides realm) |
debug | boolean | ❌ | false | Enable debug logging |
persistFailedReplayData | boolean | ❌ | true | Store failed uploads in localStorage for retry |
maskAllInputs | boolean | ❌ | true | Mask all form input values |
maskAllText | boolean | ❌ | false | Mask all text content |
sensitivityRules | SensitivityRule[] | ❌ | [] | Custom rules for masking, unmasking, or excluding elements |
features.canvas | boolean | ❌ | false | Record canvas elements |
features.iframes | boolean | ❌ | false | Record iframe content |
features.video | boolean | ❌ | false | Record video elements |
features.cacheAssets | boolean | ❌ | true | Cache assets for replay |
features.packAssets | boolean | PackAssetsConfig | ❌ | true | Pack assets to reduce payload size |
maxExportIntervalMs | number | ❌ | 5000 | Maximum interval between data exports (milliseconds) |
logLevel | 'debug' | 'info' | 'warn' | 'error' | ❌ | 'warn' | Logging level for session recorder |
interface SensitivityRule {
rule: 'mask' | 'unmask' | 'exclude'
selector: string // CSS selector
}
// Example usage
SplunkSessionRecorder.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
sensitivityRules: [
{ rule: 'mask', selector: '.sensitive-data' },
{ rule: 'exclude', selector: '.payment-form' },
{ rule: 'unmask', selector: '.public-content' },
],
})
interface PackAssetsConfig {
fonts?: boolean // Pack font assets
styles?: boolean // Pack CSS styles
images?:
| boolean
| {
onlyViewportImages?: boolean // Only pack visible images
pack?: boolean // Enable image packing
quality?: number // JPEG quality (0-1)
}
}
// Example usage
SplunkSessionRecorder.init({
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
features: {
packAssets: {
fonts: true,
styles: true,
images: {
onlyViewportImages: true,
pack: true,
quality: 0.8,
},
},
},
})
import SplunkSessionRecorder from '@splunk/otel-web-session-recorder'
SplunkSessionRecorder.init({
// Required settings
realm: 'us1',
rumAccessToken: 'YOUR_RUM_ACCESS_TOKEN',
// Optional: Custom endpoint (overrides realm)
beaconEndpoint: 'https://custom-endpoint.com/v1/rumreplay',
// Privacy & Security
maskAllInputs: true,
maskAllText: false,
sensitivityRules: [
{ rule: 'exclude', selector: '.payment-form' },
{ rule: 'mask', selector: '.sensitive-data' },
{ rule: 'unmask', selector: '.public-info' },
],
// Feature Control
features: {
canvas: false, // Skip canvas recording for privacy
iframes: false, // Skip iframe content
video: false, // Skip video elements
cacheAssets: true, // Cache assets for better replay
packAssets: {
// Optimize asset packing
fonts: true,
styles: true,
images: {
onlyViewportImages: true,
pack: true,
quality: 0.7,
},
},
},
// Performance
maxExportIntervalMs: 5000, // Export data every 5 seconds
logLevel: 'warn', // Log warnings and errors only
// Advanced
debug: false, // Disable debug logging
persistFailedReplayData: true, // Store failed uploads for retry
})
For troubleshooting issues with the Splunk Session Recorder, see Troubleshoot browser instrumentation for Splunk Observability Cloud in the official documentation.
| Method | Parameters | Returns | Description |
|---|---|---|---|
init(config) | SessionRecorderConfig | void | Initialize session recorder |
start() | - | void | Start recording current session |
stop() | - | void | Stop recording current session |
interface SessionRecorderConfig {
// Required
realm: string
rumAccessToken: string
// Privacy
maskAllInputs?: boolean
maskAllText?: boolean
sensitivityRules?: SensitivityRule[]
// Feature Control
features?: {
canvas?: boolean
iframes?: boolean
video?: boolean
cacheAssets?: boolean
packAssets?: boolean | PackAssetsConfig
}
// Performance
maxExportIntervalMs?: number
logLevel?: 'debug' | 'info' | 'warn' | 'error'
// Advanced
debug?: boolean
beaconEndpoint?: string
persistFailedReplayData?: boolean
}
interface SensitivityRule {
rule: 'mask' | 'unmask' | 'exclude'
selector: string
}
interface UserInfo {
id?: string
email?: string
attributes?: Record<string, string>
}
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.
FAQs
Session recorder for Splunk Observability
The npm package @splunk/otel-web-session-recorder receives a total of 3,145 weekly downloads. As such, @splunk/otel-web-session-recorder popularity was classified as popular.
We found that @splunk/otel-web-session-recorder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 14 open source maintainers collaborating on the project.
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.
Research
/Security News
A malicious Chrome extension posing as an Ethereum wallet steals seed phrases by encoding them into Sui transactions, enabling full wallet takeover.
Security News
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
Security News
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.