# RUM Setup for Web The Kloudfuse RUM SDK is available as a package for Web; include the Kloudfuse RUM SDK dependency in your application. ## Install To begin instrumenting your frontend application, include the Kloudfuse RUM SDK dependency in your application: - npm - Script tag ```console npm install --save kf-browser-sdk ``` Add the following ` ``` ## Configure You must initialize the SDK to begin gathering frontend telemetry. Make this happen as early as possible in your application's loading phase. Customize and include the following code snippet: - npm - Script tag ```javascript import kfuseRumSDK from 'kf-browser-sdk'; kfuseRumSDK.init({ config: { applicationId: '', clientToken: '', proxy: '', service: '', env: 'production', version: '1.0.0', sessionSampleRate: 100, defaultPrivacyLevel: 'mask', 'mask-user-input' | 'allow' enableSessionRecording: true, enableLogCollection: true, }, }); ``` ```html ``` The possible configuration options are: | | | | --- | --- | | | After adding new application to RUM, copy the **Integration Code**, and use it to specify the `appId`, `clientToken`, and `service`. See [RUM Add New Application](https://docs.kloudfuse.com/platform/3.5.0/rum-add-application/). | **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. See our _Enable Authenticated Ingestion_ documentation for [AWS S3](https://docs.kloudfuse.com/platform/3.5.0/rum-enable-aws-s3/#step5), [Azure Blob](https://docs.kloudfuse.com/platform/3.5.0/rum-enable-azure-blob/#step5), or [Google GCS](https://docs.kloudfuse.com/platform/3.5.0/rum-enable-google-gcs/#step5). **proxy** The Kloudfuse ingest endpoint for RUM events; its value would be `https:///ddrumproxy`. | | | | --- | --- | | | Your frontend application **_must not_** restrict `POST` requests to this endpoint. Specifically, when using a `Content-Security-Policy`, your frontend application **_must allow_** requests to this endpoint. | **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`: Masks all HTML text, user input, images, links and data-* attributes. Text on your application is replaced with X, rendering the page into a wireframe. - `mask-user-input`: Masks most form fields: inputs, text areas, and checkbox values, while recording all other text "as is". Inputs are replaced using three asterisks, and text areas are obfuscated using space-preserving x characters. - `allow`: Records everything unmasked. **enableSessionRecording** Controls whether Kloudfuse records the user’s session. **enableLogCollection** Controls whether Kloudfuse collects frontend logs. ### 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. To do this, add the following code snippet: ```javascript 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: ```console npm install kf-cli ``` ### Configure Environment Set your Kloudfuse API key as an environment variable: ```console export KF_API_KEY= ``` ### Usage Upload source maps using the `kf-cli sourcemaps upload` command: ```console kf-cli sourcemaps upload --baseUrl --service --release-version --minified-path-prefix ``` #### Options `` Path to the directory containing your JavaScript source maps (.js.map files). `--baseUrl ` Kloudfuse cluster base URL. `--service ` Name of your frontend service (this should match the service parameter in your kfuse browser SDK initialization call). `--release-version ` Version/release identifier for your application build. `--minified-path-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: ```console kf-cli sourcemaps upload \ ./dist \ --service example-app \ --minified-path-prefix /assets \ --release-version 1.2.3 ``` This will upload all sourcemap files found in the dist folder and set up the source mapping such that a RUM error event with the attributes `service=example-app` and `version=1.2.3` that has stack frames with a minified js bundle URL such as `https://example.com/assets/a.js` will reference the sourcemap available at `./dist/a.js.map`.