Browser RUM Integration

npm install @kubesense/kubesense-browser-rum
# or
yarn add @kubesense/kubesense-browser-rum

npm install @kubesense/kubesense-browser-rum-slim
# or
yarn add @kubesense/kubesense-browser-rum-slim

<script>
  (function(h,o,u,n,d){h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
  d=o.createElement(u);d.async=1;d.src=n
  n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','<CDN_URL>/kubesense-rum.js','KUBESENSE_SDK')
</script>

import { kubesenseSdk } from '@kubesense/kubesense-browser-rum'

kubesenseSdk.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  clientToken: '<YOUR_CLIENT_TOKEN>',
  site: 'app.kubesense.ai',
  service: 'my-web-app',
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  firstPartyDomains: [
    "api.kubesense.ai",                   // exact hostname
    /\.kubesense\.ai/,                    // all subdomains via regex
    (host) => host.endsWith(".internal"), // custom function
  ],
})

window.KUBESENSE_SDK.onReady(function() {
  window.KUBESENSE_SDK.init({
    applicationId: '<YOUR_APPLICATION_ID>',
    clientToken: '<YOUR_CLIENT_TOKEN>',
    site: 'app.kubesense.ai',
    service: 'my-web-app',
    env: 'production',
    version: '1.0.0',
    sessionSampleRate: 100,
    trackUserInteractions: true,
    trackResources: true,
    trackLongTasks: true,
    firstPartyDomains: [
      "api.kubesense.ai",
      /\.kubesense\.ai/,
      (host) => host.endsWith(".internal"),
    ],
  })
})

import { kubesenseSdk } from '@kubesense/kubesense-browser-rum'

kubesenseSdk.init({
  applicationId: '<YOUR_APPLICATION_ID>',
  clientToken: '<YOUR_CLIENT_TOKEN>',
  site: 'app.kubesense.ai',
  service: 'my-react-app',
  env: process.env.NODE_ENV,
  version: process.env.REACT_APP_VERSION,
  sessionSampleRate: 100,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  firstPartyDomains: [
    "api.kubesense.ai",
    /\.kubesense\.ai/,
    (host) => host.endsWith(".internal"),
  ],
})

function App() { /* ... */ }
export default App

<!-- Force mask a specific element even when the global level is 'allow' -->
<div data-ks-privacy="mask">Card number: 4111 1111 1111 1111</div>

<!-- Allow a specific element even when the global level is 'mask' -->
<h1 data-ks-privacy="allow">Welcome to the Dashboard</h1>

<!-- Mask only user input within this container -->
<form data-ks-privacy="mask-user-input">
  <input type="text" placeholder="Name" />
</form>

kubesenseSdk.init({
  // ...
  firstPartyDomains: [
    'api.myapp.com',                        // exact hostname
    /\.myapp\.com$/,                        // all subdomains of myapp.com
    (host) => host.endsWith('.internal'),   // function — matches *.internal
  ],
})

kubesenseSdk.init({
  // ...
  beforeSend: (event) => {
    if (event.type === 'error' && event.error.message.includes('health-check')) {
      return false // drop this event
    }
    return true
  },
})

kubesenseSdk.init({
  // ...
  beforeSend: (event) => {
    if (event.type === 'resource' && event.resource.url.includes('/api/graphql')) {
      event.context.graphql_operation = getGraphQlOperation(event.resource.url)
    }
    return true
  },
})

// React Router example
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { kubesenseSdk } from '@kubesense/kubesense-browser-rum'

function RouteTracker() {
  const location = useLocation()

  useEffect(() => {
    kubesenseSdk.startView({ name: location.pathname })
  }, [location])

  return null
}

// Vue Router example
router.afterEach((to) => {
  kubesenseSdk.startView({ name: to.name ?? to.path })
})

// Start a new view with a name
kubesenseSdk.startView('checkout')

// Start with full options (name, service, version)
kubesenseSdk.startView({ name: 'checkout', service: 'payments', version: '2.1.0' })

// Change the name of the current view after it started
kubesenseSdk.setViewName('checkout-confirmation')

// Attach context to the current view only
kubesenseSdk.setViewContext({ cart_id: 'abc123', item_count: 3 })
kubesenseSdk.setViewContextProperty('experiment_variant', 'B')

