# Configuration options 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%2Fconfiguration%2Foptions.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%2Fconfiguration%2Foptions.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.) ### Manually Create a New Session[​](#manually-create-a-new-session "Direct link to 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[​](#unique-users "Direct link to 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[​](#network-extra-configuration "Direct link to 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[​](#important-note "Direct link to 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[​](#multi-page-application "Direct link to 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[​](#ignore-errors "Direct link to 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[​](#ignore-urls "Direct link to 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[​](#stack-trace-limit "Direct link to 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[​](#mask-elements "Direct link to 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: ``` ``` ### Custom Action Names[​](#custom-action-names "Direct link to 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. ```
``` 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[​](#label-providers "Direct link to 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[​](#url-blueprinters "Direct link to 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[​](#traces "Direct link to Traces") Add trace context propagation in headers across service boundaries ``` CoralogixRum.init({ // ... traceParentInHeader: { enabled: true, }, }); ``` #### propagateTraceHeaderCorsUrls[​](#propagatetraceheadercorsurls "Direct link to 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[​](#allowedtracingurls "Direct link to 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[​](#extra-propagators "Direct link to Extra Propagators") #### B3 / AWS X-Ray Propagation[​](#b3--aws-x-ray-propagation "Direct link to 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[​](#custom-propagation "Direct link to 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']; } } ```