RUM SDK Integration Guide

Integration Methods

Here we provide three integration methods, you can choose the most suitable approach based on your project requirements:

NPM

This method is recommended for modern web applications. The RUM SDK is bundled with the rest of your frontend JavaScript code. It has no impact on page load performance. However, the SDK might miss errors, resources, and user actions triggered before the SDK initialization.

CDN async

This method is recommended for web applications with performance goals. The RUM browser SDK is loaded asynchronously from our CDN, ensuring the SDK download doesn't impact page load performance. However, the SDK might miss errors, resources, and user actions triggered before the SDK initialization.

CDN sync

This method is recommended to collect all RUM events. The RUM browser SDK is loaded synchronously from our CDN, ensuring the SDK loads first and collects all errors, resources, and user actions. This method might impact page load performance.

NPM Package Integration

Add @flashcatcloud/browser-rum to your package.json file

Then initialize in your application entry file:

CDN Asynchronous Integration

Add the following code snippet to the head tag of each HTML page you want to monitor.

CDN Synchronous Integration

Add the following code snippet to the beginning of the head tag in each HTML page you want to monitor (before any other script tags).

You can check for loading issues with window.FC_RUM if the RUM browser SDK fails to load.

Initialization Parameters

Configuration	Type	Required	Description
applicationId	String	Yes	Application ID, obtained from the application management page
clientToken	String	Yes	Client Token, obtained from the application management page
service	String	Yes	Service name, used to distinguish different services
env	String	No	Environment identifier, such as production, staging, etc.
version	String	No	Application version
trackingConsent	"granted" \| "not-granted"	No	Set initial user tracking consent status. See user tracking consent. Default: `granted`
trackViewsManually	Boolean	No	Allows you to control RUM view creation. See override default RUM view names. Default: `false`
trackUserInteractions	Boolean	No	Enable automatic collection of user actions. Default: `true`
trackResources	Boolean	No	Enable collection of resource events. Default: `true`
trackLongTasks	Boolean	No	Enable collection of long task events. Default: `true`
trackAnonymousUser	Boolean	No	Enable cross-session collection of anonymous user IDs. Default: `true`
enablePrivacyForActionName	Boolean	No	See mask action names. Default: `false`
actionNameAttribute	String	No	Specify your own attribute to use for naming actions. Default: `false`
sessionSampleRate	Number	No	Percentage of sessions to track: 100 for all, 0 for none. Only tracked sessions send RUM events. Default: `100`
silentMultipleInit	Boolean	No	If the RUM browser SDK is already initialized on the page, initialization will silently fail. Default: `false`
proxy	String	No	Optional proxy URL, for example: `https://www.proxy.com/path`
allowedTracingUrls	Array	No	List of request URLs for injecting tracing headers. For more information, see Connect RUM and Traces
traceSampleRate	Number	No	Percentage of requests to trace: 100 for all, 0 for none. Default: `100`
excludedActivityUrls	Array	No	List of request origins to ignore when calculating page activity
compressIntakeRequests	Boolean	No	Compress requests sent to the FlashDuty intake to reduce bandwidth usage when sending large amounts of data. Compression is done in a Worker thread. Default: `false`
storeContextsAcrossPages	Boolean	No	Store global context and user context in localStorage to preserve them across user navigation. Default: `false`
allowUntrustedEvents	Boolean	No	Allow capturing [untrusted events][https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted], for example in automated UI tests. Default: `false`

Use Cases

Custom User Identification

Use flashcatRum.setUser(<USER_CONFIG_OBJECT>) to add identifying attributes (such as ID, name, email) for the current user

Adding Custom Tags

After initializing RUM, use the setGlobalContextProperty API to add additional tags to all RUM events collected from your application

Sending Custom Actions

Use the addAction API to create RUM actions. Name your action and attach context properties in the form of a JavaScript object.

The following example creates a checkout action with details about the user's cart when they click the checkout button.

Custom Error Addition

You can attach a dd_context property directly to error instances, and the RUM SDK will automatically detect this property and merge it into the final error event context.

Validation

After integration, you can validate whether the integration was successful through the following steps:

Open browser developer tools and check if there are data reporting requests to https://browser.flashcat.cloud/api/v2/rum in the Network panel

Visit the Flashduty console to check if RUM application data is displayed normally

Trigger some user interactions to verify if data collection is working properly

SDK Integration

Integration Methods#

NPM Package Integration#

CDN Asynchronous Integration#

CDN Synchronous Integration#

Initialization Parameters#

Use Cases#

Custom User Identification#

Adding Custom Tags#

Sending Custom Actions#

Custom Error Addition#

Validation#

Further Reading#