// Read current view context
const ctx = kubesenseSdk.getViewContext()

// Set user (id is required)
kubesenseSdk.setUser({
  id: 'usr-1234',
  name: 'Jane Smith',
  email: 'jane@example.com',
  // Any custom properties:
  plan: 'enterprise',
  role: 'admin',
})

// Update a single property
kubesenseSdk.setUserProperty('plan', 'pro')

// Read current user
const user = kubesenseSdk.getUser()

// Remove a property
kubesenseSdk.removeUserProperty('role')

// Clear on logout
kubesenseSdk.clearUser()

kubesenseSdk.setAccount({
  id: 'acct-5678',
  name: 'Acme Corp',
  plan: 'enterprise',
})

// Update a single property
kubesenseSdk.setAccountProperty('plan', 'enterprise-plus')

// Read current account
const account = kubesenseSdk.getAccount()

// Remove a property
kubesenseSdk.removeAccountProperty('plan')

// Clear
kubesenseSdk.clearAccount()

try {
  processPayment(order)
} catch (error) {
  kubesenseSdk.addError(error, {
    order_id: order.id,
    amount: order.total,
  })
}

// Report a plain string
kubesenseSdk.addError('Payment failed: insufficient funds', {
  user_id: currentUser.id,
})

import { Component } from 'react'
import { kubesenseSdk } from '@kubesense/kubesense-browser-rum'

class ErrorBoundary extends Component {
  componentDidCatch(error: Error, info: React.ErrorInfo) {
    kubesenseSdk.addError(error, {
      component_stack: info.componentStack,
    })
  }

  render() {
    return this.props.children
  }
}

// Track a programmatic or non-click action
kubesenseSdk.addAction('export_csv', {
  row_count: 1500,
  format: 'csv',
})

kubesenseSdk.addAction('search', {
  query: searchTerm,
  results_count: results.length,
})

<!-- Using default attribute (data-action-name) -->
<button data-action-name="Add to cart">+</button>

<!-- Using a custom attribute configured at init -->
<!-- kubesenseSdk.init({ actionNameAttribute: 'data-rum-action' }) -->
<button data-rum-action="checkout">Buy Now</button>

kubesenseSdk.init({
  trackResources: true,  // default: true
  trackLongTasks: true,  // default: true
})

kubesenseSdk.init({
  trackResources: false,
  trackLongTasks: false,
})

// After data is fetched and rendered
kubesenseSdk.addTiming('data_ready')

// Pass an explicit timestamp (ms since page load)
kubesenseSdk.addTiming('hero_image_loaded', performance.now())

// Option 1: start / stop
const ref = kubesenseSdk.startDurationVital('checkout_flow')
// ... user completes checkout ...
kubesenseSdk.stopDurationVital(ref, {
  context: { steps_completed: 4 },
})

// Option 2: start by name and stop by name
kubesenseSdk.startDurationVital('report_generation')
generateReport().then(() => {
  kubesenseSdk.stopDurationVital('report_generation')
})

// Option 3: add a completed vital with known start/duration
kubesenseSdk.addDurationVital('pdf_render', {
  startTime: renderStartTime,
  duration: renderDuration,
  context: { page_count: 12 },
})

// Start tracking a named operation
kubesenseSdk.startFeatureOperation('onboarding', {
  context: { step: 'profile_setup' },
})

// Mark succeeded
kubesenseSdk.succeedFeatureOperation('onboarding', {
  context: { steps_completed: 3 },
})

// Mark failed with a reason
kubesenseSdk.failFeatureOperation('onboarding', 'profile_incomplete', {
  context: { missing_fields: ['phone'] },
})

// Set at startup
kubesenseSdk.setGlobalContext({
  deployment_region: 'us-east-1',
  feature_set: 'beta',
})

// Add or update a single property at any time
kubesenseSdk.setGlobalContextProperty('ab_test_group', 'variant_B')

// Read current context
const ctx = kubesenseSdk.getGlobalContext()

// Remove one property
kubesenseSdk.removeGlobalContextProperty('feature_set')

// Clear everything
kubesenseSdk.clearGlobalContext()

kubesenseSdk.init({
  // ...
  sessionReplaySampleRate: 20, // record 20% of sessions
})

