--- title: NPM browser SDK installation guide description: As part of our Real User Monitoring (RUM) toolkit, Coralogix offers multi-faceted Error Tracking, enabled by our RUM Browser SDK. This tutorial demonstrates how to set up and configure the RUM Browser SDK to hit the ground running with Error Tracking. Once configured, all network requests and errors in your system will be captured and sent to Coralogix. url: https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/npm-browser/ product: rum feature: Browser SDK feature_id: browser-sdk feature_identifier: rum/browser-sdk last_updated: '2026-10-21' --- # NPM browser SDK installation guide As part of our [Real User Monitoring](https://coralogix.com/docs/user-guides/rum/getting-started/real-user-monitoring.md) (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](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/cdn-browser.md). If you're using a framework, follow the framework-specific guide instead: * [Next.js](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/nextjs.md) * [SvelteKit](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/sveltekit.md) ## What you need * **RUM key**: a Send-Your-Data key with the **SendRUMData** role preset. [Create it](https://coralogix.com/docs/user-guides/account-management/api-keys/api-keys.md#create-an-api-key) before the Browser SDK setup below. The key is public, and the preset is standalone, so it can't be combined with other presets. Don't use **SendData**: it carries no RUM permissions, and keys created with it must stay secret, so they don't belong in client code. * **Source-map key**: a separate Team key with the **SourceMapping** preset. The [RUM CLI](https://coralogix.com/docs/user-guides/rum/cli/rum-cli.md#authentication-and-permissions) uses it at build time to upload source maps. ## Setup ### Configuration 1 . Install the Coralogix [NPM Browser SDK package](https://www.npmjs.com/package/@coralogix/browser). ``` 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: 'test@test.com', 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](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/logs-and-errors.md) to strings before sending to Coralogix. Useful when sending non-string values like nested objects or arrays. | | `coralogixDomain` | Input your Coralogix [**domain**](https://coralogix.com/docs/user-guides/account-management/account-settings/coralogix-domain.md). | | `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; /** A pattern for error messages which should not be sent to Coralogix. By default, all errors will be sent. * */ ignoreErrors?: Array; /** 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](https://coralogix.com/docs/opentelemetry/getting-started.md) 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](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/options.md) - including `ignoreErrors`, `ignoreUrls` and anonymous users
[Sampling](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/sampling.md)
[Before send and transport](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/configuration/before-send-and-transport.md) | | Features | [Logs and errors](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/logs-and-errors.md) - including Web Vitals and the TBT metric
[Session recording](https://coralogix.com/docs/user-guides/rum/sdk-installation/javascript/browser-sdk/features/session-recording.md) | ## Upload your source maps Install the RUM CLI tool and upload your source maps, authenticating with the source-map key from [What you need](#what-you-need). See the [RUM CLI documentation](https://coralogix.com/docs/user-guides/rum/cli/rum-cli.md). ## Next steps [Get started](https://coralogix.com/docs/user-guides/rum/product-features/error-tracking.md) with **Error Tracking**. Use our dedicated [User Manual](https://coralogix.com/docs/user-guides/rum/product-features/error-tracking-user-manual.md) for support. ## Additional resources | | | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Documentation | [Real User Monitoring](https://coralogix.com/docs/user-guides/rum/getting-started/real-user-monitoring.md)
[RUM Integration Package](https://coralogix.com/docs/user-guides/rum/sdk-installation/overview.md)
[Error Tracking](https://coralogix.com/docs/user-guides/rum/product-features/error-tracking.md)
[Error Tracking: User Manual](https://coralogix.com/docs/user-guides/rum/product-features/error-tracking-user-manual.md) |