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.
Deploy our RUM Integration Package. This includes the creation of your RUM API key, required for the Browser SDK setup.
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.
Basic Parameters | Description |
---|---|
public_key | The SDK uses your Coralogix RUM API Key to authenticate you. |
application | Name the application which you would like to monitor. This will appear so you can identify it in the Coralogix UI. |
version | Input your application version. This allows Coralogix to match your code to your data. |
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 installation 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 */ 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.
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].