# NPM browser SDK installation guide Copy as Markdown[Open in ChatGPT](https://chatgpt.com/?q=Read%20https%3A%2F%2Fcoralogix.com%2Fdocs%2Fuser-guides%2Frum%2Fsdk-installation%2Fjavascript%2Fnpm-browser.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)[Open in Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fcoralogix.com%2Fdocs%2Fuser-guides%2Frum%2Fsdk-installation%2Fjavascript%2Fnpm-browser.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.) 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) ## Prerequisites[​](#prerequisites "Direct link to Prerequisites") Create a RUM [API key](https://coralogix.com/docs/user-guides/account-management/api-keys/api-keys.md) with the **Send Your Data** permission preset. The Browser SDK setup below needs it. ## Setup[​](#setup "Direct link to Setup") ### Configuration[​](#configuration "Direct link to 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[​](#sdk-configuration-and-features "Direct link to 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[​](#upload-your-source-maps "Direct link to Upload your source maps") Install the RUM CLI tool and upload your source maps. Find out more [here](https://coralogix.com/docs/user-guides/rum/cli/rum-cli.md). ## Next steps[​](#next-steps "Direct link to 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[​](#additional-resources "Direct link to 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) |