Table of Contents
Official Coralogix SDK for Browsers
Links
Supported Frameworks
JavaScript / TypeScript Frameworks: React, Angular, Vue, NextJS and more.
Flutter (Currently only web).
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');
// 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
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. |
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)
By default, the CDN is built using the ES2015 (ES6) standard.
https://cdn.rum-ingress-coralogix.com/coralogix/browser/[version]/coralogix-browser-sdk.js
Replace [version] with a version from Releases page.
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
Note: CDN latest has no longer maintained, please use an explicit version instead.
Add the CDN script to your application
<head>
...
<script src="https://cdn.rum-ingress-coralogix.com/coralogix/browser/[version]/coralogix-browser-sdk.js"></script>
</head>
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:
<script src="https://cdn.rum-ingress-coralogix.com/coralogix/browser/[version]/coralogix-browser-sdk.js"></script>
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',
})]);
}