Web Application Integration¶

Collect metrics data from web applications and analyze application performance through visualization.

Prerequisites (DataKit Integration)¶

Install DataKit.
Configure the RUM Collector.
Configure DataKit to be publicly accessible and install the IP Geolocation Database.

Start Integration¶

Navigate to RUM > Create > Web.
Enter the application name.
Enter the application ID.
Select the application integration method:
Public DataWay: Directly receives RUM data without installing the DataKit collector.
Local Environment Deployment: Receives RUM data after meeting the prerequisites.

Integration Methods¶

DataKit IntegrationPublic OpenWay

Ensure DataKit is installed and configured to be publicly accessible with the IP Geolocation Database installed.
Obtain parameters like applicationId, env, version from the console and start integrating the application.
When integrating the SDK, set datakitOrigin to the domain name or IP of DataKit.

Obtain parameters like applicationId, clientToken, and site from the console and start integrating the application.
No need to configure datakitOrigin when integrating the SDK; data will be sent to the public DataWay by default.

SDK Configuration¶

Integration Method	Description
NPM	Bundles the SDK code into the frontend project, ensuring frontend performance is unaffected. May miss requests and error collection before SDK initialization.
CDN Asynchronous Loading	Asynchronously introduces the SDK script via CDN, not affecting page loading performance. May miss requests and error collection before initialization.
CDN Synchronous Loading	Synchronously introduces the SDK script via CDN, enabling complete collection of all errors and performance metrics. However, it may affect page loading performance.

NPM Integration¶

Install and import the SDK in your frontend project:

npm install @cloudcare/browser-rum

Initialize the SDK in your project:

import { datafluxRum } from "@cloudcare/browser-rum"
datafluxRum.init({
  applicationId: "<Application ID>",
  site: "http://172.16.212.186:9529",
  clientToken: "a993f53a8ea04bc6b9350e5e670a3a3b",
  env: "production",
  version: "1.0.0",
  service: "browser",
  sessionSampleRate: 100,
  sessionReplaySampleRate: 70,
  compressIntakeRequests: true,
  trackInteractions: true,
  traceType: "ddtrace", // Optional, defaults to ddtrace. Currently supports 6 types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent
  allowedTracingOrigins: ["https://api.example.com", /https:\/\/.*\.my-api-domain\.com/], // Optional, list of all request origins allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
})
datafluxRum.startSessionReplayRecording()

CDN Synchronous Loading¶

Add the script to your HTML file:

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: "<Application ID>",
      site: "http://172.16.212.186:9529",
      clientToken: "a993f53a8ea04bc6b9350e5e670a3a3b",
      env: "production",
      version: "1.0.0",
      service: "browser",
      sessionSampleRate: 100,
      sessionReplaySampleRate: 70,
      compressIntakeRequests: true,
      trackInteractions: true,
      traceType: "ddtrace", // Optional, defaults to ddtrace. Currently supports 6 types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent
      allowedTracingOrigins: ["https://api.example.com", /https:\/\/.*\.my-api-domain\.com/], // Optional, list of all request origins allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
    })
  window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
</script>

CDN Asynchronous Loading¶

Add the script to your HTML file:

<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.guance.com/browser-sdk/v3/dataflux-rum.js",
    "DATAFLUX_RUM"
  )
  DATAFLUX_RUM.onReady(function () {
    DATAFLUX_RUM.init({
      applicationId: "<Application ID>",
      site: "http://172.16.212.186:9529",
      clientToken: "a993f53a8ea04bc6b9350e5e670a3a3b",
      env: "production",
      version: "1.0.0",
      service: "browser",
      sessionSampleRate: 100,
      sessionReplaySampleRate: 70,
      compressIntakeRequests: true,
      trackInteractions: true,
      traceType: "ddtrace", // Optional, defaults to ddtrace. Currently supports 6 types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent
      allowedTracingOrigins: ["https://api.example.com", /https:\/\/.*\.my-api-domain\.com/], // Optional, list of all request origins allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
    })
    window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
  })
</script>

Parameter Configuration¶

Initialization Parameters¶

| Parameter |

Type

|

Required

|

Default