RUM Browser SDK Installation Guide

As part of our Real User Monitoring (RUM) toolkit, Coralogix offers multi-faceted Error Tracking, enabled by our 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.

Prerequisites

Deploy our RUM Integration Package. This includes the creation of your RUM API key, required for the Browser SDK setup.

Setup

Configuration

STEP 1. Install the Coralogix 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.

STEP 3. Install the RUM CLI tool to upload your source map. Once the installation is complete, use the CLI by running the coralogix-rum-cli command in your terminal.

npm install @coralogix/rum-cli

STEP 4. Run this script in order to upload your source map.

coralogix-rum-cli -k "private-key" -a "application-name" -r "version1.2.3.4" -f "./dist/web-app" -e "EU2"

Notes:

• private-key: Input your Coralogix Alerts, Rules and Tags API key.
  • In your Coralogix account, open the Data Flow dropdown menu in the toolbar, and select API Keys.
  • On the API Keys page, copy the information in the Alerts, Rules and Tags API Key field.

Next Steps

• Get started with Error Tracking.
• Track your errors and engage with our user-friendly UI by navigating in your Coralogix toolbar to Explore > 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].