NPM browser SDK installation guide

Open in ChatGPTOpen in Claude

As part of our Real User Monitoring (RUM) toolkit, Coralogix offers multi-faceted Error Tracking, enabled by our NPM RUM Browser SDK.

Integrated into the front end of web applications, this lightweight code tool detects and captures errors that arise within users' browsers, including JavaScript runtime errors, unhandled exceptions, network errors, and application (custom logic) errors. The SDK collects essential error information and additional contextual data, such as browser details and URLs, and securely sends it to our platform through logs for further analysis.

For information on our CDN Browser SDK, view this page.

If you're using a framework, follow the framework-specific guide instead:

• Next.js
• SvelteKit

Prerequisites

Create a RUM API key with the Send Your Data permission preset. The Browser SDK setup below needs it.

Setup

Configuration

1.

Install the Coralogix NPM Browser SDK package.

npm install @coralogix/browser

2.

Initialize the SDK. Import CoralogixRum from the package, then call init:

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

    CoralogixRum.init({
      stringifyCustomLogData: true,
      public_key: 'abc-123-456',
      application: 'natan-test',
      version: '1.0',
      coralogixDomain: 'EU2',
      user_context: {
       user_email: '[email protected]',
       user_name: 'aa',
       user_id: '123'
      },
      labels: {
        payment: 'visa'
      }
    });

Input the following basic parameters.

Basic Parameters	Description
public_key	The SDK uses your Coralogix RUM API Key to authenticate you.
application	Details for the specific user, including user_email, user_name, and user_id. This can be sent later to Coralogix if you do not have these details during initialization.
version	Input your application version. This allows Coralogix to match your code to your data.
stringifyCustomLogData	(Optional) Boolean flag. If true, converts custom log data to strings before sending to Coralogix. Useful when sending non-string values like nested objects or arrays.
coralogixDomain	Input your Coralogix domain.
user_context	Details for the specific user, including user_email, user_name, and user_id. This can be sent later to Coralogix if you do not have these details during the initialization process.
labels	Input labels of your choosing.

You also have the options to add other instrumentation options with other advanced parameters.

export interface CoralogixOtelWebConfig {
  /** Publicly-visible `public_key` value */
  public_key: string;

  /** Sets a value for the `application` attribute */
  application: string;

  /** Coralogix account domain */
  coralogixDomain: CoralogixDomain;

  /** Configuration for user context. */
  user_context?: UserContextConfig;

  /** Turns on/off internal debug logging */
  debug?: boolean;

  /** Sets a value for the 'app.version' attribute */
  version?: string;

  /** Sets labels added to every Span. */
  labels?: CoralogixRumLabels;

  /**
   * Applies for XHR and Fetch URLs. URLs that partially match any regex in ignoreUrls will not be traced.
   * In addition, URLs that are _exact matches_ of strings in ignoreUrls will also not be traced.
   * */
  ignoreUrls?: Array<string | RegExp>;

  /**
   A pattern for error messages which should not be sent to Coralogix. By default, all errors will be sent.
   * */
  ignoreErrors?: Array<string | RegExp>;

  /** Configuration for instrumentation modules. */
  instrumentations?: CoralogixOtelWebOptionsInstrumentations;

  /** Add Traceparent to headers in order to start a trace */
  traceParentInHeader?: TraceHeaderConfiguration;
}

Note:

• traceParentInHeader: If you are using OpenTelemetry instrumentation in your backend services, use this flag to ensure your frontend creates spans.

SDK configuration and features

This install path uses the Browser SDK, so its options and features are documented once on the SDK's own pages rather than repeated here:

Configuration	Options - including ignoreErrors, ignoreUrls and anonymous users Sampling Before send and transport
Features	Logs and errors - including Web Vitals and the TBT metric Session recording

Upload your source maps

Install the RUM CLI tool and upload your source maps. Find out more here.

Next steps

Get started with Error Tracking. Use our dedicated User Manual for support.

Additional resources

Documentation	Real User Monitoring RUM Integration Package Error Tracking Error Tracking: User Manual