Configuration options

Open in ChatGPTOpen in Claude

Manually Create a New Session

By default the SDK rotates the session automatically — after 15 minutes of inactivity, or once a session reaches 1 hour. Starting with version 3.19.0, you can also rotate it on demand by calling CoralogixRum.createNewSession(), for example when a user logs out, so that subsequent events are attributed to a fresh session.

import { CoralogixRum } from '@coralogix/browser';

// e.g. inside your logout handler
CoralogixRum.createNewSession();

This ends the current session and immediately starts a new one with a new session id. If session recording is active, the current recording is finalized and a new one begins for the new session.

Unique Users

Starting with version 2.9.0, the SDK calculates unique users based on the user’s fingerprint.
The fingerprint is generated and stored on each user’s machine for reuse.
In earlier versions, the SDK used user_id to calculate unique users, which is still supported for backward compatibility.

Network Extra Configuration

The networkExtraConfig property is an array of configuration objects, each specifying custom rules for capturing network requests and responses. This feature collects data from Fetch and XMLHttpRequest calls, attaching specified request and response information, headers, and payloads to each network event.

CoralogixRum.init({
  networkExtraConfig: [
    {
      url: 'http://example.com', // Capture requests to this specific URL or regex pattern
      reqHeaders: ['Authorization', 'Content-Type'], // Capture 'Authorization' and 'Content-Type' headers in requests
      resHeaders: ['Cache-Control', 'Date'], // Capture 'Cache-Control' and 'Date' headers in responses
      collectReqPayload: true, // Collect request payload
      collectResPayload: false, // Do not collect response payload
    },
  ],
});

Important Note

The server must explicitly permit access to specific headers by listing them in the Access-Control-Expose-Headers response header. Due to restrictions in the Fetch and XHR APIs, header retrieval operates on a best-effort basis, meaning that some headers may occasionally be unavailable in the events collected by this integration. Additionally, any large payloads exceeding the allowed size will be dropped.

Multi Page Application

If your application is not a single page application (SPA), you can initialize the SDK with a configuration to retain the session ID after a reload/refresh. This will prevent multiple sessions from being created when the user navigates within the app.

CoralogixRum.init({
  // ...
  sessionConfig: {
    // ...
    keepSessionAfterReload: true,
  },
});

Ignore Errors

The ignoreErrors option allows you to exclude errors that meet specific criteria. This options accepts a set of strings and regular expressions to match against the event's error message. Use regular expressions for exact matching as strings remove partial matches.

import { CoralogixRum } from '@coralogix/browser';

CoralogixRum.init({
  // ...
  ignoreErrors: [/Exact Match Error Message/, 'partial/match'],
});

Ignore Urls

The ignoreUrls option allows you to exclude network requests that meet specific criteria. This options accepts a set of strings and regular expressions to match against the event's network url. Use regular expressions for exact matching as strings remove partial matches.

import { CoralogixRum } from '@coralogix/browser';

CoralogixRum.init({
  // ...
  ignoreUrls: [/.*\.svg/, /.*\.ico/], // will ignore all requests to .svg and .ico files
});

Stack Trace Limit

Browsers typically capture 10 stack frames by default. If your error stack traces are being truncated and you need to see deeper into the call stack, you can increase this limit using the stackTraceLimit option.

import { CoralogixRum } from '@coralogix/browser';

CoralogixRum.init({
  // ...
  stackTraceLimit: 50,
});

Note

Higher values may have a performance impact, as the browser needs to capture more frames each time an error is created.

Mask elements

User interactions capture text from clickable elements only (button, label, link, input, option). Elements text can be masked to prevent sensitive data exposure.
use maskInputTypes to specify the types of inputs to mask. defaults to: ['password']
use maskClass to specify the class name that will be used to mask any clickable element. Default masking class is cx-mask.

CoralogixRum.init({
  // ...
  maskInputTypes: ['password', 'date'], // will only mask password and date inputs
  maskClass: 'mask-me', // will mask any clickable element with class 'mask-me'
});

Examples of masked elements:

<button class="cx-mask">
  <span>Some Text</span>
</button>

<button>
  <span class="cx-mask">Some Text</span>
</button>

<my-button-component class="cx-mask">
   <button>Text</button>
</my-button-component>

Custom Action Names

The SDK uses various strategies to name click actions. For more control, define a data-cx-action-name attribute on clickable elements (or any of their parents) to set the action name.

<button data-cx-action-name="add-to-cart">
  Add to Cart
</button>

<form data-cx-action-name="checkout-form">
  <input type="text" placeholder="Card number" />
  <button type="submit">Complete Purchase</button>
</form>

<nav data-cx-action-name="main-navigation">
  <a href="/products">Products</a>
  <a href="/pricing">Pricing</a>
</nav>

Note

The data-cx-action-name attribute is never masked, even when the element has a mask class applied. This ensures your custom action names are always captured for tracking purposes.

Label Providers

Provide labels based on url or event