kubesenseSdk.init({
  // ...
  sessionReplaySampleRate: 100,
  startSessionReplayRecordingManually: true, // don't start automatically
})

// Start recording only for important flows (e.g. after login)
function onUserLoggedIn() {
  kubesenseSdk.startSessionReplayRecording()
}

// Stop recording when leaving a sensitive screen
function onEnterPaymentPage() {
  kubesenseSdk.stopSessionReplayRecording()
}

kubesenseSdk.init({
  defaultPrivacyLevel: 'mask-user-input', // 'mask' | 'mask-user-input' | 'allow'
})

<!-- Force masking an element -->
<div data-ks-privacy="mask">Sensitive data</div>

<!-- Allow a specific element in a masked view -->
<p data-ks-privacy="allow">Public content</p>

const replayUrl = kubesenseSdk.getSessionReplayLink()
// Share or store this URL to view the recording later

kubesenseSdk.init({
  // ...
  allowedTracingUrls: [
    'https://api.example.com',               // exact origin
    /https:\/\/.*\.example\.com/,            // regex
    (url) => url.startsWith('https://api.'), // function
  ],
  traceSampleRate: 100, // trace 100% of allowed requests
})

kubesenseSdk.init({
  allowedTracingUrls: [
    {
      match: 'https://api.example.com',
      propagatorTypes: ['tracecontext', 'kubesense'], // W3C + Kubesense headers
    },
  ],
})

kubesenseSdk.init({
  propagateTraceBaggage: true, // includes user.id and account.id in the baggage header
})

kubesenseSdk.init({
  // ...
  trackingConsent: 'not-granted', // start with no collection
})

// After user accepts your consent banner:
kubesenseSdk.setTrackingConsent('granted')

// If user withdraws consent:
kubesenseSdk.setTrackingConsent('not-granted')

kubesenseSdk.stopSession()
// No new events collected until next page load or user activity

// After evaluating a flag
const flagValue = featureFlags.get('new_checkout')
kubesenseSdk.addFeatureFlagEvaluation('new_checkout', flagValue)

kubesenseSdk.init({
  trackFeatureFlagsForEvents: ['action', 'vital', 'long_task', 'resource'],
})

kubesenseSdk.init({
  allowedGraphQlUrls: [
    {
      match: 'https://api.example.com/graphql',
      trackPayload: false,       // don't capture request body
      trackResponseErrors: true, // capture GraphQL errors in response
    },
  ],
})

import type {
  RumInitConfiguration,
  RumEvent,
  RumEventDomainContext,
} from '@kubesense/kubesense-browser-rum'

const config: RumInitConfiguration = {
  applicationId: '<YOUR_APPLICATION_ID>',
  clientToken: '<YOUR_CLIENT_TOKEN>',
  service: 'my-app',
  env: 'production',
  beforeSend: (event: RumEvent, context: RumEventDomainContext): boolean => {
    // type-safe access to event fields
    return true
  },
}

// Initialization
kubesenseSdk.init({ applicationId, clientToken, /* ... */ })

// Views
kubesenseSdk.startView(name)
kubesenseSdk.setViewName(name)
kubesenseSdk.setViewContext(context)
kubesenseSdk.setViewContextProperty(key, value)

// User & Account
kubesenseSdk.setUser({ id, name, email, /* ...custom */ })
kubesenseSdk.clearUser()
kubesenseSdk.setAccount({ id, name, /* ...custom */ })
kubesenseSdk.clearAccount()

// Global Context
kubesenseSdk.setGlobalContext(context)
kubesenseSdk.setGlobalContextProperty(key, value)
kubesenseSdk.clearGlobalContext()

// Errors & Actions
kubesenseSdk.addError(error, context)
kubesenseSdk.addAction(name, context)

// Timings & Vitals
kubesenseSdk.addTiming(name)
kubesenseSdk.startDurationVital(name)
kubesenseSdk.stopDurationVital(nameOrRef)

// Session Replay
kubesenseSdk.startSessionReplayRecording()
kubesenseSdk.stopSessionReplayRecording()
kubesenseSdk.getSessionReplayLink()

// Consent
kubesenseSdk.setTrackingConsent('granted' | 'not-granted')
kubesenseSdk.stopSession()