React Native Plugin

Overview

The Coralogix React Native Plugin is the latest and recommended SDK for enabling Real User Monitoring (RUM) in React Native applications. This plugin replaces the legacy @coralogix/react-native-sdk and provides a more stable, high-performance integration.

Prerequisites

Deploy our RUM Integration Package. This includes creating your RUM API key, which is required for the SDK setup.

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-plugin';

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 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-plugin';

// 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

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: {
    errors: true,
    custom: true,
    mobile_vitals: true,
    anr: true,
    lifecycle: true,
    user_interaction: true,
    network: true
  }
});

Features

Mobile Vitals

Automatically collects key app performance metrics, including CPU, memory, FPS, cold start, warm start, and ANR events.
These metrics are aggregated and sent every 15 seconds.
Learn more in Mobile Vitals for full metric coverage and dashboard examples.

Configure Mobile Vitals

// Add this to CoralogixRum.init(...)
CoralogixRum.init({
  // ...
  mobileVitals: {
    warm: true,
    cold: true,
    cpu: true,
    memory: true,
    rendering: true,        // FPS / rendering
    slowFrozenFrames: true
  }
});

Ignore specific 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-plugin';

CoralogixRum.init({
  // ...
  ignoreErrors: [/Exact Match Error Message/, 'partial/match'],
});

Propagate trace context

Add trace context propagation in headers across service boundaries.

CoralogixRum.init({
  // ...
  traceParentInHeader: {
    enabled: true
  },
});

Modify events before sending

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;
  },
});

Route data through a proxy

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: '<https://www.your-proxy.com/endpoint>'
});

Support

Need help?

Our world-class customer success team is available 24/7 to assist you with your setup and answer any questions you may have.

Feel free to reach out to us via our in-app chat or by emailing support@coralogix.com.