import { CoralogixRum } from '@coralogix/browser';

const featurePageUrlLabelProvider = new UrlBasedLabelProvider({
  urlType: UrlType.PAGE,
  urlPatterns: [
    {
      regexps: [/apm/],
      labels: { featureGroupId: 'apm' },
    },
  ],
  defaultLabels: {
    featureGroupId: 'unknown-feature-group',
  },
});

const regularExpErrorLabelProvider: GenericLabelProvider = {
  providerFunc: (url, event) => {
    if (event.error_context?.error_message?.includes('Invalid regular expression')) {
      return {
        regular_expression_error: 'true',
      };
    }

    return {};
  },
};

CoralogixRum.init({
  // ...
  labelProviders: [featurePageUrlLabelProvider, regularExpErrorLabelProvider],
});

Url Blueprinters

Modify the event's page or network url based on custom-defined functions.

import { CoralogixRum } from '@coralogix/browser';

CoralogixRum.init({
  // ...
  urlBlueprinters: {
    pageUrlBlueprinters: [
      (url) => {
        const hostnameParts = new URL(url).hostname.split('.');
        hostnameParts[0] = '{team-id}';
        return 'https://' + hostnameParts.join('.');
        // "https://alpha.company.com" => "https://{team-id}.company.com"
      },
    ],
    networkUrlBlueprinters: [(url) => url.replace('api/v1', '{server}')],
    // "https://path/api/v1/logs" => "https://path/{server}/logs"
  },
});

Traces

Add trace context propagation in headers across service boundaries

CoralogixRum.init({
  // ...
  traceParentInHeader: {
    enabled: true,
  },
});

propagateTraceHeaderCorsUrls

When the backend domain is different from the app domain, specifying backend domains is necessary.
For example, if the app is hosted on https://app.com and the backend is hosted on https://webapi.com, you should specify the backend domain.

CoralogixRum.init({
  // ...
  traceParentInHeader: {
    enabled: true,
    options: {
      propagateTraceHeaderCorsUrls: [new RegExp('https://webapi.*')],
    },
  },
});

allowedTracingUrls

Specify the allowed URLs to propagate the trace header.
Note that if allowedTracingUrls is not specified, the trace header will be propagated to all URLs.
allowedTracingUrls works only on 1st party URLs. (see propagateTraceHeaderCorsUrls for 3d party URLs)

For example if you want to propagate the trace header only for URLs that contain the word alpha:

CoralogixRum.init({
  // ...
  traceParentInHeader: {
    enabled: true,
    options: {
      allowedTracingUrls: [new RegExp('alpha')],
    },
  },
});

Extra Propagators

B3 / AWS X-Ray Propagation

CoralogixRum.init({
  // ...
  traceParentInHeader: {
    enabled: true,
    options: {
      // ...
      /* for B3 propagation  */
      propagateB3TraceHeader: {
        singleHeader: true,
        multiHeader: true,
      },
      /* for Aws propagation */
      propagateAwsXrayTraceHeader: true,
    },
  },
});

Custom Propagation

CoralogixRum.init({
  // ...
  traceParentInHeader: {
    enabled: true,
    options: {
      // ...
      /* for Custom propagation */
      propagateCustomTraceHeader: new CustomPropagator()
    },
  },
});

// Example of CustomPropagator, Converts the 128-bit OpenTelemetry trace/span IDs into 64-bit decimal IDs

import {
  TextMapGetter,
  TextMapSetter,
  TextMapPropagator,
  Context,
  trace,
} from '@opentelemetry/api';

export class CustomPropagator implements TextMapPropagator {
  inject(context: Context, carrier: any, setter: TextMapSetter) {
    const span = trace.getSpan(context);
    if (!span) return;

    const spanContext = span.spanContext();
    if (!spanContext) return;

    // Custom trace ID = last 64 bits of OTel trace ID
    const customTraceId = BigInt(
      '0x' + spanContext.traceId.slice(16)
    ).toString();
    const customParentId = BigInt('0x' + spanContext.spanId).toString();

    setter.set(carrier, 'my-custom-trace-id', customTraceId);
    setter.set(carrier, 'my-custom-parent-id', customParentId);
  }

  extract(context: Context, carrier: any, getter: TextMapGetter): Context {
    const traceIdHeader = getter.get(carrier, 'my-custom-trace-id');
    const parentIdHeader = getter.get(carrier, 'my-custom-parent-id');

    if (!traceIdHeader || !parentIdHeader) return context;

    const traceId = BigInt(traceIdHeader as string)
  .toString(16)
      .padStart(32, '0');

    const spanId = BigInt(parentIdHeader as string)
  .toString(16)
      .padStart(16, '0');

    return trace.setSpan(
      context,
      trace.wrapSpanContext({
        traceId,
        spanId,
        traceFlags: 1,
        isRemote: true,
      })
    );
  }

  fields(): string[] {
    return ['my-custom-trace-id', 'my-custom-parent-id'];
  }
}