# React Native SDK Copy as Markdown[Open in ChatGPT](https://chatgpt.com/?q=Read%20https%3A%2F%2Fdocs-docusaurus.kinsta.page%2Fuser-guides%2Frum%2Fsdk-installation%2Freact-native%2Freact-native-sdk.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)[Open in Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fdocs-docusaurus.kinsta.page%2Fuser-guides%2Frum%2Fsdk-installation%2Freact-native%2Freact-native-sdk.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.) This document describes how to integrate the **React Native SDK**. Tip The `@coralogix/react-native-plugin` is replacing the legacy `@coralogix/react-native-sdk`. If you are still using the older package, your implementation will continue to work with no breaking changes. We recommend migrating to the [new plugin](https://docs-docusaurus.kinsta.page/user-guides/rum/sdk-installation/react-native/react-native-plugin/.md) to take advantage of improved performance and full React Native support. ## Overview[​](#overview "Direct link to Overview") Coralogix offers [Real User Monitoring](https://docs-docusaurus.kinsta.page/user-guides/rum/getting-started/real-user-monitoring/.md) (RUM) enabled by our [React Native SDK](https://www.npmjs.com/package/@coralogix/react-native-sdk). ## Prerequisites[​](#prerequisites "Direct link to Prerequisites") Deploy our [RUM Integration Package](https://docs-docusaurus.kinsta.page/user-guides/rum/getting-started/rum-integration-package/.md). This includes creating your RUM API key, which is required for the SDK setup. ## Usage[​](#usage "Direct link to Usage") To use the Coralogix SDK, call `CoralogixRum.init(options)` at the earliest possible moment after the page load. This will initialize the SDK based on the options you provided. ``` import { CoralogixRum } from '@coralogix/react-native-sdk'; CoralogixRum.init({ application: 'app-name', environment: 'production', public_key: 'abc-123-456', coralogixDomain: 'EU2', version: 'v1.0.3', labels: { payment: 'visa', }, ignoreErrors: ['some error message to ignore'], sessionSampleRate: 100 // Percentage of overall sessions being tracked, Default to 100% }); ``` These fields configure various aspects of the Coralogix RUM SDK, including identification, environment settings, error handling, and data tagging in the `CoralogixRum.init()` function: | Field Name | Description | Example Value | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | | application | The name of the application being monitored. | 'app-name' | | environment | The environment in which the application is running (e.g., production, staging, development). | 'production' | | public\_key | The public API key used for authentication with Coralogix. | 'abc-123-456' | | coralogixDomain | The [Coralogix domain](https://docs-docusaurus.kinsta.page/user-guides/account-management/account-settings/coralogix-domain/.md) associated with your account. | 'EU2' | | version | The version of the application being monitored. | 'v1.0.3' | | labels | Custom labels to tag and categorize data being sent. | { payment: 'visa' } | | ignoreErrors | A list of error messages or patterns to be ignored by the monitoring system. | \['some error message to ignore'] | | sessionSampleRate | The percentage of sessions to be tracked by the monitoring system. A value of 100 means all sessions. | 100 | Use the exported functions of CoralogixRum to provide contextual information or transmit manual logs. Remember, these functions will remain inactive until you invoke `CoralogixRum.init()`. ``` import { CoralogixRum } from '@coralogix/react-native-sdk'; // Update user context dynamically CoralogixRum.setUserContext({ user_id: '123', user_name: 'name', user_email: 'user@email.com', user_metadata: { role: 'admin', // ... } }); // Update custom labels dynamically CoralogixRum.setLabels({ ...CoralogixRum.getLabels(), paymentMethod: 'visa', userTheme: 'dark', // ... }); // Update application context dynamically CoralogixRum.setApplicationContext({ application: 'app-name', version: '1.0.0' }); CoralogixRum.log(CoralogixLogSeverity.Error, 'this is a log', { key: 'value' }); CoralogixRum.error('this is a log with error severity', { key: 'value' }); ``` ## Instrumentation[​](#instrumentation "Direct link to Instrumentation") You can enable or disable specific instrumentation, with the default set to all trues. Each instrumentation controls the data the SDK will track and collect. ``` CoralogixRum.init({ // ... instrumentations: { xhr: false, fetch: false, custom: true, errors: true, } }); ``` ## Features[​](#features "Direct link to Features") ### Ignore errors[​](#ignore-errors "Direct link to Ignore errors") The `ignoreErrors` option lets you exclude errors that meet specific criteria. This option accepts strings and regular expressions to match against the event's error message. Use regular expressions for exact matches, as strings remove partial matches. ``` import { CoralogixRum } from '@coralogix/react-native-sdk'; CoralogixRum.init({ // ... ignoreErrors: [/Exact Match Error Message/, 'partial/match'], }); ``` ### TraceParentInHeader[​](#traceparentinheader "Direct link to TraceParentInHeader") Add trace context propagation in headers across service boundaries. ``` CoralogixRum.init({ // ... traceParentInHeader: { enabled: true, options: { // Specify backend domains if different from the app domain. propagateTraceHeaderCorsUrls: [new RegExp('.*')], // B3 propagation propagateB3TraceHeader: { singleHeader: true, multiHeader: true, }, // AWS propagation propagateAwsXrayTraceHeader: true, }, }, }); ``` ### beforeSend[​](#beforesend "Direct link to beforeSend") Enable event access and modification before sending to Coralogix, allowing content modification and event discarding. ``` CoralogixRum.init({ // ... beforeSend: (event) => { // Discard events from @company.com users. if (event.session_context.user_email?.endsWith('@company.com')) { return null; } // Redact sensitive information from the page URL. event.page_context.page_url = event.page_context.page_url.replace( 'sensitive-info', 'redacted' ); return event; }, }); ``` ### Proxy URL[​](#proxy-url "Direct link to Proxy URL") Proxy configuration to route requests. Specifying a proxy URL will direct all RUM data to this URL via the POST method. Ensure this data is subsequently relayed from the proxy to Coralogix. The Coralogix route for each request sent to the proxy is available in the request’s `cxforward` parameter (for example, `https://www.your-proxy.com/endpoint?cxforward=https%3A%2F%2Fingress.eu1.rum-ingress-coralogix.com%2Fbrowser%2Fv1beta%2Flogs`). ``` CoralogixRum.init({ // ... coralogixDomain: 'EU1', proxyUrl: '' }); ```