---
title: Browser SDK
description: 'Reference for the Coralogix Browser RUM SDK: configuration options, sampling, before-send and transport, and the features it instruments. Applies to every browser install path - CDN, NPM, Next.js and SvelteKit.'
url: https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/
product: rum
feature: Browser SDK
feature_id: browser-sdk
feature_identifier: rum/browser-sdk
last_updated: '2026-08-12'
---
**Table of Contents**
1. [Official Coralogix SDK for Browsers](#official-coralogix-sdk-for-browsers)
2. [Links](#links)
3. [Supported Frameworks](#supported-frameworks)
4. [Usage](#usage)
5. [Sampling](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/sampling.md#sampling)
* [Basic Sampling](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/sampling.md#1-basic-sampling---sample--of-all-sessions)
* [Advanced Sampling](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/sampling.md#2-advanced-sampling---sample--of-sessions-but-always-track-sessions-with-errors)
* [Exclude Specific Instrumentations from Sampling](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/sampling.md#3-exclude-specific-instrumentations-from-sampling)
* [Only Sessions with Errors](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/sampling.md#4-only-sessions-with-errors)
6. [Sending Custom Logs](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/logs-and-errors.md#sending-custom-logs)
7. [Instrumentations](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/logs-and-errors.md#instrumentations)
8. [Manually Capture Errors](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/logs-and-errors.md#manually-capture-errors)
9. [Session Recording](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/session-recording.md#session-recording)
* [Recording Manually](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/session-recording.md#recording-manually)
* [Privacy & Security](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/session-recording.md#privacy--security)
* [Worker URL](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/session-recording.md#worker-url)
* [Screenshots](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/session-recording.md#screenshots)
10. [Manually Create a New Session](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#manually-create-a-new-session)
11. [Unique Users](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#unique-users)
12. [Network Extra Configuration](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#network-extra-configuration)
13. [Multi Page Application](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#multi-page-application)
14. [Ignore Errors](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#ignore-errors)
15. [Ignore URLs](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#ignore-urls)
16. [Stack Trace Limit](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#stack-trace-limit)
17. [Mask Elements](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#mask-elements)
18. [Custom Action Names](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#custom-action-names)
19. [Label Providers](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#label-providers)
20. [URL Blueprinters](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#url-blueprinters)
21. [Traces](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#traces)
* [Propagate Trace Header for CORS URLs](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#propagatetraceheadercorsurls)
* [Allowed Tracing URLs](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#allowedtracingurls)
* [Extra Propagators (B3 / AWS X-Ray)](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#b3--aws-x-ray-propagation)
* [Custom Propagation](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md#custom-propagation)
* [Traces Exporter](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/traces-exporter.md#traces-exporter)
22. [Before Send](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md#before-send)
23. [Proxy URL](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md#proxy-url)
* [ignoreProxyUrlParams](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md#ignoreproxyurlparams)
24. [Ingress URL](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md#ingress-url)
25. [Collect IP Data](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md#collect-ip-data)
26. [SDK Fetch Priority](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md#sdk-fetch-priority)
27. [Custom Measurement](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/timing-and-measurements.md#custom-measurement)
28. [Add Timing](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/timing-and-measurements.md#add-timing)
29. [Custom Time Measurement](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/timing-and-measurements.md#custom-time-measurement)
30. [Microfrontend Support](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/microfrontend.md#microfrontend-support)
* [Prerequisites](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/microfrontend.md#prerequisites)
31. [Custom Spans](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/custom-spans.md#custom-spans)
* [Ignored Instruments](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/custom-spans.md#ignored-instruments)
32. [OpenTelemetry Batch Configuration](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/opentelemetry-batching.md#opentelemetry-batch-configuration)
33. [Soft Navigations (Experimental)](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/soft-navigations.md#soft-navigations--experimental)
34. [Memory Usage (Experimental)](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/memory-usage.md#memory-usage---experimental)
35. [Web Worker Support](#web-worker-support)
* [Enabling Web Worker Support](#enabling-web-worker-support)
* [Examples](#examples)
36. [Angular Zone.js Configuration](#angular-zonejs-configuration)
37. [CDN](#cdn)
* [Specific Version](#specific-version-recommended)
* [ES5](#es5)
* [Add the CDN Script to Your Application](#add-the-cdn-script-to-your-application)
* [Initialization](#initialization)
* [Via JS File](#via-js-file)
* [Via TS File](#via-ts-file)
38. [Flutter Web](#flutter-web)
# Official Coralogix SDK for browsers
[](https://www.npmjs.com/package/@coralogix/browser)
## Links
* [Changelog](https://coralogix.github.io/coralogix-browser-sdk/CHANGELOG.html)
* [Coralogix Real User Monitoring](https://coralogix.com/docs/user-guides/rum/getting-started/real-user-monitoring.md)
## Supported frameworks
JavaScript / TypeScript Frameworks: React, Angular, Vue, NextJS and more.
Flutter (Currently only web).
### JavaScript language level
Version 4.0.0 and later publish the npm package as **ES2022**. Versions up to 3.24.0 published ES5.
If you support browsers older than ES2022, transpile the package as part of your own build, or load the [ES5](#es5) CDN bundle instead.
## Usage
To use Coralogix SDK for Browsers, call `CoralogixRum.init(options)` at the soonest available moment after the page load. This will initialize the SDK based on the options you provided.
```
import { CoralogixRum } from '@coralogix/browser';
CoralogixRum.init({
application: 'app-name',
environment: 'production',
public_key: 'abc-123-456',
coralogixDomain: 'EU2',
version: 'v1.0.3',
labels: {
payment: 'visa',
},
sessionConfig: {
sessionSampleRate: 100, // Percentage of overall sessions being tracked, defaults to 100%
},
});
```
To provide contextual information or transmit manual logs, utilize the exported functions of `CoralogixRum`. Keep in mind that these functions will remain inactive until you've invoked `CoralogixRum.init()`.
```
import { CoralogixRum } from '@coralogix/browser';
// Update user context dynamically
CoralogixRum.setUserContext({
user_id: '123',
user_name: 'name',
user_email: 'user@email.com',
user_metadata: {
role: 'admin',
// ...
},
});
// Update custom labels dynamically
CoralogixRum.setLabels({
...CoralogixRum.getLabels(),
paymentMethod: 'visa',
userTheme: 'dark',
// ...
});
// Update application context dynamically
CoralogixRum.setApplicationContext({
application: 'app-name',
version: '1.0.0',
});
```
## Web worker support
Web Worker support enables the capture of events originating from Web Workers, including unhandled errors, custom logs, and other functionalities provided by the SDK.
> By default, Web Worker support is **disabled**.
### Enabling web worker support
```
CoralogixRum.init({
workerSupport: true,
});
```
#### Examples
```
// App code – creating a worker. The SDK will automatically capture errors from it.
const worker = new Worker('my-worker.js');
```
The SDK also attaches a `CoralogixRum` handle to the worker object it returns, as a convenience for logging next to the code that created the worker. It is an alias to the same SDK instance, not a per-worker one, so it adds no worker attribution of its own - `worker.CoralogixRum.log(...)` and `CoralogixRum.log(...)` do the same thing. Pass a label yourself if you need to tell workers apart.
```
// App code, on the main thread
// Log a basic info log
worker.CoralogixRum.log(CoralogixLogSeverity.Info, 'Test log from worker');
// Manually capture errors
try {
// Some code that might throw an error
} catch (error) {
worker.CoralogixRum.captureError(error, { worker: 'analytics-worker' }, { label1: 'value1' });
}
// Log messages the worker sends back
worker.onmessage = (message) => {
worker.CoralogixRum.log(CoralogixLogSeverity.Info, 'worker message', { data: message.data });
};
```
Note
`worker.CoralogixRum` lives on the worker object in the page, not inside the worker script. Worker scope has no Coralogix global, so these calls only work on the main thread.
## Angular Zone.js configuration
By default, the SDK runs its internal timers outside Angular's Zone.js to prevent unnecessary change detection cycles. This improves performance by avoiding redundant UI updates triggered by the SDK's background operations.
```
CoralogixRum.init({
// ...
runOutsideAngularZone: true, // Defaults to true
});
```
| Value | Behavior |
| ------- | --------------------------------------------------------------------- |
| `true` | SDK timers run outside Zone.js, preventing change detection triggers. |
| `false` | SDK timers run inside Zone.js, which may trigger change detection. |
Note
In most cases, you should keep the default value (`true`) for optimal performance. Only set to `false` if you have a specific reason to include SDK operations in Angular's change detection.
## CDN
Coralogix Browser SDK is also provided via CDN.
You can choose your desired version.
#### Specific version (recommended)
From 4.0.0 the default bundle is built to the **ES2022** standard, up from ES2015. If you support older environments, use the [ES5](#es5) bundle below.
[https://cdn.rum-ingress-coralogix.com/coralogix/browser/\[version\]/coralogix-browser-sdk.js](https://cdn.rum-ingress-coralogix.com/coralogix/browser/%5Bversion%5D/coralogix-browser-sdk.js)
Replace \[version] with a version from [Releases page](https://www.npmjs.com/package/@coralogix/browser?activeTab=versions).
#### ES5
If you are targeting legacy environments, make sure to use the ES5-compatible version.
[https://cdn.rum-ingress-coralogix.com/coralogix/browser/\[version\]/coralogix-browser-sdk.es5.js](https://cdn.rum-ingress-coralogix.com/coralogix/browser/%5Bversion%5D/coralogix-browser-sdk.es5.js)
Note
The CDN `latest` tag is no longer maintained. Use an explicit version instead.
### Add the CDN script to your application
```
...
```
### Initialization
#### Via JS file
```
window.CoralogixRum.init(...);
```
#### Via TS file
```
window.CoralogixRum.init(...);
// In case of warning from TSC
declare global {
interface Window {
CoralogixRum: any;
}
}
```
## Flutter web
Coralogix Browser SDK is also provided for Flutter web.
Add the following CDN to your `index.html` file:
```
```
Then, in your Dart code, you can use the SDK as follows:
```
import 'package:flutter/material.dart';
import 'dart:js' as js;
void main() {
runApp(const MyApp());
var rum = js.JsObject.fromBrowserObject(js.context['CoralogixRum']);
rum.callMethod('init', [js.JsObject.jsify({
environment: 'test',
application: 'my-app',
version: '1.0.0',
public_key: 'my-key-123',
coralogixDomain: 'EU2',
})]);
}
```