RUM Setup for Web :: Kloudfuse Docs

RUM Setup for Web

Browser support

The Kloudfuse RUM SDK targets ES2018. Internet Explorer and other browsers that do not support ES2018 are not supported.

Install

To begin instrumenting your frontend application, include the Kloudfuse RUM SDK dependency in your application:

npm install --save kf-browser-sdk

Add the following <script> tag to the <head> of your HTML page. This exposes the SDK as a global variable KfBrowserSdk:

<script src="https://cdn.kloudfuse.net/browser-sdk/kf-browser-sdk-v2.0.0.min.js"></script>

Configure

You must initialize the SDK to begin gathering frontend telemetry. Make this happen as early as possible in your applications loading phase. Customize and include the following code snippet:

import kfuseRumSDK from 'kf-browser-sdk';

kfuseRumSDK.init({
  config: {
    applicationId: '<APPLICATION_ID>',
    clientToken: '<CLIENT_TOKEN>',
    proxy: '<KFUSE_RUM_ENDPOINT>',
    service: '<APPLICATION_NAME>',
    env: 'production',
    version: '1.0.0',
    sessionSampleRate: 100,
    defaultPrivacyLevel: 'mask-user-input',
    enableSessionRecording: true,
    enableLogCollection: true,
  },
});

<script>
  KfBrowserSdk.init({
    config: {
      applicationId: '<APPLICATION_ID>',
      clientToken: '<CLIENT_TOKEN>',
      proxy: '<KFUSE_RUM_ENDPOINT>',
      service: '<APPLICATION_NAME>',
      env: 'production',
      version: '1.0.0',
      sessionSampleRate: 100,
      defaultPrivacyLevel: 'mask-user-input',
      enableSessionRecording: true,
      enableLogCollection: true,
    },
  });
</script>

The possible configuration options are:

applicationId

A UUID that uniquely identifies a specific frontend application. All RUM telemetry will be associated with it.

clientToken

A token that identifies valid producers of RUM telemetry. You may supply the value dummy if authenticated ingestion is not enabled during Kloudfuse install. When authenticated ingestion is enabled, this value must match one of the configured authentication tokens for RUM.

proxy

The Kloudfuse ingest endpoint for RUM events; its value would be https://<kfuse-public-endpoint>/ddrumproxy.

service

A "friendly" name, unique to the instrumented frontend application.

env

The name that identifies a logical source of RUM events. For example, the test environment or production environment.

version

The string that represents the unique frontend application build, such as 1.0.0.

sessionSampleRate

The percentage of user sessions that generate RUM telemetry; valid range is 0 to 100.

defaultPrivacyLevel

Privacy level for session replays. Can be one of the following three values:

mask
mask-user-input
allow

Associate User Information

As soon as your application has access to user information, you can provide that information to the SDK and enrich all generated telemetry.

kfuseRumSDK.setUser({
  id: "joebarra",
  email: "joe.barra@kloudfuse.com",
})

Upload Source Maps

Source maps help unmangle minified JavaScript files in error stack traces, making debugging easier. Use the Kloudfuse CLI tool to upload source maps for your web application.

Install KF CLI

Install the Kloudfuse CLI tool:

npm install kf-cli

Configure Environment

Set your Kloudfuse API key as an environment variable:

export KF_API_KEY=<a valid kloudfuse RUM application client token>

Usage

Upload source maps using the kf-cli sourcemaps upload command:

kf-cli sourcemaps upload <directory> --baseUrl <base-url> --service <service-name> --release-version <version> --minified-path-prefix <url-prefix>

Options

<directory>: Path to the directory containing your JavaScript source maps (.js.map files).

--baseUrl <url>: Kloudfuse cluster base URL.

--service <service-name>: Name of your frontend service (this should match the service parameter in your kfuse browser SDK initialization call).

--release-version <version>: Version/release identifier for your application build.

--minified-path-prefix <url-prefix>: URL prefix where your minified JavaScript files are served (e.g., https://example.com/static/js or /static/js).

Example

Upload all source maps in the current directory:

kf-cli sourcemaps upload \
  ./dist \
  --service example-app \
  --minified-path-prefix /assets \
  --release-version 1.2.3