NPM Browser SDK Installation Guide

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.

Prerequisites

Deploy our RUM Integration Package. This includes creating your RUM API key, which is required for the Browser SDK setup.

Setup

Configuration

STEP 1. Install the Coralogix NPM Browser SDK package.

npm install @coralogix/browser

STEP 2. Initialize the SDK.

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

Input the following basic parameters.

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 */
  coralogixdDomain: 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.

Ignore Errors

Coralogix provides a feature that allows you to selectively ignore errors. This functionality lets you focus on the critical issues impacting user experience and streamline your error-tracking process.

Using Regex, you can set up the SDK to reject all requests with a full or partial URL, as in the following example.

ignoreUrls: [
    '<https://my-server.com/user/123>', // will ignore all requests match this url
    /.*\\.svg/, // will ignore all requests match this regex - all svg files
    /.*material-override.*/, // will ignore all requests match this regex - all urls with the string material-override
  ],

You also have the option setup the SDK to reject all errors with a particular message or string, as in the following example.

ignoreErrors: [
    'This is a custom error', // will ignore all errors with this message
    /.*my-error.*/, // will ignore all errors match this regex - all errors with the string my-error
  ],

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

Support

Need help?

Our world-class customer success team is available 24/7 to walk you through your setup and answer any questions that may come up.

Feel free to reach out to us via our in-app chat or by sending us an email at [email protected].