Copy as Markdown[Open in ChatGPT](https://chatgpt.com/?q=Read%20https%3A%2F%2Fcoralogix.com%2Fdocs%2Fuser-guides%2Frum%2Fsdk-installation%2Fjavascript%2Fbrowser-sdk.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)[Open in Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fcoralogix.com%2Fdocs%2Fuser-guides%2Frum%2Fsdk-installation%2Fjavascript%2Fbrowser-sdk.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)
**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](#sampling)
* [Basic Sampling](#1-basic-sampling---sample--of-all-sessions)
* [Advanced Sampling](#2-advanced-sampling---sample--of-sessions-but-always-track-sessions-with-errors)
* [Exclude Specific Instrumentations from Sampling](#3-exclude-specific-instrumentations-from-sampling)
* [Only Sessions with Errors](#4-only-sessions-with-errors)
6. [Sending Custom Logs](#sending-custom-logs)
7. [Instrumentations](#instrumentations)
8. [Manually Capture Errors](#manually-capture-errors)
9. [Session Recording](#session-recording)
* [Recording Manually](#recording-manually)
* [Privacy & Security](#privacy--security)
* [Worker URL](#worker-url)
* [Screenshots](#screenshots)
10. [Manually Create a New Session](#manually-create-a-new-session)
11. [Unique Users](#unique-users)
12. [Network Extra Configuration](#network-extra-configuration)
13. [Multi Page Application](#multi-page-application)
14. [Ignore Errors](#ignore-errors)
15. [Ignore URLs](#ignore-urls)
16. [Stack Trace Limit](#stack-trace-limit)
17. [Mask Elements](#mask-elements)
18. [Custom Action Names](#custom-action-names)
19. [Label Providers](#label-providers)
20. [URL Blueprinters](#url-blueprinters)
21. [Traces](#traces)
* [Propagate Trace Header for CORS URLs](#propagatetraceheadercorsurls)
* [Allowed Tracing URLs](#allowedtracingurls)
* [Extra Propagators (B3 / AWS X-Ray)](#b3--aws-x-ray-propagation)
* [Custom Propagation](#custom-propagation)
* [Traces Exporter](#traces-exporter)
22. [Before Send](#before-send)
23. [Proxy URL](#proxy-url)
* [ignoreProxyUrlParams](#ignoreproxyurlparams)
24. [Ingress URL](#ingress-url)
25. [Collect IP Data](#collect-ip-data)
26. [SDK Fetch Priority](#sdk-fetch-priority)
27. [Custom Measurement](#custom-measurement)
28. [Add Timing](#add-timing)
29. [Custom Time Measurement](#custom-time-measurement)
30. [Microfrontend Support](#microfrontend-support)
* [Pre Requisites](#pre-requisites)
31. [Custom Spans](#custom-spans)
* [Ignored Instruments](#ignored-instruments)
32. [OpenTelemetry Batch Configuration](#opentelemetry-batch-configuration)
33. [Soft Navigations (Experimental)](#soft-navigations--experimental)
34. [Memory Usage (Experimental)](#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[](#links "Direct link to Links")
* [Changelog](https://coralogix.github.io/coralogix-browser-sdk/CHANGELOG.html)
* [Coralogix Real User Monitoring](https://coralogix.com/docs/user-guides/user-guides/rum/getting-started/real-user-monitoring/index.mdx)
## Supported Frameworks[](#supported-frameworks "Direct link to Supported Frameworks")
JavaScript / TypeScript Frameworks: React, Angular, Vue, NextJS and more.
Flutter (Currently only web).
## Usage[](#usage "Direct link to 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 "Direct link to 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[](#enabling-web-worker-support "Direct link to Enabling Web Worker Support")
```
CoralogixRum.init({
workerSupport: true,
});
```
#### Examples[](#examples "Direct link to Examples")
```
// App code – creating a worker. The SDK will automatically capture errors from it.
const worker = new Worker('my-worker.js');
```
```
// Worker code
// 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 received in the worker
self.onmessage = (message) => {
worker.CoralogixRum.log(CoralogixLogSeverity.Info, message);
};
```
## Angular Zone.js Configuration[](#angular-zonejs-configuration "Direct link to 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[](#cdn "Direct link to CDN")
Coralogix Browser SDK is also provided via CDN.
You can choose your desired version.
#### Specific Version (recommended)[](#specific-version-recommended "Direct link to Specific Version (recommended)")
By default, the CDN is built using the **ES2015 (ES6)** standard.
[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[](#es5 "Direct link to 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: CDN latest has no longer maintained, please use an explicit version instead.***
### Add the CDN script to your application[](#add-the-cdn-script-to-your-application "Direct link to Add the CDN script to your application")
```
...
```
### Initialization[](#initialization "Direct link to Initialization")
#### Via JS file[](#via-js-file "Direct link to Via JS file")
```
window.CoralogixRum.init(...);
```
#### Via TS file[](#via-ts-file "Direct link to Via TS file")
```
window.CoralogixRum.init(...);
// In case of warning from TSC
declare global {
interface Window {
CoralogixRum: any;
}
}
```
## Flutter web[](#flutter-web "Direct link to 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',
})]);
}
```