Skip to content

JavaScript

JavaScript belongs to the RUM (Real User Monitoring) category, mainly used to monitor browser user behavior and report it to TrueWatch.

Configuration

Enable RUM Collector in DataKit

Enable RUM Collector

Web Application Integration

There are three ways to integrate web applications: NPM integration, synchronous loading, and asynchronous loading.

Integration Method Description
NPM By bundling the SDK code with your front-end project, this method ensures no impact on front-end page performance, but may miss requests and errors before SDK initialization.
CDN Asynchronous Loading By using CDN acceleration caching, the SDK script is introduced asynchronously, ensuring that the SDK script download does not affect page loading performance, but may miss requests and errors before SDK initialization.
CDN Synchronous Loading By using CDN acceleration caching, the SDK script is introduced synchronously, ensuring that all errors, resources, requests, and performance metrics are collected, but may affect page loading performance. 
import { datafluxRum } from '@cloudcare/browser-rum'

datafluxRum.init({
  applicationId: 'demo-app',
  datakitOrigin: '<DATAKIT ORIGIN>', // Protocol (including ://), domain (or IP address) [and port number]
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 70,
  trackInteractions: true,
  traceType: 'ddtrace', // Optional, default is ddtrace, currently supports ddtrace, zipkin, skywalking_v-jaeger, zipkin_single_header, w3c_traceparent 6 types
  allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject trace collector required headers. Can be request origin or regex
})

<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',
    'https://static.truewatch.com/browser-sdk/v3/dataflux-rum.js',
    'DATAFLUX_RUM'
  )
  DATAFLUX_RUM.onReady(function () {
    DATAFLUX_RUM.init({
      applicationId: 'demo-app',
      datakitOrigin: '<DATAKIT ORIGIN>', // Protocol (including ://), domain (or IP address) [and port number]
      env: 'production',
      version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 70,
      trackInteractions: true,
      traceType: 'ddtrace', // Optional, default is ddtrace, currently supports ddtrace, zipkin, skywalking_v-jaeger, zipkin_single_header, w3c_traceparent 6 types
      allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject trace collector required headers. Can be request origin or regex
    })
  })
</script>

<script src="https://static.truewatch.com/browser-sdk/v3/dataflux-rum.js" type="text/javascript"></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: 'demo-app',
      datakitOrigin: '<DATAKIT ORIGIN>', // Protocol (including ://), domain (or IP address) [and port number]
      env: 'production',
      version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 70,
      trackInteractions: true,
      traceType: 'ddtrace', // Optional, default is ddtrace, currently supports ddtrace, zipkin, skywalking_v-jaeger, zipkin_single_header, w3c_traceparent 6 types
      allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject trace collector required headers. Can be request origin or regex
    })
</script>

Parameter Configuration

JavaScript provides many parameters to achieve personalized configuration for web monitoring.